Share via

Draw a shape or path in your project (Blend for Visual Studio)

  • Article

You can draw shapes, paths, and controls to design the user interface of your application. You can then resize the shape using the on-object handles that appear when you move the pointer over the corners of the blue bounding box of the shape. Items that you draw become objects in your application.

For more information about adding or modifying objects on the artboard, see Add or modify an object (Blend for Visual Studio).

To draw a shape

  1. In the Tools panel, select one of the shape tools: Rectangle JJ155016.81ffc148-cf5c-4faf-bd3f-f38d3073a12c(en-us,VS.110).png or Ellipse JJ155016.8938cfdf-9b75-4a33-bc88-b0636e114a0d(en-us,VS.110).png.

    Tip

    To view all the drawing tools, right-click the tool that is visible in the Tools panel. The Line tool creates a path object, which is covered later in this topic.

    JJ155016.8fbbbb21-be83-4cf6-903b-3a49f00c9860(en-us,VS.110).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:

    JJ155016.b9dabf44-71aa-43cb-b4eb-f020a21b8756(en-us,VS.110).png

    Tip

    Holding down Shift while you drag will keep the height and width the same. Doing this will produce a square when you draw a rectangle, or a circle when you draw an ellipse.

    Tip

    Holding down Alt while 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. Your pointer changes to indicate which action you can perform, as shown in the following figure.

    JJ155016.84261e83-3091-4490-ab58-4218b188439e(en-us,VS.110).png

  3. Save your changes (Ctrl+S).

For more information about how to modify the shape that you just created, see the following topics:

To draw a path

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

    Tip

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

    JJ155016.717956a8-b6a5-4e37-8af3-70bcfc78c82a(en-us,VS.110).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 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 in the Objects and Timeline panel.

    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. Your pointer changes to indicate which action you can perform with the Selection tool JJ155016.2ff91340-477e-4efa-a0f7-af20851e4daa(en-us,VS.110).png.

    JJ155016.69c37d95-ec79-4885-9a63-9d26a596d31c(en-us,VS.110).png

    To modify individual points on the path, click Direct Selection JJ155016.6dd6571f-c116-451d-8dd2-1f88b8406362(en-us,VS.110).png. 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 tool modifier keys (XAML) and Direct Selection tool modifier keys

    JJ155016.1cb49b7a-7490-49af-b966-a719e48d8815(en-us,VS.110).png

  3. Save your changes (Ctrl+S).

For more information about how to modify the path that you just created, see the following topics:

To draw a line

  1. In the Tools panel, select Line JJ155016.eb618397-5283-48be-8396-3449be7b6fbf(en-us,VS.110).png.

    Tip

    If you can't see the Line tool, right-click the tool container in the Tools panel, and then select the Line tool.

    JJ155016.7431f56c-f3fe-4825-b6fb-6dac229422fd(en-us,VS.110).png

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

    Tip

    Holding down Shift while you drag will constrain the line to angles that are multiples of 15 degrees.

    Tip

    Holding down Alt while you drag will make the first point that you click the center point, instead of making the middle of the line the center point.

    After you release the mouse button, translation handles appear for scaling, rotating, moving, skewing, and other actions that you can perform. Your pointer changes to indicate which action you can perform with the Selection tool JJ155016.2ff91340-477e-4efa-a0f7-af20851e4daa(en-us,VS.110).png.

    To modify the starting or ending point of the line, click Direct Selection JJ155016.6dd6571f-c116-451d-8dd2-1f88b8406362(en-us,VS.110).png. 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 tool modifier keys (XAML) and Direct Selection tool modifier keys.

  3. Save your changes (Ctrl+S).

For more information about how to modify the line that you just created, see the following topics: