Drawing Editor in Windows Phone 7

Introduction

In this article we will create a customized drawing application in Windows Phone. Actually we just provide a drawing editor like Paint but with less functionality. Using this editor the user is able to create their own design as the user desires. To create this editor in design page we use a canvas control with a light gray background and use two mouse events Mouse_Move and Mouse_LeftButtonDown to provide the action. The types of classes and controls used in this application is given below.

Canvas Control- Gives a customized look and feel of the editor of drawing applications.

Line Class- This class provides the ability to create a design in the editor with the help of SolidColorBrush class.

Mouse Events- We will use mouse events for actions in the application.

Step 1 : Open Visual Studio.

Select new -> project
Select your preferred language
Select Silverlight for Windows Phone application
Name the project
Now name the project "WindowsPhoneApplication"

Step 2 : In the design page we will use a canvas control and a textblock control to customize the control as shown below.

Code

</Grid>

Step 3 : The whole code of the MainPage.xaml page is:

Code

<phone:PhoneApplicationPage

x:Class="PhoneApp9.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"

FontFamily="{StaticResource PhoneFontFamilyNormal}"

FontSize="{StaticResource PhoneFontSizeNormal}"

Foreground="{StaticResource PhoneForegroundBrush}"

SupportedOrientations="Portrait" Orientation="Portrait"

shell:SystemTray.IsVisible="True">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

</StackPanel>

</Grid>

</phone:PhoneApplicationPage>

At design time the application looks like:

Step 4 : Now we will go to the code behind file of the MainPage.xaml page to write the code for Mouse events.

Code

private 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.Red);

line.StrokeThickness = 15;

this.ContentPanelCanvas.Children.Add(line);

oldPoint = currentPoint;

}

private void ContentPanelCanvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

currentPoint = e.GetPosition(ContentPanelCanvas);

oldPoint = currentPoint;

}

Step 5 : The final source code of the MainPage.xaml.cs file is:

Code

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using Microsoft.Phone.Controls;

namespace PhoneApp9

{

public partial class MainPage : PhoneApplicationPage

{

private Point currentPoint;

private Point oldPoint;

// Constructor

public MainPage()

{

InitializeComponent();

}

private 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.Red);

line.StrokeThickness = 15;

this.ContentPanelCanvas.Children.Add(line);

oldPoint = currentPoint;

}

private void ContentPanelCanvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

currentPoint = e.GetPosition(ContentPanelCanvas);

oldPoint = currentPoint;

}

Step 6 : Press F5 to run the application.

Output

After running the application, it will open like:

Hold down the left mouse button and create your own design as you want:

Resources

System Tray ProgressIndicator in Windows Phone 7.5 / Mango phone
Working With Various Phone Tasks in Windows Phone 7
Page Stack in Windows Phone
Code to select photo on Windows Phone 7