Windows 8 Store Apps Learning (51) Input: Graffiti Board

Introduced

Implement a basic function of a graffiti board by pointer related events

Implement a full-featured graffiti board through Inkmanager

Example

1. Demonstrates how to implement a graffiti board with only basic functions through pointer related events

Input/ink/simple.xaml

<page
    x:class= "XamlDemo.Input.Ink.Simple"
    xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/ Presentation "
    xmlns:x=" Http://schemas.microsoft.com/winfx/2006/xaml "
    xmlns:local=" using: XamlDemo.Input.Ink "
    xmlns:d=" http://schemas.microsoft.com/expression/blend/2008 "
    xmlns:mc=" http:// schemas.openxmlformats.org/markup-compatibility/2006 "
    mc:ignorable=" D ">
    
    <grid background=" Transparent ">
        <stackpanel margin=" 0 0 0 "> <button name=" btnclear "content="
    
            Clear "click=" Btnclear_click_1 "/> <canvas name=" Canvas "background=" "Blue" Width= "a" height= "the" "HorizontalAlignment"
    
            = "Left" margin= "0 0 0"/>
    
        </StackPanel>
    </Grid>
</Page>

Input/ink/simple.xaml.cs

* * * through pointer related events to achieve a only basic function of the GRAFFITI board * * * using System;
Using System.Collections.Generic;
Using Windows.foundation;
Using Windows.ui;
Using Windows.UI.Input;
Using Windows.UI.Xaml;
Using Windows.UI.Xaml.Controls;
Using Windows.UI.Xaml.Input;
Using Windows.UI.Xaml.Media;
    
Using Windows.UI.Xaml.Shapes;
        Namespace XamlDemo.Input.Ink {public sealed partial class Simple:page {//For saving touch points (Pointerid-point)
    
        Private Dictionary<uint, point?> _dicpoint; Public simple () {this.
    
            InitializeComponent (); Canvas.
            pointerpressed + = canvas_pointerpressed; Canvas.
            Pointermoved + = canvas_pointermoved; Canvas.
            pointerreleased + = canvas_pointerreleased; Canvas.
    
            pointerexited + = canvas_pointerexited;
        _dicpoint = new Dictionary<uint, point?> (); } void Canvas_pointerpressed (object sender, Pointerroutedeventargs e) {//pointer pressed, saveThis touch point pointerpoint pointerpoint = E.getcurrentpoint (canvas);
        _dicpoint[pointerpoint.pointerid] = pointerpoint.position; } void Canvas_pointermoved (object sender, Pointerroutedeventargs e) {Pointerpoint Pointe
    
            Rpoint = E.getcurrentpoint (canvas); if (_dicpoint.containskey (Pointerpoint.pointerid) && _dicpoint[pointerpoint.pointerid].
                HasValue) {Point currentpoint = pointerpoint.position; Point previouspoint = _dicpoint[pointerpoint.pointerid].
    
                Value;
                If the pointer moves, the distance between the two points exceeds 4 to draw a line between two points to complete the graffiti if (Computedistance (Currentpoint, Previouspoint) > 4) 
                        {Line line = new Line () {X1 = Previouspoint.x, Y1 = previouspoint.y, X2 = currentpoint.x, Y2 = C
              Urrentpoint.y,          StrokeThickness = 5, Stroke = new SolidColorBrush (Colors.orange),
    
                    Strokeendlinecap = Penlinecap.round};
                    _dicpoint[pointerpoint.pointerid] = Currentpoint; Canvas.
                Children.add (line);
            }} void Canvas_pointerreleased (object sender, Pointerroutedeventargs e) {
            After the pointer is released, remove the Pointerid data from the dictionary pointerpoint pointerpoint = e.getcurrentpoint (canvas);
        if (_dicpoint.containskey (Pointerpoint.pointerid)) _dicpoint.remove (Pointerpoint.pointerid);
            } void Canvas_pointerexited (object sender, Pointerroutedeventargs e) {//pointer left equivalent to pointer release
        Canvas_pointerreleased (sender, E); //clear Graffiti private void Btnclear_click_1 (object sender, RoutedEventArgs e) {Canva
      S.children.clear ();      _dicpoint.clear ();
            //Calculate the distance between two points (point) private double computedistance (dot point1, point Point2) { Return Math.sqrt (Math.pow (point1). X-point2. X, 2) + Math.pow (point1. Y-point2.
        Y, 2)); }
    }
}