Inking in WindowsPhone 8 – Part 1

Those who are familiar with Windows 8 will know that the platform gives us an elaborate, clean and easy to use InkManager class which allows you all the stroke manipulation you want.

As a part of my new project I was trying out the Inking features in WP8 only to find that there is no InkManager class at all!!. 😦
MSDN gives a meager list of classes to manipulate and interact with ink in windows phone. A quick search in the vast MSDN territory will give you an InkPresenter element which enables you to display the strokes. This does not fit my needs hence, I started the traditional way, to capture the touch inputs and then display them.

Create a canvas in my MainPage and give a white background image for the it.

</pre>
<Canvas x:Name="InkCanvas2" Height="150" HorizontalAlignment="Left" Width="471" Margin="0" >
<Canvas.Background>
<ImageBrush Stretch="Fill" ImageSource="/Assets/theme_img_note.png"/>
</Canvas.Background>
 </Canvas>
<pre>

Declare MouseMove and MouseLeftButtonDown Event handlers for the canvas in the constructor and define them as follows.

</pre>
void InkCanvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
 {
 currentPoint = e.GetPosition(InkCanvas); // captures the first point
 oldPoint = currentPoint;
 }

void InkCanvas_MouseMove(object sender, MouseEventArgs e)
 {
 currentPoint = e.GetPosition(this.InkCanvas);

Line line = new Line() { X1 = currentPoint.X, Y1 = currentPoint.Y, X2 = oldPoint.X, Y2 = oldPoint.Y };
 line.Stroke = StrokeColorBrush;
 line.StrokeThickness = StrokeWidth;//I have predefined the color and width for the stroke

line.StrokeStartLineCap = PenLineCap.Round; // This gives a round tip to the line
 line.StrokeEndLineCap = PenLineCap.Round;
 line.StrokeLineJoin = PenLineJoin.Round;

this.InkCanvas2.Children.Add(line);
 oldPoint = currentPoint;
 }
<pre>

😀 . The lines need to be optimized, I’m working on that. Hope this helps somebody!

test

Here are few references which I found useful.

  1. .MSDN sample
  2. .Net Speaks
  3. Codeguru

In the next post I’l be explaining how to save these images as PNG in folders.

Happy coding!!! 😀

Advertisements