Drawing shapes and paths

Blend for Visual Studio 2012 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. Expression Design even lets users export drawings as XAML for use in Blend.

For more information, see Import XAML that is exported from Expression Design.

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 a 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 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 becoming the blur you would expect from simple bitmap scaling.

[!メモ]

When setting size-related properties in WPF applications (such as those created by using 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 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 by 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 Blend include the following:

• Drawing objects such as ellipses and rectangles.

• Path objects such as lines and curves.

• Text.

• 3D objects.

• Controls.

Drawing tools

In the Tools panel, you'll find common vector tools for creating shape and path elements, and for manipulating objects.

For examples of using these tools, see the following topics:

• Draw a shape or path in your project

• Draw a straight line

• Draw a curve

• Draw a free-form path

• Change the shape of a curve

• Redefine control handles for a point on a path.

Tool	Name	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. You can also use the Direct Selection tool 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.

Shapes and paths

Shapes, such as rectangles and ellipses, are vector objects. You draw shapes with the Rectangle tool  or the Ellipse tool .

Paths, which are also vector objects, are arguably the most flexible vector objects in 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 tool , the Pencil tool , and the Line tool . You can then use the Selection tool  and the Direct Selection tool  for modifying paths.

For more information about how to modify paths, see the following topics:

• 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

• Direct Selection tool modifier keys (Blend)

• Pen tool modifier keys (Blend)

Converting shapes to paths

Shape objects cannot be edited the same way as path objects unless you convert the shape object to a path object by using the Convert to Path command (on the Object menu, click Path, and then click Convert to Path).

For an example, see Change the shape of a curve.

[!メモ]

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).

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 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.

Combining paths

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

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 the properties of that object. Often, the result is a compound path.

For an example, see Combine shapes or paths.

For more information about how to modify paths, see Direct Selection tool modifier keys (Blend) and Pen tool modifier keys (Blend).

[!メモ]

You will not be able to change properties that are specific to a shape (such as the corner radius of a rectangle) after combining that shape with another object. 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).

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 the properties of that path. 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.

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 Blend, you can 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.

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.