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

Source: Internet
Author: User

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.

  1. <Grid>
  2. <inkpresenter x:name= "Mypresenter"
  3. Horizontalalignment= "left"
  4. Verticalalignment= "Top"
  5. Mouseleftbuttondown= "Mypresenter_mouseleftbuttondown"
  6. Lostmousecapture= "Mypresenter_lostmousecapture"
  7. Mousemove= "Mypresenter_mousemove"
  8. Background= "Transparent"
  9. opacity= "1" width= "480" height= "/>"
  10. </Grid>

  1. Using System;
  2. Using System.Collections.Generic;
  3. Using System.Linq;
  4. Using System.Net;
  5. Using System.Windows;
  6. Using System.Windows.Controls;
  7. Using System.Windows.Documents;
  8. Using System.Windows.Input;
  9. Using System.Windows.Media;
  10. Using System.Windows.Media.Animation;
  11. Using System.Windows.Shapes;
  12. Using Microsoft.Phone.Controls;
  13. The following namespaces are introduced.
  14. Using System.Windows.Ink;
  15. Namespace Inkpresentsample
  16. {
  17. public partial class Mainpage:phoneapplicationpage
  18. {
  19. Stroke currentstroke = null;
  20. constructor function
  21. Public MainPage ()
  22. {
  23. InitializeComponent ();
  24. Set up a clip to collect ink
  25. RectangleGeometry RG = new RectangleGeometry ();
  26. To make the scope accurate, the final rendering height of the control should be used.
  27. Rg. rect = new Rect (0, 0, mypresenter.actualwidth, mypresenter.actualheight);
  28. Mypresenter.clip = RG;
  29. }
  30. private void Mypresenter_mouseleftbuttondown (object sender, MouseButtonEventArgs e)
  31. {
  32. When we click, we catch the mouse cursor
  33. Mypresenter.capturemouse ();
  34. Collects the point at which the current cursor is located
  35. StylusPointCollection sc = new StylusPointCollection ();
  36. Sc. ADD (E.stylusdevice.getstyluspoints (mypresenter));
  37. Currentstroke = new Stroke (SC);
  38. Set the stroke's color, size
  39. CurrentStroke.DrawingAttributes.Color = Colors.yellow;
  40. CurrentStroke.DrawingAttributes.Width = 8;
  41. CurrentStroke.DrawingAttributes.Height = 8;
  42. Add a new stroke to the collection
  43. MYPRESENTER.STROKES.ADD (Currentstroke);
  44. }
  45. private void Mypresenter_lostmousecapture (object sender, MouseEventArgs e)
  46. {
  47. When you release the mouse, the reference to the stroke variable is also released
  48. Currentstroke = null;
  49. }
  50. private void Mypresenter_mousemove (object sender, MouseEventArgs e)
  51. {
  52. if (Currentstroke! = null)
  53. {
  54. Each time the mouse is moved, the corresponding points are collected.
  55. CURRENTSTROKE.STYLUSPOINTS.ADD (E.stylusdevice.getstyluspoints (mypresenter));
  56. }
  57. }
  58. }
  59. }

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.