#534 – Drawing Shapes with the Shape Tools in Blend

April 11, 2012 Leave a comment

There are three shape tools in the Tools Panel in Blend that will let you draw shapes on your user interface.  They share an icon on the Tools Panel, so you can see them all by clicking and holding the left button down.

These tools allow you to draw the following elements:

  • System.Windows.Shapes.Rectangle
  • System.Windows.Shapes.Ellipse
  • System.Windows.Shapes.Path  (a path with a single line segment)

With a shape tool enabled, you can draw directly on the artboard with your mouse.

	<Canvas>
		<Ellipse Fill="#FFF4F4F5" Height="63" Canvas.Left="84" Stroke="Black" Canvas.Top="119" Width="133"/>
	</Canvas>
Advertisement

Filed under Blend Tagged with , , , , , ,

#521 – Pen and Pencil Tools Both Generate Path Elements

March 23, 2012 Leave a comment

Whether you use the Pen tool or the Pencil tool in Blend, you’re generating a Path element, which just defines a series of line segments or curves.  Using either tool in Blend results in the Data attribute of a Path element being set to a string containing markup that represents individual drawing commands.

In the example below, the first Path was created using the Pen tool, while the second Path was created using the Pencil tool.  Looking at the Path elements in XAML, there’s no information telling you which tool Blend used to create the corresponding XAML.

You can also use the Direct Selection tool on either Path to modify individual points.  The path created using the Pencil tool will typically have more points, since it puts down a series of points as you drag your mouse pointer.

Filed under Blend Tagged with , , , , ,

#520 – Drawing a Path with the Pencil Tool

March 22, 2012 1 Comment

The Pen tool lets you create a new Path element by drawing the path as a series of line segments or connected curves.  You can also create a Path using the Pencil tool, which allows freehand drawing.

To use the Pencil tool, first left-click to select the Pencil on the tools panel.  If the Pen is currently visible, you’ll need to left-click and hold the left mouse button down until you see the popup menu showing the Pencil.

Once you select the Pencil, the cursor will change to look like a pencil and you can draw a freehand path by left-clicking and holding the left mouse button down.

Notice that this tool creates a Path element in XAML, just like the Pen tool.

Filed under Blend Tagged with , , ,

#519 – Adding Points to an Existing Path

March 21, 2012 Leave a comment

You can add points to an existing Path object in Blend by using the Pen tool.

Start by selecting the existing path.  First, click on the Selection tool in the tools panel.  

Then left-click to select the existing path.

Now, click on the Pen tool.  

At this point, you can add points to create a new Path object, or add points to the existing Path.  You’ll notice that if you hover the cursor over the existing path, it changes so that it include a little “+”, rather than an “x”.  The “+” indicates that you can add a point to the path.

If you left-click on the path, you’ll add a new point at this location on the curve.

You can also delete existing points by hovering over them and left-clicking.

Filed under Blend Tagged with , , ,

#518 – Change Points in a Path Using the Direct Selection Tool

March 20, 2012 Leave a comment

You can modify points in an existing Path object in Blend using the Direct Selection tool.

Start by using the Selection tool to select the existing Path.  

Now select the Direct Selection tool  , which then allows you to select individual points in the path.  The path object will change to show each individual points as a little square.

You can now left-click to select individual points on the path.  After selecting a point, you can left-click and drag the point to move it.

You can also adjust the curved segment on either side of the point by left-clicking and dragging the handle on either side of the point.

Finally, you can delete a point entirely by selecting it and pressing the DELETE key.

Filed under Blend Tagged with , , ,

#517 – XAML Output when Drawing with the Pen Tool

March 19, 2012 1 Comment

When you use the Pen tool in Blend to draw a path, Blend will generate a Path element in the corresponding XAML for the window or page.  The data representing the geometry of the actual path is located in the Data attribute of the Path element.

Filed under Blend Tagged with , , ,

#516 – Drawing a Path in Blend with the Pen Tool

March 16, 2012 Leave a comment

You can use the Pen tool in Blend to draw a Path object.  A path is just a series of connected line segments or curves.  You draw a Path by specifying a series of individual points.

To start drawing a Path, first select the Pen tool in the tools panel.

You can now left-click on the artboard to place the first point.  After you click, you’ll see the point rendered as a square blue dot.

Left-click again to place the second point, holding the left mouse button down after you click.  You’ll see a straight line segment appear, but if you drag the mouse while holding down the left button, you can create a curve.

Continue in the same way, adding curves that each connects to the end of the previous curve.

You can leave the Path object open, or click on the original point to close the curve.

Filed under Blend Tagged with , , ,