Drawing in WP7: #3 Understanding Path shapes

published on: 3/10/2011 | Views: N/A | Tags: Drawing UI

by WindowsPhoneGeek

This is the third tutorial from the "Drawing in WP7" series of posts. I am going to talk about drawing Path shapes in a Windows Phone 7 application.

• Drawing in WP7: #1 Getting Started and Line Shape
• Drawing in WP7: #2 Drawing shapes with finger
• Drawing in WP7: #3 Understanding Path shapes

The Path class enables you to draw curves and complex shapes. These curves and shapes are described by using Geometry objects. To use a Path, you create a Geometry and use it to set the Path object's Data property. There are a variety of Geometry objects to choose from. The LineGeometry, RectangleGeometry, and EllipseGeometry classes describe relatively simple shapes. To create more complex shapes or create curves, use a PathGeometry. For information about creating PathGeometry objects, see Geometries.

Basic Path syntax:

• M represents a move action and moves to the given point from the current point.
• L draws a line from the current point to the specified point.
• H draws a horizontal line from the current point to the specified point towards the x-axis.

• V draws a vertical line from the current point to the specified point towards the y-axis.
• C draws a cubic Bezier curve from the current point to the third point and two points in between are used as the control points.
• S draws a smooth cubic Bezier curve from the current point to the second point and the first point is used as the control point.
• Q draws a quadratic Bezier curve from the first point to the second point and first point is used as the control point.
• T draws a smooth quadratic Bezier curve from the first point to the second point and first point is used as the control point.
• A draws an elliptical arc. It takes five parameters -  Size, IsLargeArc, Rotation Angle, Sweep Direction, and End point.
• Z closes current path by drawing a line from the current point to the starting point.

You can draw a Path either in XAML or code behind. To begin with lets create a sample closing X path:

Define Path in XAML:

<Path Stretch="Fill" Stroke="Green" StrokeThickness="15"  Width="50" Height="50" Data="M0,0 L1,1 M0,1 L1,0" />

Here is the result:

Define Path using Expression Blend:

It seems a little confusing how to determine the correct geometry. Fortunately you can use Expression Blend which enables you to implement even more complex paths using the Visual Designer:

     

Define Path programatically :

If you prefer to define a path in code then you can use something like:

C#:

private void Button_Click(object sender, RoutedEventArgs e)
{
    GeometryGroup geometry = new GeometryGroup();
    LineGeometry lineGeometry1 = new LineGeometry();
    lineGeometry1.StartPoint = new Point(0, 0);
    lineGeometry1.EndPoint = new Point(1, 1);
    
    LineGeometry lineGeometry2 = new LineGeometry();
    lineGeometry2.StartPoint = new Point(0, 1);
    lineGeometry2.EndPoint = new Point(1, 0);

    geometry.Children.Add(lineGeometry1);
    geometry.Children.Add(lineGeometry2);

    Path path = new Path();
    path.Stroke = new SolidColorBrush(Colors.Green);
    path.Stretch = Stretch.Fill;
    path.StrokeThickness = 15.0;
    path.Height = 50;
    path.Width = 50;
    path.Data = geometry;

    this.ContentPanel.Children.Add(path);
}

Here is the result:

 I hope that this post was helpful.

You can also follow us on Twitter @winphonegeek

Comments

Add comment to 'Drawing in WP7: #3 Understanding Path shapes'

Title Your Name

Comment