Stefan Wick's Weblog - Development with Silverlight, WPF and Tablet PC : Silverlight 2

Custom Ink Rendering in Silverlight 2

swick — Tue, 02 Dec 2008 00:26:00 GMT

Drawing ink with the built-in stroke objects works great for handwriting and annotations. In some scenarios, however, you may want something more fancy that takes advantage of Silverlight's rich graphics capabilities.

Creating ink strokes with a customized appearance is fairly straight forward with Silverlight 2. You basically collect StylusPoints in mouse events as usual, but instead of adding them to stroke objects, you just draw your own geometries or shapes at the stylus/mouse location.

When collecting sample points during the MouseMove event, please be sure to call the StylusDevice.GetStylusPoints() method and process all points returned from that call. This will ensure that stylus users will get the full fidelity of input points, since their pointing device reports points more often than the MouseMove events fires. Also it is good practice to interpolate points between sample points, since they won't usually be equidistant.

I have a attached a sample project that demonstrates the concept end-to-end using Ellipse shapes with a LinearGradientBrush to give my ink strokes a custom look. Below is live version of the sample for you to play with.

Back-of-pen Erasing in Silverlight

swick — Tue, 02 Dec 2008 00:25:00 GMT

As addendum to my previous post Erasing Ink in Silverlight 2 I want to show how to enable back-of-pen erasing for users with a compatible stylus device (e.g. on a Tablet PC or with an external Graphics Tablet).

The key that enables this scenario is the StylusDevice.Inverted property. It reports during mouse events whether the front-of-pen (stylus) or back-of-pen (eraser) is being used. The app can then switch into inking or erasing mode automatically, according to this value.

Here is the code-behind you need to add for an InkPresenter to enable this scenario:

public partial class Page : UserControl

