Expression Design 101

Posted on March 2, 2011


Expression Design is a raster and vector graphics design tool.  Raster graphics pertain to bitmaps or those represented by pixels.  Vector graphics uses formulas to represent images and as such, do not pixelate when magnified.  An example of a raster graphics design tool is Paint.

As you can see, the graphics in Expression Design since it is represented by formula. We can find that formula in the XAML file which is automatically generated when we create elements.

When we create paths, we can apply strokes to them.  Notice that the stroke follows the direction of the path.  We can also make custom strokes using elements created in Expression Design, or import images to create an Image Stroke.  Also, we can attach text to a path, and the text will still follow the path whenever we modify it.  The dash feature is also cool.  All I have to do is input a string of numbers, and it will actually follow the pattern depending on the string I input.

Some of the tools have white triangles on the lower right portion which means you can right click it to access more tools.  For example, the fourth button has Rectangle, Ellipse, Polygon, and Line.  We can modify elements using the properties panel.  For the color, we can use preselected colors, use the color palette, input the RGB values, or, if you memorize hex values, input the hexadecimal value of the color we want.  It also recognizes standard colors like maroon, or in this case, fuchsia.  Just make sure you spell the color correctly. 🙂

Expression Design also have layers so that it would be easier to manage the element we create.  Each layer is represented by different colors which the element’s path follow.  We can change the visibility by clicking on the Toggle Visibility icon, and lock by clicking the Toggle Lock icon.  When a layer or an element is locked, it can’t be clicked.  Also, layers and elements can be renamed by double clicking on their name in the Layers panel.  We can also preview a layer or an element by hovering on its name in the Layer panel.

Expression Design is part of Expression Studio.  It is available in MSDNAA as well as DreamSpark.  You can also get the free trial version here.