I’ve used Expression Blend in many occasions but I’ve never experimented with expression design since the release of this product. After the release of version 2.0 Beta of Expression Design this is the first time I’m using Microsoft Expression Design. In this demonstration I’ll fix design of my control using Expression Design. Let’s dig into the story .
First open Expression Design 2.0 Beta . From the File menu click New or press CTRL+N.
. 
In the New Document Dialog Box choose the name for the document to your linking. Specify the Width and Height to adjust the output area of your file . You can change these values by clicking on each field, or choose a width and height from the Presets drop-down list. Also, live effects are only visible within the artboard area. In general, you should match the document size to your output size. In the New Document dialog box you will see a drop-down list named presets . I’ve chosen 800 X 600 for my document from the available presets. Choose a value in the Resolution field. This is the resolution at which live effects will be rasterized. If everything is set according to my instruction the New Document dialog box should look like the screen shot below :
Before delve into the design demonstration one more information on the files supported by the Expression Design are : Photoshop 7 and earlier (.psd), TIFF, JPEG (or JPG or JFIF), GIF, PNG, BMP (or DIB or RLE), Windows Media Photo (WDP, HD Photo, or HDP), ICO. Adobe Illustrator PDF file or a native .AI file, if Illustrator's Create PDF Compatible File feature is enabled can also be imported by clicking Import on the File menu . The objects in the PDF file will be converted to Expression Design objects as closely as possible. In some cases, the objects may be altered; for example, text may convert to outlines. I hope this information should help the folks who are interested in the designing stuff.
Now start designing the visual interface for the control. In the center of the drawing area you’ll see a rectangular area which is known as artboard. The role of the artboard is to represent the intended output area of the document. At first select a Rectangle from the Toolbox which contains all the tools you need for designing stuff.
Draw the Rectangle over the artboard. Set the Corner Radius of the rectangle to 75 px to make your this Rectangle a little bit rounded shape in each corner of the rectangle. You can adjust this property according to your needs. It’s actually depends on what shape you want to give to your control or what look you want to give your control. Select the Rectangle. Under the properties panel select appearance to fix the appearance of the Rectangle. Select Gradient Brush. Adjust the color key of the both sides according to your choice. I have played here with the blue color keys of the both sides. Select the Rectangle add some effects by selecting the add effects option there you’ll see the list of effects. I’ve added here drop Shadow and Paint Daubs. If everything is done in the way I’ve mentioned, you should have designed a rectangle shown below :
Select the Rectangle to increase the stroke width. I’ve just set here 11 px.
Change the stroke color by selecting in the appearance section there’s plenty of options available for you and that’s the richness of Expression Design.
Select the options you need. I’ve chosen here from the Beach swatches.
I’ve finished designing here only working with the one layer. You can use as many layers as you like to give your control a unique look. Now from the Select Menu choose All or press CTRL+A to select all the objects.
From the Edit menu choose Copy XAML or press Ctrl+Shift+C .
Now Open Expression Blend , select New Project from the File Menu and then Select Silverlight 2 Application from project template. Name the project according to your liking. I’ve named it SilverlightControlDesign. Specify the location where you want to reside your project.
Now in the Page.xaml paste the xaml you’ve copied from Expression design. It doesn’t makes sense to paste the complete xaml which has been copied. So I’ve paste it in a Notepad and copied only the xaml inside the layout panel . The Xaml generated from the Design was some thing like this :
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="Layer_1_0" Width="800" Height="600" Canvas.Left="0" Canvas.Top="0">
<Path Width="709.611" Height="242.023" Canvas.Left="47.9296" Canvas.Top="74.7544" Stretch="Fill" StrokeThickness="11" StrokeLineJoin="Round" Stroke="#FF3C78C3" Data="M 128.43,80.2544L 673.04,80.2544C 714.461,80.2544 752.04,109.832 752.04,151.254L 752.04,230.479C 752.04,271.9 714.461,311.277 673.04,311.277L 128.43,311.277C 87.0082,311.277 53.4296,277.699 53.4296,236.277L 53.4296,155.254C 53.4296,113.833 87.0082,80.2544 128.43,80.2544 Z ">
<Path.Fill>
<LinearGradientBrush StartPoint="0.518626,-0.166413" EndPoint="2.84322,-0.166413">
<LinearGradientBrush.RelativeTransform>
<TransformGroup>
<SkewTransform CenterX="0.518626" CenterY="-0.166413" AngleX="26.5812" AngleY="0"/>
<RotateTransform CenterX="0.518626" CenterY="-0.166413" Angle="86.298"/>
</TransformGroup>
</LinearGradientBrush.RelativeTransform>
<LinearGradientBrush.GradientStops>
<GradientStop Color="#FF0CE6F1" Offset="0"/>
<GradientStop Color="#FF0C47A2" Offset="0.589041"/>
<GradientStop Color="#FF0A42C0" Offset="0.737903"/>
<GradientStop Color="#FF083EDE" Offset="1"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Path.Fill>
<Path.BitmapEffect>
<DropShadowBitmapEffect Softness="0.377953" ShadowDepth="18.8976" Opacity="0.599998" Color="#FF000000" Direction="315" Noise="0"/>
</Path.BitmapEffect>
</Path>
</Canvas>
So I’ve Copied only the Xaml which is inside the Canvas and Paste it in the Page.xaml’s <Grid> </Grid> Section. I had a major setback cause if you look at the xaml you’ll notice that <Path.BitmapEffect> section is underlined with red curvy line indicating error . You’ll be able to see in the results window a message : The member “Bitmap Effect” is not recognized or not accessible.
Unfortunately Silverlight doesn’t provide any support for Bitmap effect class. This support is available in WPF. I had to find some other way to give my control a unique look. So I Delete the <Path.BitmapEffect> Section from the Xaml. Change the width of the opening <Path> section which is just next to Grid named LayoutRoot . Set the Width to 300 and Height to 102.043 to make my Control Look Like this :
Now I need a drop shadow effect without any help of Bitmap effect class. I’ll try here to get that effect by using a Border. Without going into detail to show you step by step process, here’s the Xaml for you to customize the look of the Border :
<Border Margin="166,186,165,185" Opacity="0.37" CornerRadius="36,36,36,36">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF2C56A1"/>
<GradientStop Color="#FFB5C3F2" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<Border.OpacityMask>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF060F70"/>
<GradientStop Color="#FF071AEC" Offset="1"/>
<GradientStop Color="#FF1042F4" Offset="0.585"/>
</LinearGradientBrush>
</Border.OpacityMask>
</Border>
Now the control should look like this :
You can change this if you don’t like this output. I’ve just played with Blue color keys here of the Background and Opacity Mask. Now open visual Studio play with this design using your own Style or ControlTemplate and have fun.
