Silverlight 2 + Ink : Freedom of Drawing on Web !

Almost 8-9 months ago, I wrote article on Ink Presenter in Silverlight, After that I got many mails after many people tried out to recreate same demo in Silverlight 2, unfortunately it was broken since I wrote that for Silverlight 1.1. We all know how we spend first few weeks after release of Silverlight 2 RTW by spending and fixing our old applications and reading that “Breaking Changes” document all the time. Well, for this Ink Presenter, whatever I explained in my old article remains same, so I am just now re-writing it in Silverlight 2 with 1-2 new things to make you all comfortable in developing Ink based Silverlight applications.

Unfortunately, despite of spending lot of time and referring with few WPF dll files, still I am not able to recognize the Ink which is very simple to implement in WPF due to presence of InkAnalyzer( )

Remember..all you need is System.Windows.Ink

Basic Layout in XAML :

[ I kept UserControl’s Width="500" Height="350" ]

<Grid x:Name="LayoutRoot" Background="White">        

<InkPresenter Width="500" x:Name="inkP" Background="Pink"  />

<Button Height="37" HorizontalAlignment="Left" VerticalAlignment="Bottom" Width="70" Margin="23,0,0,32" x:Name="btnClear" Content="Clear" Click="btnClear_Click"/>
<Button Height="37" HorizontalAlignment="Left" VerticalAlignment="Bottom" Width="73" Content="Blue" Margin="130,0,0,32" x:Name="btnBlue" Click="btnBlue_Click"/>
<Button HorizontalAlignment="Right" VerticalAlignment="Bottom" Content="Red" Margin="0,0,159,32" Height="37" Width="74" x:Name="btnRed" Click="btnRed_Click"/>
<Button Height="37" HorizontalAlignment="Right" VerticalAlignment="Bottom" Width="75" Content="Green" Margin="0,0,26,32" x:Name="btnGreen" Click="btnGreen_Click"/>

</Grid>

C# Code :

using System.Windows;
using System.Windows.Controls;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;

namespace SL_InkPresenter
{
public partial class Page : UserControl
{
     Stroke s;
     int mycol = 0;

public Page()
{
     InitializeComponent();
     inkP.MouseMove += new MouseEventHandler(inkP_MouseMove);
     inkP.MouseLeftButtonDown += new MouseButtonEventHandler(inkP_MouseLeftButtonDown);
     inkP.MouseLeftButtonUp += new MouseButtonEventHandler(inkP_MouseLeftButtonUp);
}

void inkP_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
    s = null;
}

void inkP_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    inkP.Cursor = Cursors.Stylus;
    inkP.CaptureMouse();
    s = new Stroke();
    s.StylusPoints.Add(e.StylusDevice.GetStylusPoints(inkP));
    switch (mycol)
      {
           case 0: s.DrawingAttributes.Color = Colors.Black;
           break;
           case 1: s.DrawingAttributes.Color = Colors.Blue;
           break;
           case 2: s.DrawingAttributes.Color = Colors.Red;
           break;
           case 3: s.DrawingAttributes.Color = Colors.Green;
           break;
     }          
     inkP.Strokes.Add(s);
}

void inkP_MouseMove(object sender, MouseEventArgs e)
{
    if (s != null)
   {
         inkP.Cursor = Cursors.Stylus;
         s.StylusPoints.Add(e.StylusDevice.GetStylusPoints(inkP));
    }
}

private void btnClear_Click(object sender, RoutedEventArgs e)
{
    inkP.Strokes.Clear();
    mycol = 0;
}

private void btnBlue_Click(object sender, RoutedEventArgs e)
{
       mycol = 1;
}

private void btnRed_Click(object sender, RoutedEventArgs e)
{
      mycol = 2;
}

private void btnGreen_Click(object sender, RoutedEventArgs e)
{
     mycol = 3;
}       
}
}

Note : I have use that “Switch..Case” for demo purpose, doesn’t mean you should write those many cases for each color, you can implement your own login which will give you best result. I have restricted myself here with only 2-3 colors, so I am making use of Switch.

And output will be like this :

For adding more Jazz to it, you can implement Outer color of brush and can have some height and width to your stroke so as to get different widths of brush which will give different strokes, like we have in calligraphy.

For Outer Color to your Stroke :

s.DrawingAttributes.OutlineColor = Colors.Cyan;

For Different Width and Height of Stroke :

s.DrawingAttributes.Width = 10;
s.DrawingAttributes.Height = 5;

For Various Cursors :

inkP.Cursor = Cursors.Eraser;

Here we obtain Cursors from "System.Windows.Input.Cursors" which will give you various Cursors to display. If you implement above, output may look like following :

Hope this will now work for you in Silverlight 2, instead of wasting time in fixing old code which I have done using Silverlight 1.1, Soon I will put more stuff which I have explore recently about Ink.

At ending note, the major breakup was :

In Silverlight 1.1 it was :

s.StylusPoints.AddStylusPoints(e.GetStylusPoints(inkP));

In Silverlight 2.0 RTW is now :

s.StylusPoints.Add(e.StylusDevice.GetStylusPoints(inkP));

One more thing, For clearing the drawing I have use :

inkP.Strokes.Clear();

Practically speaking, there are two ways to clear drawing, The one I shown here clears all the ink, other approach is to Erase Ink point by point like we have eraser in our normal MS paint. I am going to cover remaining approach and with many more new things in my future article.

As usual, looking ahead for your suggestions and valuable feedback.

Vikram.