Export (0) Print
Expand All
0 out of 3 rated this helpful - Rate this topic

Draw a shape or path in your Silverlight 2 project

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.

  1. In the Toolbox, select one of the shape tools: Rectangle Dd185502.81ffc148-cf5c-4faf-bd3f-f38d3073a12c(en-us,Expression.10).png or Ellipse Dd185502.8938cfdf-9b75-4a33-bc88-b0636e114a0d(en-us,Expression.10).png.

    Dd185502.alert_tip(en-us,Expression.10).gifTip:

    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.

    Dd185502.8fbbbb21-be83-4cf6-903b-3a49f00c9860(en-us,Expression.10).png

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

    Dd185502.b9dabf44-71aa-43cb-b4eb-f020a21b8756(en-us,Expression.10).png
    Dd185502.alert_tip(en-us,Expression.10).gifTip:

    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.

    Dd185502.alert_tip(en-us,Expression.10).gifTip:

    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.

    Dd185502.84261e83-3091-4490-ab58-4218b188439e(en-us,Expression.10).png
  3. Save your changes (CTRL+S).

Next steps

  1. In the Toolbox, select one of the path tools: Pen Dd185502.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(en-us,Expression.10).png or Pencil Dd185502.509dc167-734f-46c9-b012-987ee63450cd(en-us,Expression.10).png.

    Dd185502.alert_tip(en-us,Expression.10).gifTip:

    To view all the path tools, right-click the tool that is visible in the Toolbox.

    Dd185502.717956a8-b6a5-4e37-8af3-70bcfc78c82a(en-us,Expression.10).png

  2. 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 Dd185502.2ff91340-477e-4efa-a0f7-af20851e4daa(en-us,Expression.10).png tool.

    Dd185502.69c37d95-ec79-4885-9a63-9d26a596d31c(en-us,Expression.10).png

    To modify individual points on the path, click the Direct Selection 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.

    Dd185502.1cb49b7a-7490-49af-b966-a719e48d8815(en-us,Expression.10).png
  3. Save your changes (CTRL+S).

Next steps

  1. In the Toolbox, select the Line Dd185502.eb618397-5283-48be-8396-3449be7b6fbf(en-us,Expression.10).png tool.

    Dd185502.alert_tip(en-us,Expression.10).gifTip:

    If you cannot see the Line tool, right-click the tool container in the Toolbox, and then select the Line tool.

    Dd185502.7431f56c-f3fe-4825-b6fb-6dac229422fd(en-us,Expression.10).png

  2. On the artboard, draw the line by dragging with your mouse.

    Dd185502.alert_tip(en-us,Expression.10).gifTip:

    Holding SHIFT when you drag will constrain the line to angles that are multiples of 15 degrees.

    Dd185502.alert_tip(en-us,Expression.10).gifTip:

    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 Dd185502.2ff91340-477e-4efa-a0f7-af20851e4daa(en-us,Expression.10).png tool.

    To modify the starting or ending point of the line, click the Direct Selection Dd185502.6dd6571f-c116-451d-8dd2-1f88b8406362(en-us,Expression.10).png 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.

  3. Save your changes (CTRL+S).

Next steps

Did you find this helpful?
(1500 characters remaining)
Thank you for your feedback

Community Additions

ADD
Show:
© 2014 Microsoft. All rights reserved.