Drawing pad for Windows Phone 8.1

Many had asked on how do we create a drawing pad for Windows Phone 8.1. It is very simple, in fact the code to get it done is exactly the same as that for Windows 8.1

In the xaml, you would requires a canvas and a rectangle. The canvas is transparent in nature and therefore the rectangle acts as a background for the canvas and thus you would set the color of the canvas that you like via the rectangle.



 <Canvas x:Name="inkCanvas" >
 <TextBlock Text="InkPresenter Control" FontWeight="Bold" Margin="50,30,0,0" />
 <Rectangle x:Name="rect" VerticalAlignment="Top" Height="102" Width="300" Margin="10,20,10,0" Fill="#FFF4F4F5" Stroke="Black" />
 </Canvas>

For the codebehind, you would need to declare a Path which would added to the children of canvas when the there is a touch on a canvas.


public MainPage()
 {
 this.InitializeComponent();

 inkCanvas.PointerPressed += inkCanvas_PointerPressed;
 inkCanvas.PointerMoved += inkCanvas_PointerMoved;
 inkCanvas.PointerReleased += inkCanvas_PointerReleased;
 inkCanvas.PointerExited += inkCanvas_PointerReleased;
 }

Windows.UI.Xaml.Shapes.Path _Current;
  void inkCanvas_PointerReleased(object sender, PointerRoutedEventArgs e)
 {
 _Current = null;
 }

 void inkCanvas_PointerMoved(object sender, PointerRoutedEventArgs e)
 {
 var pointer = e.GetCurrentPoint(inkCanvas);
 if (!pointer.Properties.IsLeftButtonPressed || _Current == null)
 return;
 var segments = (_Current.Data as PathGeometry).Figures.First().Segments.First() as PolyLineSegment;
 segments.Points.Add(pointer.Position);
 }

 void inkCanvas_PointerPressed(object sender, PointerRoutedEventArgs e)
 {
 var pointer = e.GetCurrentPoint(inkCanvas);
 if (!pointer.Properties.IsLeftButtonPressed)
 return;

 _Current = new Windows.UI.Xaml.Shapes.Path
 {
 Data = new PathGeometry
 {
 Figures = {
 new PathFigure { StartPoint = pointer.Position, 
 Segments = { new PolyLineSegment() } } }
 },
 Stroke = new SolidColorBrush(Colors.Black),
 StrokeThickness = 4d,
 };

 inkCanvas.Children.Add(_Current);
 }

To clear the canvas, you would simply need to clear the children of the canvas and re-add the rectangle.


inkCanvas.Children.Clear();
inkCanvas.Children.Add(rect);

Credit for the C# code for the Windows 8.1 version

Advertisements
This entry was posted in C#, Windows Phone, winrt and tagged , , . Bookmark the permalink.

3 Responses to Drawing pad for Windows Phone 8.1

  1. Vaibhav says:

    Thank you for above code ,what I was exactly looking for.
    But I want something extra I mean how to store that drawing into an image format(.JPG or .JPEG) in computer on button click event or in windows phone emulator(may be).I got solutions but they were for WPF and I am using Universal Apps(VS2013)

    Liked by 1 person

  2. Pingback: Saving UI element as jpeg for Windows Phone 8.1 | TechCentral

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s