How To: Static Xaml Ink in Silverlight

In the examples that I’ve shown so far, I’ve demonstrated Ink collection in Silverlight using the InkPresenter element. But what if you don’t want to collect ink from a user, but rather want to show or “play back” static Ink? Well, this can be a nice option if you wanted to show Ink content in an advertisement for example. The easiest way to do this is to specify static Ink content in Xaml. The Ink Xaml is nested in the InkPresenter element that will show the Ink, it’s that simple.

 

Here’s an example of what your InkPresenter Xaml would look like if you had only one Stroke consisting of 6 StylusPoints:

… <InkPresenter Width="200" Height="100">   <InkPresenter.Strokes>     <StrokeCollection>       <Stroke>         <Stroke.StylusPoints>           <StylusPoint X="25" Y="21"/>           <StylusPoint X="25" Y="21"/>           <StylusPoint X="25" Y="21"/>           <StylusPoint X="25" Y="21"/>           <StylusPoint X="25" Y="20"/>           <StylusPoint X="25" Y="18"/>         </Stroke.StylusPoints>       </Stroke>     </StrokeCollection>   </InkPresenter.Strokes> </InkPresenter> …

 

In this case, you would not need any JavaScript codebehind to get the InkPresenter to display this Ink. That can greatly simplify your web content if that’s all you needed.

 

So what if you want to spefify the way each Stroke looks? Then you could specify DrawingAttributes in Xaml for each Stroke as shown here:

… <InkPresenter Width="200" Height="100">   <InkPresenter.Strokes>     <StrokeCollection>       <Stroke>         <Stroke.DrawingAttributes>           <DrawingAttributes Color="blue" OutlineColor=”red" Width="5" Height="5"/>         </Stroke.DrawingAttributes>         <Stroke.StylusPoints>           <StylusPoint X="25" Y="21"/>           <StylusPoint X="25" Y="21"/>           <StylusPoint X="25" Y="21"/>           <StylusPoint X="25" Y="21"/>           <StylusPoint X="25" Y="20"/>           <StylusPoint X="25" Y="18"/>         </Stroke.StylusPoints>       </Stroke>     </StrokeCollection>   </InkPresenter.Strokes> </InkPresenter/> …

 

In this case, you would have a single Stroke with 6 StylusPoints that was red with a blue outline, and 5 pixels thickness.

 

So that gives you an idea how you could specify Ink in your Xaml file. One could also store the Xaml for the StrokeCollection in an xml file (or as a string built up in JavaScript), call createFromXaml() with that xml, then set the StrokeCollection property of an existing InkPresenter to the one created from xml to cause the ink from the xml file to be displayed using the existing InkPresenter. So, as we can see here- this technique is one of the building blocks of Ink persistence in Silverlight.

 

Later,

Gavin