Drawing overview

Microsoft Expression Blend offers standard vector drawing capabilities so that you can draw shapes, paths, and masks just as you would in any vector graphics program. For more advanced drawings and artwork, consider using an alternative vector graphic program such as Microsoft Expression Design 2. Expression Design 2 even lets users export drawings as XAML for use in Expression Blend.

What are vector graphics

Vector graphics are defined geometrically by points, lines, curves, and surfaces, instead of using pixels as in a bitmap. As monitors for computers incorporate higher resolution displays, there is a need to move away from bitmaps, which show large pixels when viewed at a high resolution. The resizing of bitmaps can be awkward, and they generally lead to poor-quality graphics. Vector graphics remain smooth when viewed at a high resolution, and remain sharp when resized larger. For this reason, vector graphics are easier to customize around content, because you do not have to create multiple images at different sizes—for example, icon files that appear in the user interface (UI) at various sizes. Other benefits of vector graphics include the following:

• True content scaling   Vector graphics built into flexible layout can resize elegantly based on content. For example, when you add text to a button, the button will resize accordingly without compromising the fidelity of the graphic.

• Resolution independence   The resolution of displays has been gradually increasing and will likely continue to do so. Without the ability to scale an application's UI, the UI just becomes smaller as the resolution increases, typically becoming unusable when the content appears so small that it becomes unreadable. If you apply a scaling or rotation transform with these APIs, it affects only the drawings. There is no effect on the sizes and positions of controls in the window. You can scale drawings, but you can't easily scale the way that a window's space is carved up by controls. Because Windows Presentation Foundation (WPF) composes all the controls in the window as a single drawing, instead of segregating each control to its own region, it is easy to apply scaling or rotation transformations to the UI as a whole. Thus, because you can scale any WPF UI up or down, WPF applications are effectively resolution-independent. Images remain sharp and clear, instead of the blur you would expect from simple bitmap scaling.

Note

When setting size-related properties in WPF applications (such as those created by using Expression Blend), pixels refer to device-independent pixels or device-independent units that are equivalent to the size of a pixel on a monitor when it is set to a screen resolution of 96 DPI. Each unit is approximately 1/96 inch, regardless of monitor size or screen resolution.

In Expression Blend, a vector object can be as simple as a line or shape, or as complex as a path or control. Objects can be modified in many ways by using on-object handles for resizing, moving, rotating, flipping, or skewing objects, or using the Properties panel where you can enter precise values for size, position, and rotation. Basically, every object you draw onto the artboard is in vector format except for those items that you've added to your project that weren't originally in vector format, such as images and 3D textures. Some of the vector objects in Expression Blend include the following:

• Drawing objects such as an ellipse and rectangle

• Path objects such as lines and curves

• Text

• 3D objects

• Controls

Back to top

Drawing tools

In the Toolbox, you'll find common vector tools for creating shape and path elements, and for manipulating objects. For examples of using these tools, see Draw a shape, Draw a straight line, Draw a curve, Draw a freeform path, Change the shape of a curve, and Redefine control handles for a point on a path.

Tool		Use to
	Rectangle	Draw rectangles and squares, which you can also modify to have rounded corners.
	Ellipse	Draw ellipses and circles.
	Line	Draw a straight line between two points.
	Pen	Draw and modify paths where you define each node. The Pen tool lets you add, remove, and modify nodes in the path.
	Pencil	Draw freehand paths.
	Selection	Select shapes, paths, and objects on the artboard that you want to modify. For more information about how to use the Selection tool, see Select or cancel the selection of objects.
	Direct Selection	Select individual nodes on a path after they have been drawn. The Direct Selection tool also enables you to directly select child objects nested inside a parent object on the artboard, such as a layout panel. For more information about how to use the Direct Selection tool, see Select or cancel the selection of objects.

Back to top

Shape or a path?

Shapes such as a rectangle or ellipse are vector objects. You draw shapes with the Rectangle  or Ellipse tools.

