Draw a shape or path in your Silverlight 2 project
.png "This page applies to Silverlight 2 projects only")
All Windows Presentation Foundation drawing tools and features are available to Silverlight 2 projects in Microsoft Expression Blend 2 with Service Pack 1 installed. You can draw shapes, paths, and controls to design the user interface of your Silverlight 2 application. Items that you draw become objects in your application.
To draw a shape
In the Toolbox, select one of the shape tools: Rectangle
.png "Dd185502.81ffc148-cf5c-4faf-bd3f-f38d3073a12c(en-us,Expression.10).png")
or Ellipse .png "Dd185502.8938cfdf-9b75-4a33-bc88-b0636e114a0d(en-us,Expression.10).png")
.Tip
To view all the drawing tools, right-click the tool that is visible in the Toolbox. The Line tool creates a path object, which is covered later in this topic.
.png "Dd185502.8fbbbb21-be83-4cf6-903b-3a49f00c9860(en-us,Expression.10).png")
On the artboard, draw the shape by dragging with your mouse.
Notice that, as you draw the shape, the width and height dimensions appear as follows:
.png "Dd185502.b9dabf44-71aa-43cb-b4eb-f020a21b8756(en-us,Expression.10).png")
Tip
Holding SHIFT when you drag will keep the height and width the same. Doing so will produce a square when you draw a rectangle, or produce a perfect circle when you draw an ellipse.
Tip
Holding ALT when you drag will put the center point at the first point where you click, instead of making the top-left corner of the shape the first point that you click.
After you release the mouse button, translation handles appear for scaling, rotating, moving, skewing, and other actions that you can perform on the shape object. The mouse pointer changes to indicate which action you can do, shown as follows.
.png "Dd185502.84261e83-3091-4490-ab58-4218b188439e(en-us,Expression.10).png")
Save your changes (CTRL+S).
Next steps
To draw a path
In the Toolbox, select one of the path tools: Pen
.png "Dd185502.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(en-us,Expression.10).png")
or Pencil .png "Dd185502.509dc167-734f-46c9-b012-987ee63450cd(en-us,Expression.10).png")
.Tip
To view all the path tools, right-click the tool that is visible in the Toolbox.
.png "Dd185502.717956a8-b6a5-4e37-8af3-70bcfc78c82a(en-us,Expression.10).png")
On the artboard, draw a path by doing one of the following:
With the Pencil tool, drag on the artboard to produce a pixel everywhere that your mouse pointer touches.
With the Pen tool, click the artboard to produce points (or vertices) that will make up a path object. Optionally, drag to produce curves at each point. To close the path, click the first point. To exit the Pen tool without closing the path, select another tool or select an object under Objects and Timeline.
After you finish drawing the path, translation handles appear for scaling, rotating, moving, skewing, and other actions that you can perform on the path object. The mouse pointer changes to indicate which action you can do with the Selection
.png "Dd185502.2ff91340-477e-4efa-a0f7-af20851e4daa(en-us,Expression.10).png")
tool..png "Dd185502.69c37d95-ec79-4885-9a63-9d26a596d31c(en-us,Expression.10).png")
To modify individual points on the path, click the Direct Selection
.png "Dd185502.6dd6571f-c116-451d-8dd2-1f88b8406362(en-us,Expression.10).png")
tool. The path object displays individual points and line segments that you can click and move. For a list of ways to modify paths, see Pen and direct selection usage..png "Dd185502.1cb49b7a-7490-49af-b966-a719e48d8815(en-us,Expression.10).png")
Save your changes (CTRL+S).
Next steps
To draw a line
In the Toolbox, select the Line
.png "Dd185502.eb618397-5283-48be-8396-3449be7b6fbf(en-us,Expression.10).png")
tool.Tip
If you cannot see the Line tool, right-click the tool container in the Toolbox, and then select the Line tool.
.png "Dd185502.7431f56c-f3fe-4825-b6fb-6dac229422fd(en-us,Expression.10).png")
On the artboard, draw the line by dragging with your mouse.
Tip
Holding SHIFT when you drag will constrain the line to angles that are multiples of 15 degrees.
Tip
Holding ALT when you drag will put the center point at the first point where you click, instead of making the starting point the first point that you click.
After you release the mouse button, translation handles appear for scaling, rotating, moving, skewing, and other actions that you can perform. The mouse pointer changes to indicate which action you can do with the Selection
tool.To modify the starting or ending point of the line, click the Direct Selection
tool. The line, which is a path object, displays individual points that you can click and move. For a list of ways to modify paths, see Pen and direct selection usage.Save your changes (CTRL+S).