Drawing in WP7: #2 Drawing shapes with finger

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

by WindowsPhoneGeek

This is the second tutorial from the "Drawing in WP7" series of posts. I am going to demonstrate how to draw shapes with finger 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

For reference take a look at the previois post here: Drawing in WP7: #1 Getting Started and Line Shape

There are lots of different approaches to dynamic drawing with the finger. The simplest one and may be the most commonly used among Silverlight developers is just to use a Canvas  and its MouseMove and MouseLeftButtonDown handlers. The steps are as follows:

1.) Create a Windows Phone 7  application project and add a Cancas into the MainPage.xaml:

<Canvas x:Name="ContentPanelCanvas" />

2).Subscribe to the Canvas MouseMove and MouseLeftButtonDown events:

public MainPage()
{
    InitializeComponent();
    this.ContentPanelCanvas.MouseMove += new MouseEventHandler(ContentPanelCanvas_MouseMove);
    this.ContentPanelCanvas.MouseLeftButtonDown += new MouseButtonEventHandler(ContentPanelCanvas_MouseLeftButtonDown);
}

3.) We will need two Point variables that we represent  the start and current touch points: currentPoint and oldPoint

private Point currentPoint;
private Point oldPoint;

4.)Add the following code into MouseLeftButtonDown :

void ContentPanelCanvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    currentPoint = e.GetPosition(ContentPanelCanvas);
    oldPoint = currentPoint;
}

5). Add the following code into MouseMove handler:

void ContentPanelCanvas_MouseMove(object sender, MouseEventArgs e)
{     
    currentPoint = e.GetPosition(this.ContentPanelCanvas);
    
    Line line = new Line() { X1 = currentPoint.X, Y1 = currentPoint.Y, X2 = oldPoint.X, Y2 = oldPoint.Y };
    line.Stroke = new SolidColorBrush(Colors.Purple);
    line.StrokeThickness = 15;
        
    this.ContentPanelCanvas.Children.Add(line);
    oldPoint = currentPoint;
}

6). That’s it just build and run the sample. Here is the result:

 I hope that this post was helpful.

You can download the full  source code here.

You can also follow us on Twitter @winphonegeek

Comments

Add comment to 'Drawing in WP7: #2 Drawing shapes with finger'

Title Your Name

Comment