Windows Phone Development (21): Make a simple drawing board

What we're going to talk about today is a control--inkpresenter, a control that's not very powerful, and it's not likely to be used in real-world development compared to InkCanvas in WPF, but let's get to know it, after all, it's not hard to use.

There is no technical content to use the control, just take note of the following points:

1, must explicitly specify the width and height of the InkPresenter, that is, cannot use automatic values and margin, or cannot collect ink, unless there are child elements;

2, to collect ink, to set the clip properties;

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

The control does not automatically implement the ability to collect ink like WPF, which means that we can only write our own code.

2. <Grid>
4. <inkpresenter x:name= "Mypresenter"
6. Horizontalalignment= "left"
8. Verticalalignment= "Top"
10. Mouseleftbuttondown= "Mypresenter_mouseleftbuttondown"
12. Lostmousecapture= "Mypresenter_lostmousecapture"
14. Mousemove= "Mypresenter_mousemove"
16. Background= "Transparent"
18. opacity= "1" width= "480" height= "/>"
20. </Grid>

2. Using System;
4. Using System.Collections.Generic;
6. Using System.Linq;
8. Using System.Net;
10. Using System.Windows;
12. Using System.Windows.Controls;
14. Using System.Windows.Documents;
16. Using System.Windows.Input;
18. Using System.Windows.Media;
20. Using System.Windows.Media.Animation;
22. Using System.Windows.Shapes;
24. Using Microsoft.Phone.Controls;
26. The following namespaces are introduced.
28. Using System.Windows.Ink;
32. Namespace Inkpresentsample
34. {
36. public partial class Mainpage:phoneapplicationpage
38. {
40. Stroke currentstroke = null;
42. constructor function
44. Public MainPage ()
46. {
48. InitializeComponent ();
52. Set up a clip to collect ink
54. RectangleGeometry RG = new RectangleGeometry ();
56. To make the scope accurate, the final rendering height of the control should be used.
58. Rg. rect = new Rect (0, 0, mypresenter.actualwidth, mypresenter.actualheight);
60. Mypresenter.clip = RG;
62. }
66. private void Mypresenter_mouseleftbuttondown (object sender, MouseButtonEventArgs e)
68. {
70. When we click, we catch the mouse cursor
72. Mypresenter.capturemouse ();
74. Collects the point at which the current cursor is located
76. StylusPointCollection sc = new StylusPointCollection ();
78. Sc. ADD (E.stylusdevice.getstyluspoints (mypresenter));
80. Currentstroke = new Stroke (SC);
82. Set the stroke's color, size
84. CurrentStroke.DrawingAttributes.Color = Colors.yellow;
86. CurrentStroke.DrawingAttributes.Width = 8;
88. CurrentStroke.DrawingAttributes.Height = 8;
90. Add a new stroke to the collection
92. MYPRESENTER.STROKES.ADD (Currentstroke);
94. }
98. private void Mypresenter_lostmousecapture (object sender, MouseEventArgs e)
100. {
102. When you release the mouse, the reference to the stroke variable is also released
104. Currentstroke = null;
106. }
110. private void Mypresenter_mousemove (object sender, MouseEventArgs e)
112. {
114. if (Currentstroke! = null)
116. {
118. Each time the mouse is moved, the corresponding points are collected.
120. CURRENTSTROKE.STYLUSPOINTS.ADD (E.stylusdevice.getstyluspoints (mypresenter));
122. }
124. }
126. }
128. }

Windows Phone Development (21): Make a simple drawing board