Slow and steady Silverlight (14)

Introduced

Silverlight 2.0 Man-Machine Interaction: InkPresenter (Graffiti Board)

InkPresenter-Graffiti board, which is to render ink on the panel. InkPresenter can contain child controls

Cursor-the mouse pointer style when you move the mouse over the InkPresenter

Background-Graffiti Background

Opacity-Opacity of ink on panel

Clipping region of Clip-inkpresenter

Appearance properties of Stroke.drawingattributes-stroke (stroke)

Uielement.capturemouse ()-Enable mouse capture for the UIElement object

Uielement.capturemouse ()-release mouse capture for UIElement object

Online Demo

Http://www.cnblogs.com/webabcd/archive/2008/10/09/1307486.html

Example

Inkpresenter.xaml

<usercontrol x:class= "Silverlight20.Interactive.InkPresenter"
Xmlns= "Http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x= "Http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d= "http://schemas.microsoft.com/expression/blend/ 2008 "xmlns:mc=" http://schemas.openxmlformats.org/markup-compatibility/2006 "mc:ignorable=" D ">
<Canvas>

<!--inkpresenter background with border-->
<rectangle width= "420" height= "stroke=" "Black" strokethickness= "1" >
<Rectangle.Fill>
<imagebrush imagesource= "/silverlight20;component/images/background.jpg" stretch= "Fill"/>
</Rectangle.Fill>
</Rectangle>

<!--work area to depict InkPresenter-->
<rectangle canvas.top= "Ten" canvas.left= "ten" width= "height=" radiusx= "", "radiusy=" "" Fill= "Black" Opacity = "0.2"/>

<!--
InkPresenter-Graffiti board, which is to render ink on the panel
Cursor-the mouse pointer style when you move the mouse over the InkPresenter
Arrow-Arrows
Hand-Hand shape
Wait-Hourglass
iBEAM-"I" glyphs
Stylus-point
Eraser-Rubber
None-None
Background-Graffiti background. It is recommended that you set it to "Transparent", and you can use other controls to paint the background if you need it
Opacity-Opacity of ink on panel
The clipping region of the clip-inkpresenter. This example gives InkPresenter a rounded corner effect, whose clip value is generated by Blend
-->
<inkpresenter x:name= "InkPresenter" cursor= "Stylus" "canvas.top=" canvas.left= "ten" width= "" height= "300" background= "Transparent"

Mouseleftbuttondown= "Inkpresenter_mouseleftbuttondown"
mouseleftbuttonup= "Inkpresenter_mouseleftbuttonup"
Mousemove= "Inkpresenter_mousemove"
clip= "m0.5,25.5 c0.5,11.692882 11.692882,0.5 25.5,0.5 l374.5,0.5 c388.30713,0.5 399.5,11.692882 399.5,25.5 L399.5, c399.5,288.30713 388.30713,299.5 374.5,299.5 l25.5,299.5 c11.692882,299.5 274.5 0.5,288.30713 z ">

<!--
InkPresenter can contain child controls. This example loops the video at the bottom of the InkPresenter
-->
<mediaelement x:name= "MediaElement" source= "/silverlight20;component/video/demo.wmv" width= "100" canvas.top= "stretch=" "UniformToFill" mediaended= "mediaelement_mediaended"/>

</InkPresenter>

<!--red color point, point can then draw red Line-->
<ellipse x:name= "canvas.top=" ellipsered "canvas.left=" cursor= "Hand" fill= "Red" width= "" height= "20" mouseleftbuttondown= "Ellipsered_mouseleftbuttondown"/>

<!--black color point, point can then draw the black line-->
<ellipse x:name= "Ellipseblack" canvas.top= "" canvas.left= "" cursor= "Hand," fill= "Black" width= "" height= "20" mouseleftbuttondown= "Ellipseblack_mouseleftbuttondown"/>

<!--Eraser, the point can then erase the line before the painting-->
<button x:name= "Btneraser" canvas.top= "" canvas.left= "" "Content=" "Eraser" click= "Btneraser_click"/> "

<!--a button to clear ink on a inkpresenter-->
<button x:name= "btnclear" canvas.top= "" canvas.left= "130" content= "clear" click= "Btnclear_click"/>

<!--the position information used to display the rectangle range where the current Stroke (stroke) is located-->
<textbox x:name= "txtmsg" canvas.top= "canvas.left=" 180

</Canvas>
</UserControl>