{

public Page()

{

InitializeComponent();

}

private void inkPresenter_MouseLeftButtonDown(object sender,
MouseButtonEventArgs e)

{

inkPresenter.CaptureMouse();

if (e.StylusDevice.Inverted == false)

{

// ink mode

newStroke =

new Stroke(e.StylusDevice.GetStylusPoints(inkPresenter));

inkPresenter.Strokes.Add(newStroke);

}

else

{

// erase mode

erasePoints = e.StylusDevice.GetStylusPoints(inkPresenter);

}

private void inkPresenter_MouseMove(object sender, MouseEventArgs e)

{

if (e.StylusDevice.Inverted == false)

{

// ink mode

if (newStroke != null)

{

newStroke.StylusPoints.Add(

e.StylusDevice.GetStylusPoints(inkPresenter));

}

else if (e.StylusDevice.Inverted == true)

{

// erase mode

if (erasePoints != null)

{

erasePoints.Add(
e.StylusDevice.GetStylusPoints(inkPresenter));

StrokeCollection hitStrokes =
inkPresenter.Strokes.HitTest(erasePoints);

foreach (Stroke hitStroke in hitStrokes)

{

inkPresenter.Strokes.Remove(hitStroke);

}

private void inkPresenter_MouseLeftButtonUp(object sender,
MouseButtonEventArgs e)

{

inkPresenter.ReleaseMouseCapture();

erasePoints = null;

newStroke = null;

}

private StylusPointCollection erasePoints = null;

private Stroke newStroke = null;

}

Saving Ink to IsolatedStorage with Silverlight 2

swick — Sat, 01 Nov 2008 21:38:00 GMT

One of the questions I have seen quite a few times in the Silverlight.net forums is how to persists (and de-persists) ink in Silverlight 2. Unlike WPF, Silverlight does not support a binary persistence format (ISF), but you can write some code to save and load ink to and from XAML. To demonstrate how to do this in a real world example, I am using another very cool feature in Silverlight 2: IsolatedStorage

IsolatedStorage is a per application, per computer, per user storage that offers a powerful, easy to use way for your web applications to store data locally on the user's and retrieve it later when the user visits your sites again on the same computer. You can use it like a file system, or as in the case of this example, simply use it to store application settings in key/value pairs. Learn more about how to do the latter here.

The goal of my application is to store the ink as XAML in IsolatedStorage when the user navigates away from the site. Upon return, the app will retrieve the persisted data from the storage, depersist it and present the ink to the user. Here are the relevant pieces of code (full code project is attached to this post).

Serializing and de-serializing ink strokes using XAML:

public string InkXAML

{

get

{

// persists ink strokes to XAML

StringBuilder builder = new StringBuilder();

XmlWriter writer = XmlWriter.Create(builder);

writer.WriteStartElement("StrokeCollection",

"http://schemas.microsoft.com/winfx/2006/xaml/presentation");

foreach (Stroke stroke in _presenter.Strokes)

{

writer.WriteStartElement("Stroke");

writer.WriteStartElement("Stroke.DrawingAttributes");

writer.WriteStartElement("DrawingAttributes");

writer.WriteAttributeString("Width",

stroke.DrawingAttributes.Width.ToString(invCult));

writer.WriteAttributeString("Height",

stroke.DrawingAttributes.Height.ToString(invCult));

writer.WriteAttributeString("Color",

string.Format(invCult, "#{0:X2}{1:X2}{2:X2}{3:X2}",

stroke.DrawingAttributes.Color.A,

stroke.DrawingAttributes.Color.R,

stroke.DrawingAttributes.Color.G,

stroke.DrawingAttributes.Color.B));

writer.WriteAttributeString("OutlineColor",

string.Format(invCult, "#{0:X2}{1:X2}{2:X2}{3:X2}",

stroke.DrawingAttributes.OutlineColor.A,

stroke.DrawingAttributes.OutlineColor.R,

stroke.DrawingAttributes.OutlineColor.G,

stroke.DrawingAttributes.OutlineColor.B));

writer.WriteEndElement();

writer.WriteStartElement("Stroke.StylusPoints");

writer.WriteStartElement("StylusPointCollection");

foreach (StylusPoint sp in stroke.StylusPoints)

{

writer.WriteStartElement("StylusPoint");

writer.WriteAttributeString("X", sp.X.ToString(invCult));

writer.WriteAttributeString("Y", sp.Y.ToString(invCult));

writer.WriteEndElement();

}

writer.WriteEndElement();

}

writer.WriteEndElement();

writer.Flush();

return builder.ToString();

}

set

{

// depersist ink strokes from XAML

try

{

_presenter.Strokes = XamlReader.Load(value) as StrokeCollection;

}

catch (Exception exc) { Debug.WriteLine(exc.ToString()); }

}

Persisting data on Application exit:

void Application_Exit(object sender, EventArgs e)

{

IsolatedStorageSettings settings = IsolatedStorageSettings.ApplicationSettings;

string inkXAML = _inkCollector.InkXAML;

if (settings.Contains("Ink"))

{

settings["Ink"] = inkXAML;

}

else

{

settings.Add("Ink", inkXAML);

}

Loading data on Application startup:

public Page()

{

InitializeComponent();

_inkCollector = new InkCollector(inkNote);

IsolatedStorageSettings settings =

IsolatedStorageSettings.ApplicationSettings;

string inkXAML = "";

if (settings.Contains("Ink"))

{

inkXAML = settings["Ink"] as string;

_inkCollector.InkXAML = inkXAML;

}

If you have Silverlight 2 installed (who hasn't? :-)), you can try it out live below. Draw some ink, navigate away, close the browser, clear the cache, etc. Then return to my blog and see that your ink is back, due to the power of IsolatedStorage.

TabletPC Development Gotchas Part 7: Detecting the input device in Silverlight 2

swick — Sat, 01 Nov 2008 20:07:00 GMT

When writing an application that supports multiple input devices (mouse, stylus, touch) it is often neccessary to detect which type of device is sending the input events.Silverlight 1.0 offered a DeviceType property on the StylusInfo object that gets reported in every mouse event.

In the Silverlight 2 managed API, you will not find an equivelnt object that provides this information. We omitted it on purpose in this release, because adding this to the OM could not be done in a way that would make the Silverlight API a compatible subset of the WPF API. In future versions of both platforms we will provide a consistent way to get to this information.

Omitting this for now is acceptable since we do provide a workaround to get to this information, via the HTML DOM bridge. Here is how you do it (full source attached):

Expose a scriptable method from managed code to handle the DeviceType information:

public Page()

{

InitializeComponent();

HtmlPage.RegisterScriptableObject("page", this);

}

[ScriptableMember]

public void SetDeviceType(string deviceType)

{

_deviceType = deviceType;

switch (_deviceType)

{

case "Mouse":

// add specific code for mouse

break;

case "Stylus":

// add specific code for stylus

break;

case "Touch":

// add specific code for touch

break;

}

Hook up to the MouseLeftButtonDown event in JavaScript and pass the StylusInfo.DeviceType information to managed code when the event fires:

function onSilverlightLoad(sender, args) {

// attach a JavaScript MouseDown event handler

var inkPresenter = sender._element.content.findName("inkPresenter");

inkPresenter.addEventListener("mouseLeftButtonDown", onMouseDown);

}

function onMouseDown(sender, args) {

// get the device type info and pass

// the information to the managed code

var stylusInfo = args.getStylusInfo();

var plugin = sender.getHost();

plugin.content.page.SetDeviceType(stylusInfo.deviceType.toString());

}

</script>

Now, as a proud owner of a Toshiba M700, I can run the solution and collect ink from different devices and the app automatically changes the pen attributes as I switch between input devices. Here is a screenshot showing ink strokes collected with the three different devices available on my Tablet PC:

Silverlight 2 Released - Write On!

swick — Tue, 14 Oct 2008 08:45:00 GMT

Now that Silverlight 2 is released, I finally got around to updating my blog after a long time of silence. For those of you interested in handwriting and Tablet related technologies, I want to start out with a canonical example of a Silverlight 2 Inking application. There have been a couple of OM changes since Beta1 around ink and stylus in Silverlight, mostly in order to make the Silverlight API more consistent with the WPF Ink/Stylus APIs.

Just like in Silverlight 1.0, the key element to inking is the InkPresenter which is a Canvas-like element with the ability to render ink strokes. To bring it to live and actually enable ink collection (and eraser) funtionality you will need to write some code-behind that responds to the user's input. In my example I have encapsulated the required code into a re-usable 'InkCollector' class (in InkCollector.cs), so you can just instantiate and assign it to your InkPresenter in order to get started with inking in your own projects.

Here is my example - source code attached - try it out by using your mouse or stylus to write and erase ink: