Windows Phone development (21): A simple drawing board

In fact, what we want to talk about today is a control-inkpresenter. This control is not very powerful and cannot be compared with inkcanvas in WPF. It is estimated that it is rarely used in actual development. However, let's take a look at it. After all, it's not difficult to use it.

 

This control has no technical content. Pay attention to the following points:

1. The width and height of inkpresenter must be specified explicitly, that is, automatic values and margin cannot be used. Otherwise, ink marks cannot be collected unless there are child elements in them;

2. To collect ink marks, set the clip attribute;

3. You can use the drawingattributes class to set the ink size and color.

 

This control cannot automatically collect ink marks like WPF does, that is, it can only be written by ourselves.Code.

 

<Grid> <br/> <inkpresenter X: name = "mypresenter" <br/> horizontalalignment = "Left" <br/> verticalignment = "TOP" <br/> mouseleftbuttondown = "success" <br/> lostmousecapture = "success ""<br/> mousemove =" mypresenter_mousemove "<br/> background =" Transparent "<br/> opacity =" 1 "width =" 480 "Height =" 750 "/> <br/> </GRID> <br/>

 

Using system; <br/> using system. collections. generic; <br/> using system. LINQ; <br/> using system. net; <br/> using system. windows; <br/> using system. windows. controls; <br/> using system. windows. documents; <br/> using system. windows. input; <br/> using system. windows. media; <br/> using system. windows. media. animation; <br/> using system. windows. shapes; <br/> using Microsoft. phone. controls; <br/> // introduce the following namespace. <Br/> using system. windows. ink; </P> <p> namespace inkpresentsample <br/>{< br/> Public partial class mainpage: phoneapplicationpage <br/>{< br/> stroke currentstroke = NULL; <br/> // constructor <br/> Public mainpage () <br/> {<br/> initializecomponent (); </P> <p> // sets the clip to collect ink. <br/> rectanglegeometry Rg = new rectanglegeometry (); <br/> // to make the range accurate, the final height of the control should be used. <Br/> RG. rect = new rect (0, 0, mypresenter. actualwidth, mypresenter. actualheight); <br/> mypresenter. clip = RG; <br/>}</P> <p> private void mypresenter_mouseleftbuttondown (Object sender, mousebuttoneventargs E) <br/>{< br/> // capture the mouse and cursor when we click <br/> mypresenter. capturemouse (); <br/> // collect the points of the current cursor position <br/> styluspointcollection SC = new styluspointcollection (); <br/> SC. add (E. stylusdevice. getstyluspo Ints (mypresenter); <br/> currentstroke = new stroke (SC); <br/> // set the stroke color and size <br/> currentstroke. drawingattributes. color = colors. yellow; <br/> currentstroke. drawingattributes. width = 8; <br/> currentstroke. drawingattributes. height = 8; <br/> // Add new strokes to the set <br/> mypresenter. strokes. add (currentstroke); <br/>}</P> <p> private void mypresenter_lostmousecapture (Object sender, mouseeventargs e) <br/> {<Br/> // when the mouse is released, reference to the stroke variable is also released <br/> currentstroke = NULL; <br/>}</P> <p> private void mypresenter_mousemove (Object sender, mouseeventargs e) <br/>{< br/> If (currentstroke! = NULL) <br/>{< br/> // each time you move the mouse, the corresponding points are collected. <Br/> currentstroke. styluspoints. Add (E. stylusdevice. getstyluspoints (mypresenter); <br/>}< br/>}