World War I Windows 10 (60) and World War I 60

World War I Windows 10 (60) and World War I 60

[Download source code]

Backwater world war I Windows 10 (60)-Controls (media class): Pointer graffiti and InkCanvas graffiti

Author: webabcd


Introduction
Controls for Windows 10 (Media)

• Implement a simple graffiti by handling Pointer related events
• Basic InkCanvas knowledge

Example
1. demonstrate how to handle Pointer-related events to implement a simple graffiti
Controls/MediaControl/InkSimple. xaml

<Page x: Class = "Windows10.Controls. mediaControl. inkSimple "xmlns =" http://schemas.microsoft.com/winfx/2006/xaml/presentation "xmlns: x =" http://schemas.microsoft.com/winfx/2006/xaml "xmlns: local =" using: Windows10.Controls. mediaControl "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 = "10 0 10"> <Button Name = "btnClear" Content = "clear" Click =" btnClear_Click "Margin =" 5 "/> <Canvas Name =" canvas "Background =" Blue "Width =" 800 "Height =" 480 "HorizontalAlignment =" Left "Margin =" 5 "/> </StackPanel> </Grid> </Page>

Controls/MediaControl/InkSimple. xaml. cs

/** This example shows how to implement a simple graffiti System */using System; using System by handling Pointer related events. 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 Windows10.Controls. mediaControl {public sealed partial class InkSimple: Page {// used to save a touch Point (Point ErId-Point) private Dictionary <uint, Point?> _ DicPoint; public InkSimple () {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) {// After the pointer is pressed, save this touch point PointerPoint pointerPoint = e. getCurrentPoint (canvas); _ dicPoint [pointerPoint. pointerId] = pointerPoint. position;} void canvas_PointerMoved (object sender, PointerRoutedEventArgs e) {PointerPoint pointerPoint = e. getCurrentPoint (canvas); if (_ dicPoint. containsKey (pointerPoint. pointerId) & _ dicPoint [pointerPoint. pointerId]. hasValue) {Point currentPoint = pointerPoint. position; Point previousPoint = _ dicPoint [pointerPoint. pointerId]. value; // if the distance between two points exceeds 4 during pointer movement, draw a straight line between the two points to complete graffiti if (ComputeDistance (currentPoint, previousPoint)> 4) {Line line = new Line () {X1 = previousPoint. x, Y1 = previousPoint. y, X2 = currentPoint. x, Y2 = currentPoint. 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) {// Delete the PointerPoint pointerPoint = e from the dictionary after the pointer is released. getCurrentPoint (canvas); if (_ dicPoint. containsKey (pointerPoint. pointerId) _ dicPoint. remove (pointerPoint. pointerId);} void notify (object sender, PointerRoutedEventArgs e) {// pointer exit is equivalent to releasing canvas_PointerReleased (sender, e);} // clear graffiti private void btnClear_Click (object sender, routedEventArgs e) {canvas. children. clear (); _ dicPoint. clear () ;}// calculate the distance between two points (Point). private double ComputeDistance (Point point1, Point point2) {return Math. sqrt (Math. pow (point1.X-point2.X, 2) + Math. pow (point1.Y-point2.Y, 2 ));}}}

2. demonstrate basic InkCanvas knowledge
Controls/MediaControl/InkCanvasDemo1.xaml

<Page x: Class = "Windows10.Controls. MediaControl. InkCanvasDemo1" xmlns =" http://schemas.microsoft.com/winfx/2006/xaml /Presentation "xmlns: x =" http://schemas.microsoft.com/winfx/2006/xaml "Xmlns: local =" using: Windows10.Controls. MediaControl "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 = "10 0 10"> <Border Background = "White" Width = "480" Height =" 320 "Margin =" 5 "HorizontalAlignment =" Left "> <! -- InkCanvas-graffiti control --> <InkCanvas Name = "inkCanvas"/> </Border> <ComboBox Name = "drawingColor" Header = "Color" SelectedIndex = "0" SelectionChanged =" updatedefadradrawingattributes_handler "Margin =" 5 "> <x: string> Red </x: String> <x: String> Green </x: String> <x: String> Blue </x: string> </ComboBox> <Slider Name = "drawingSize" Foreground = "Orange" Background = "Red" Style = "{StaticResource MySliderStyle}" Header = "Size" Minimum = "1 "Maximum =" 20 "Value =" 5 "ValueChanged =" comment "Margin =" 5 "/> <CheckBox Name =" drawingdraw.ighlighter "Content =" draw.ighlighter "IsChecked =" False" checked = "success" Unchecked = "success" Margin = "5"/> <CheckBox Name = "drawingFitToCurve" Content = "FitToCurve" IsChecked = "True" Checked = "success" Unchecked = "updatedefadradrawingattributes_handler" Margin = "5"/> <ToggleSwitch Name = "drawingPenTip" Style = "{StaticResource MyToggleSwitchStyle}" OnContent = "PenTipShape. circle "OffContent =" PenTipShape. rectangle "IsOn =" True "Toggled =" updatedefadradrawingattributes_handler "Margin =" 5 "/> <CheckBox Name =" drawingPenTipTransform "Content =" PenTipTransform converts PenTip to customize pen tip shapes "IsChecked =" False "Checked =" updatedefadradrawingattributes_handler "Unchecked =" writable "Margin =" 5 "/> <CheckBox Name =" chkErasing "Content =" specify the input as the erasure mode" isChecked = "False" Checked = "success" Unchecked = "success" Margin = "5"/> <CheckBox Name = "chkIsInputEnabled" Content = "IsInputEnabled" IsChecked = "True" Checked = "success" Unchecked = "updatedefadefadrawingattributes_handler" Margin = "5"/> <Button Name = "buttonClear" Content = "Clear all" Click = "buttonClear_Click"/> </StackPanel> </Grid> </Page>

Controls/MediaControl/InkCanvasDemo1.xaml. cs

/** InkCanvas-graffiti control (inherited from FrameworkElement, see/Controls/BaseControl/FrameworkElementDemo /) * InkPresenter-get the InkPresenter object ** InkPresenter-graffiti Board * IsInputEnabled-enable graffiti Board * InputDeviceTypes-type of the input device (None, Touch, Pen, Mouse) * InputProcessingConfiguration. mode-input Mode (None, Inking, Erasing) * copydefadradrawingattributes ()-Get the InkDrawingAttributes object * updatedefadradrawingattributes (InkDra WingAttributes value)-set the InkDrawingAttributes object ** InkDrawingAttributes-graffiti pen tip attribute * IgnorePressure-whether to ignore touch pressure * Color-pen tip Color * Size-pen tip Size (width and height) * draw.ighlighter-overwrite the previous graffiti (false-overwrite directly; true-highlight the Covered Area) * FitToCurve-graffiti (true-generate graffiti using the besell curve; false-generate graffiti using a straight line) * PenTip-pen tip shape (Circle, Rectangle) * PenTipTransform-Matrix3x2 affined conversion matrix for converting PenTip (Matrix3x2 provides some easy methods: CreateRotation, createScal E, CreateSkew, CreateTranslation, etc ). You can use it to customize the pen tip shape */using System. numerics; using Windows. foundation; using Windows. UI; using Windows. UI. core; using Windows. UI. input. inking; using Windows. UI. xaml; using Windows. UI. xaml. controls; namespace Windows10.Controls. mediaControl {public sealed partial class InkCanvasDemo1: Page {private InkPresenter _ inkPresenter; public InkCanvasDemo1 () {this. initializeComponent (); _ inkPresenter = inkCanvas. inkPr Esenter; _ inkPresenter. inputDeviceTypes = CoreInputDeviceTypes. mouse | CoreInputDeviceTypes. pen | CoreInputDeviceTypes. touch; invoke ();} private void initialize (object sender, RoutedEventArgs e) {updatedefadradrawingattributes ();} private void buttonClear_Click (object sender, RoutedEventArgs e) {_ inkPresenter. strokeContainer. clear ();} privat E void updatedefadradrawingattributes () {if (_ inkPresenter! = Null) {InkDrawingAttributes drawingAttributes = _ inkPresenter. copyDefaultDrawingAttributes (); drawingAttributes. ignorePressure = true; switch (drawingColor. selectedValue. toString () {case "Red": drawingAttributes. color = Colors. red; break; case "Green": drawingAttributes. color = Colors. green; break; case "Blue": drawingAttributes. color = Colors. blue; break;} drawingAttributes. size = new Size (d RawingSize. Value, drawingSize. Value); drawingAttributes? PenTipShape. circle: PenTipShape. rectangle; if (drawingPenTipTransform. isChecked = true) drawingAttributes. penTipTransform = Matrix3x2. createSkew (4, 4); else drawingAttributes. penTipTransform = Matrix3x2. identity; _ inkPresenter. updatedefadradrawingattributes (drawingAttributes); if (chkErasing. isChecked = true) _ inkPresenter. inputProcessingConfiguration. mode = InkInputProcessingMode. erasing; else _ inkPresenter. inputProcessingConfiguration. mode = InkInputProcessingMode. inking; _ inkPresenter. isInputEnabled = chkIsInputEnabled. isChecked. value ;}}}}

OK
[Download source code]