Ink Presenter using Microsoft Silverlight

Hello Everyone !!

After a long gap...office work and all..I am back again.

Here is the sample Silverlight demo, which will be like paintbrush kind of thing.

This will surely give vision to all developers who are planning to do some programming on Silverlight.

Demo is created using following Tools.

1. Windows Vista (OS)

2. Visual Studio 2008 (Beta 2)

3. Silverlight SDK 1.1

Initial Setup : First you need to install Visual Studio 2008 (Beta 2) . You can download it from Microsoft Web site. Then you need to install Silverlight SDK 1.1, Once you installed Silverlight SDK . You can see that a Template will get placed in New Project section of Visual Studio as shown below.

Once you create a Silverlight Project with appropriate name and location, You can see the Silverlight Project structure in Solution Explorer of Visual Studio. It contents “Silverlight.js” file which is responsible to Run any silverlight application. First job of Silverlight.js is to check whether the current system is capable of running silverlight application or not. If Silverlight support is not there for current system then appropriate error will be hand

led by this file.

You can see the initialization of Silverlight in javascript function named as “function createSilverlight()” which resides in your Test.html.js file, This function get called from

tag in Test.html Page.

<div id="SilverlightControlHost" class="silverlightHost" >

<script type="text/javascript">

createSilverlight();

script> div>

And reference is get crated in Header tag as

<script type="text/javascript" src="Silverlight.js">script>

<script type="text/javascript" src="TestPage.html.js">script>

This is how the first initialization of Silverlight is done.

Ink Presenter :

This demo will show how to implement the simple Ink Presenter feature using Silverlight.For this one need to add Ink Presenter in Page.xaml as follows.

<InkPresenter Height ="600" Width ="600" Background ="Pink"

x:Name="inkP" />

Once you placed Ink Presneter inside xaml file. Then rest of the coding is need to be done from code behind, because one need to handle mouse events which will be better handled from code behind, either C# or VB.NET

For that once should first need to go at Page.xaml.cs file.Then first we need to create object of Stroke class which will help us to draw free hand on web page.Create object “s” for Stroke class as shown below.

namespace MySilverlightInkDemo

{

public partial class Page : Canvas

{

Stroke s;

public void Page_Loaded(object o, EventArgs e)

{

// Required to initialize variables

Point to be noted here that you can see the namespace get consumed here is

System.Windows.Ink. Syntax is

using System.Windows.Ink;

After this,First job is to generate event to draw free han

d lines using Ink.So we need to handle mouse events. For this we will add event handler inside Page_Loaded event as shown below.

public partial class Page : Canvas

{

Stroke s;

public void Page_Loaded(object o, EventArgs e)

{

// Required to initialize variables

InitializeComponent();

inkP.MouseLeftButtonDown += new MouseEventHandler(inkP_MouseLeftButtonDown);

inkP.MouseMove += new MouseEventHandler(inkP_MouseMove);

inkP.MouseLeftButtonUp += new MouseEventHandler(inkP_MouseLeftButtonUp);

}

Note : You just need to type inkP.MouseLeftButtonDown += ..and then Press “Tab” key twice,The event will get generated.

inkP is nothing but name given to InkPresneter in xaml file as shown below.

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

You can see the last attribute x:Name=”inkP”

Here now we will first handle the MouseLeftButtonDown as this is supposed to be get fire first.

void inkP_MouseLeftButtonDown(object sender, MouseEventArgs e)

{

inkP.CaptureMouse();

s = new Stroke();

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

s.DrawingAttributes.Color = Colors.Black;

inkP.Strokes.Add(s);

}

You can see the CaptureMouse(); method of inkP.Though is does not take any parameter,Signature of this method is as bool Visual.CaptureMouse();,Object “s” is get instanciated in statment s=new Stroke();

Then we need to add StylusPoints to s, This is nothing but the initialization process of Ink Presenter.Then we need to add this Stroke to inkP by statement inkP.Strokes.Add(s);

Next event to be handle is MouseMove.

void inkP_MouseMove(object sender, MouseEventArgs e)

{

if (s != null)

{

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

}

}

This will simply check whether s is null or not,if s is not null then it will keep on adding StylusPoint,Hence we get continious drawing untill we release the mouse button.Finally in MouseLeftButtonUp event, we will make s as null.

void inkP_MouseLeftButtonUp(object sender, MouseEventArgs e)

{

s = null;

}

Hence this is sort of continous process,The same cycle will be again roll on when MouseLeftButtonDown event will get fire.

Build the application and Press “F5”,you should get following output,a sort of board in your browser where you can do free hand drawing.

Above is the default blank canvas ready for drawing, and once you apply strokes using mouse button click like we do in PaintBrush we can gets similar output shown below.

Thats it !!..done with it..Hope you all will like it..This demo was inspired from one of the silverlight videos which I came across few months back.

Vikram Pendse.