Paths are also vector objects, which are arguably the most flexible vector objects in Expression Blend. Paths are a series of connected lines and curves. After you draw paths onto the artboard, you can reshape, combine, and otherwise modify them to create any vector shape. You can draw polygons, which are closed shapes consisting of straight, connected lines, in addition to polylines, which are unclosed paths consisting of straight, connected lines. You draw paths with the Pen , Pencil , and Line  tools. You can then use the Selection  and Direct Selection  tools for modifying paths. For more information about how to modify paths, see Delete part of a path, Add or remove a point on a path, Change the shape of a curve, Redefine control handles for a point on a path, and Pen and direct selection usage.

Back to top

Converting shapes to paths

Shapes cannot be edited the same way as path elements unless you convert the shape element to a path element by using the Convert to Path command (on the Object menu, select Path and then Convert to Path). For an example, see Convert a shape to a path.

Note

You will not be able to change properties that are specific to a shape (such as the corner radius of a rectangle) after converting the shape to a path. Also, if a style was applied to the shape before conversion, the properties of the converted path will be reset to the defaults for a path (no fill brush, and a black stroke).

Back to top

Changing the corner radius

You can modify the corner radius of a rectangle by selecting the rectangle and then dragging the corner radius handles on the upper-left corner. The corner radius handle appears when your mouse pointer moves over either end of the dotted lines that jut out from the upper-left corner of the rectangle.

By holding down SHIFT when you drag either corner radius handle, you can modify the X and Y corner radii individually.

For an example, see Round the corners of a rectangle.

Back to top

Combining paths

Combining paths (or shapes) can give you the following results:

	Two shapes before combining		Intersect
	Unite		Exclude Overlap
	Divide		Subtract

You can combine two or more objects (paths or shapes) into one path object. The resulting path object replaces the last object that was selected before combining, adopting that object's properties. Often, the result is a compound path. For an example, see Combine shapes or paths. For more information about how to modify paths, see Pen and direct selection usage.

Note

You will not be able to change properties that are specific to a shape (such as the corner radius of a rectangle) after combining. Also, if a style was applied to the last selected object before conversion, the properties of the combined path will be reset to the defaults for a path (no fill brush, and a black stroke).

Back to top

Compound paths

When you create a compound path, any intersecting parts of the paths are subtracted from the result and the resulting path takes on the visual properties of the bottommost path.

Two paths converted to a compound path

Shapes must be converted to paths before you include them in a compound path (select Convert to Path under Path on the Object menu). You can make two or more paths into one compound path. The resulting path replaces the bottommost path (in Z-order) that was selected before compounding, adopting that path's properties. You can break apart a compound path any time after you create it, but the original properties will not be restored. For an example, see Make or release a compound path.

Back to top

Clipping paths

A clipping path is a path or shape that is applied to another object, hiding the parts of the masked object that fall outside the clipping path.

Image object with a clipping path applied to it

In Expression Blend 2, you can now modify clipping paths on the artboard after you create them, and you can release a clipping path without losing the original path object. For an example, see Apply, modify, or remove a clipping path. You can also animate the individual vertices of clipping paths—for example, to gradually expose the masked object. For an example, see Animate the points on a path or clipping path.

Back to top

Opacity masks

An opacity mask can be a path or shape that is applied to another object. The transparent parts of the path represent areas where the masked object is faded out, whereas the opaque parts of the mask indicate where the masked object is allowed to show through. Any object can have an opacity mask defined for it through the Appearance section of the Properties panel.

An opacity mask can be a simple gradient brush that shows or hides parts of an object based on transparency. In the following example, the image on the left has no opacity mask applied, and the image on the right could be produced in one of the following two ways:

• The OpacityMask property of the Image object could be set to a radial gradient brush with the Alpha of the right gradient stop set to a value of 0.

• A Rectangle object could be created in front of the Image object, and the OpacityMask property of the Rectangle could be set to a radial gradient brush with the Alpha of the left gradient stop set to a value of 0.

Image with no mask (left) versus an image with an opacity mask applied (right)

For an example, see Create an opacity mask.

Back to top