#808 – How Shape Elements Are Positioned within a Canvas

April 29, 2013 2 Comments

The different Shape elements (e.g. Ellipse, Line, Path, Polygon, Polyline or Rectangle) describe a shape to be drawn using an X,Y coordinate system, with X increasing from left to right and Y increasing from top to bottom.

When you add Shape elements to a Canvas, the coordinates specified for the elements are used to determine the element’s position within the coordinate space of the Canvas.  For example, a point in a shape at (0,0) would be located in the upper left corner of the Canvas.

    <Canvas Margin="10" Background="AliceBlue">
        <Polygon Points="10,10 60,60 60,100 140,80 120,40"
                 Stroke="DarkViolet" StrokeThickness="2"/>
    </Canvas>

808-001
If you set any of attached properties for positioning with the Canvas (Left, Top, Right, Bottom), these properties will be used to offset the entire shape, relative to one (or more) of the sides of the canvas.

    <Canvas Margin="10" Background="AliceBlue">
        <Polygon Canvas.Left="50" Canvas.Bottom="0"
                 Points="10,10 60,60 60,100 140,80 120,40"
                 Stroke="DarkViolet" StrokeThickness="2"/>
    </Canvas>

808-003

Advertisement

Filed under Layout Tagged with , , ,

#535 – Drawing Symmetrical Shapes in Blend

April 12, 2012 Leave a comment

Using the Shape Tool in Blend, you can draw a Rectangle, Ellipse or Line by left-clicking and dragging with the mouse.

If you hold the Shift key down while dragging with the mouse, you will be constrained to drawing symmetrical shapes–squares (symmetrical rectangle) or circles (symmetrical ellipse).

If you hold the Shift key down while drawing a Line, you’ll be limited to drawing lines at multiples of 15 degrees.  This makes it easier to draw lines at common angles.

If you hold down the ALT key while drawing any of these shapes, your starting mouse position will be used as the center point of the shape, rather than one corner.

Filed under Blend Tagged with , , , , ,

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

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

#237 – Drawing Shapes with the Shape Subclasses

March 6, 2011 1 Comment

You can include various geometric shapes directly in a WPF GUI using subclasses of the Shape class.  Since Shape derives from FrameworkElement, you can insert instances of the Shape subclasses directly into a Panel container.

The various shapes that you can draw are:

  • Ellipse – Draw an ellipse
  • Line – Draw a line segment
  • Path – Draw an arbitrary geometry consisting of a series of line segments
  • Polygon – Draw a closed polygon
  • Polyline – Draw a polyline–a series of connected line segments
  • Rectangle – Draw a rectangle

Here’s a simple example in XAML that demonstrates the various shapes.

		<Ellipse Height="100" Width="180" Fill="Blue" Stroke="Black" StrokeThickness="2"/>
		<Line X1="0" X2="180" Y1="20" Y2="80" Stroke="Brown" StrokeThickness="2"/>
		<Path Data="M 50,10 L 100,80 L 30,90 L 60,70 Z M 40,20 L 20,40 L 30,60" Stroke="DarkGreen" StrokeThickness="2"/>
		<Polygon Points="20,20 60,60 60,100 140,80 120,40" Stroke="DarkViolet" StrokeThickness="2"/>
		<Polyline Points="20,20 60,60 60,100 140,80 120,40" Stroke="DarkViolet" StrokeThickness="2"/>
		<Rectangle Height="100" Width="180" Stroke="Crimson" StrokeThickness="2"/>

Here’s how these shapes look when rendered:

Filed under Graphics Tagged with , ,