Ink refers to handwriting or drawing content that has been input with a stylus, a mouse, or by touch. There are various uses for ink in your Silverlight-based applications.
This topic contains the following sections.
Ink annotation is a way to make Silverlight content more interactive and personal. Using the elements to implement ink annotation in Silverlight is both easy and flexible. Silverlight is one of the few Web technologies to support ink collection and the display of high-quality stylus input from Tablet PC devices.
Blogs are personal. Adding ink to a blog gives it a unique, personal touch. You also extend what is possible in a blog when you add writing, drawing, and annotation over photos and videos.
The use of ink in Silverlight opens up new scenarios for natural interaction in online game content. Silverlight makes the implementation of these scenarios straightforward. The flexibility of the input model enables great flexibility when you implement it in your gaming content.
Computers with stylus (such as a Tablet PC or even a desktop computer that has an external digitizer) can take advantage of the full-fidelity stylus input in Silverlight. These devices allow ink input that you can integrate into your Silverlight-based applications to create high-quality handwriting, drawing, annotation, oil painting, and other content input with a stylus.
Silverlight supports touch-screen devices, such as those found in certain Tablet PC and Ultra-Mobile PC (UMPC) computers. Touch enables users to interact with Silverlight content in a natural way, when a keyboard or a stylus is cumbersome or unnecessary.
You can use a mouse to draw ink in a Silverlight-based application. However, ink that is generated with the mouse has a lower resolution than stylus input that is gathered with a digitizer. You can use mouse-generated ink just like stylus-generated ink.
The following code example shows how you can create an InkPresenter element in XAML.
<Canvas> <TextBlock Text="InkPresenter Control" FontWeight="Bold" Margin="50,30,0,0" /> <Rectangle Height="500" Width="500" Margin="50,50,0,0" Stroke="Black" /> <InkPresenter x:Name="MyIP" Height="500" Width="500" Margin="50,50,0,0" MouseLeftButtonDown="MyIP_MouseLeftButtonDown" LostMouseCapture="MyIP_LostMouseCapture" MouseMove="MyIP_MouseMove" Background="Transparent" Opacity="1" /> </Canvas>
In the previous example, a Rectangle is added to the Canvas with the same margin as the InkPresenter element. This is because the InkPresenter does not have properties to provide visual boundaries. The Stroke property of the Rectangle is set to Black, which acts as the border for the InkPresenter. The z-order of the InkPresenter must be higher than that of the Rectangle Otherwise, the Rectangle will hide the InkPresenter.
<Canvas> <Image Source="flower.jpg" Stretch="Fill" Width="500" Height="500" /> <InkPresenter x:Name="MyIP" Background="Transparent" Width="500" Height="500" MouseLeftButtonDown="MyIP_MouseLeftButtonDown" MouseMove="MyIP_MouseMove" LostMouseCapture="MyIP_LostMouseCapture"> </InkPresenter> </Canvas>
Ink in Silverlight is a StrokeCollection object, which contains individual Stroke objects. Each Stroke corresponds to a stylus-down, stylus-move, and stylus-up sequence. A Stroke can be a dot, a straight line, or a curving line. Each Stroke contains a StylusPointCollection object, which contains individual StylusPoint objects. StylusPoint objects are collected when the stylus moves while it is in contact with the digitizer. The Stroke also has characteristics, such as height, width, color, and outline color, all of which are contained in the DrawingAttributes class.
The following code example shows how you can collect and display stroke data on the InkPresenter.
Public Sub New() MyBase.New() InitializeComponent() SetBoundary() End Sub 'A new stroke object, MyStroke, is created and is added to the StrokeCollection object 'of the InkPresenter, MyIP Private Sub MyIP_MouseLeftButtonDown(ByVal sender As Object, ByVal e As MouseEventArgs) MyIP.CaptureMouse() Dim MyStylusPointCollection As StylusPointCollection = New StylusPointCollection MyStylusPointCollection.Add(e.StylusDevice.GetStylusPoints(MyIP)) NewStroke = New Stroke(MyStylusPointCollection) MyIP.Strokes.Add(NewStroke) End Sub 'StylusPoint objects are collected from the MouseEventArgs and added to MyStroke. Private Sub MyIP_MouseMove(ByVal sender As Object, ByVal e As MouseEventArgs) If (Not (NewStroke) Is Nothing) Then NewStroke.StylusPoints.Add(e.StylusDevice.GetStylusPoints(MyIP)) End If End Sub 'MyStroke is completed Private Sub MyIP_LostMouseCapture(ByVal sender As Object, ByVal e As MouseEventArgs) NewStroke = Nothing End Sub 'Set the Clip property of the inkpresenter so that the strokes 'are contained within the boundary of the inkpresenter Private Sub SetBoundary() Dim MyRectangleGeometry As RectangleGeometry = New RectangleGeometry MyRectangleGeometry.Rect = New Rect(0, 0, MyIP.ActualWidth, MyIP.ActualHeight) MyIP.Clip = MyRectangleGeometry End Sub
In the previous example, when the InkPresenter element receives a MouseLeftButtonDown event, a new Stroke object is created and added to the StrokeCollection object of the InkPresenter element. When the stylus moves while in contact with the screen, the MouseMove event is called and StylusPoint objects are collected and added to that Stroke. When the LostMouseCapture event is raised, the Stroke created is completed.