"Win 10 app development" inktoolbar--graffiti is so simple

Starting with WPF, there is a InkCanvas control that encapsulates the digital ink processing-related features, Silverlight to the win 8 app, and then to the UWP app, all with this control, so the old week said 3,688 times, Anyone who has a solid foundation in. NET will know WPF, and anyone who is a solid foundation of WPF will know the UWP. It's called same strain.

Now you understand why every time after the release of the SDK, the old weeks do not have to study directly to use the reason for it, because the old week seriously studied WPF chant, none of him, that's all.

After the Windows 101 anniversary update, the SDK is also updated, after all, the preview is not stereotyped, so, in the preview stage, the old week is not intended to write anything, has now been formally pushed, so, can write something.

One of the gadgets of the anniversary update is Windows INK, a tool built into the system for easy graffiti.

At the same time, ink-related features are also integrated into the SDK, and have been packaged, directly can be used, full-featured. Don't believe me? Let's try.

Create a new UWP project, and then the project template creates a home page--mainpage.xaml, and then you enter the following XAML.

    <GridBackground="{ThemeResource Applicationpagebackgroundthemebrush}">        <grid.rowdefinitions>            <RowDefinitionHeight= "Auto"/>            <RowDefinition/>        </grid.rowdefinitions>        <InkToolbarName= "Ink_bar"Targetinkcanvas="{x:bind Ink_cvs}"/>        <InkCanvasName= "Ink_cvs"Grid.Row= "1" />    </Grid>

Very simple, inkcanvas do not need to introduce more, it is a panel, the feature is that you can smear on it, like those monsters on the street, the cosmetics to the face of the graffiti, painted people not like people, chicken not like chickens.

Inktoolbar is a ready-made toolbar, you can choose graffiti tools, such as ballpoint pens, pencils, erasers, rulers, etc., old weeks remember, these are the old weeks in kindergarten when the necessary set. Alas, you think, we at that time, there is a P mobile computer play, before going to school to play clay figurines, after school play paper people, in class play Eraser, after class play chalk rub. Every time I hear Luo "childhood", do not have a taste, how good childhood time, a blink of an eye, the sea has become Kuwata, Kuwata and become the sea, the world is constant impermanence, and live and cherish.

As long as you declare a Inktoolbar object, it can be used without writing any code. Oh, don't forget the key point, that is, you have to let Inktoolbar find InkCanvas instance, so, these two ink June can work together, Inktoolbar is Rancai, InkCanvas is a female appearance, is so-called: water love flower complexion, flower love water qingming.

To let two ink June come together, need a medium--by the way, Inktoolbar has a Targetinkcanvas attribute, which is used to specify the corresponding InkCanvas object, remember, this property must be assigned value, otherwise can not find companion, Inktoolbar will xunqing, How can a Mandarin duck lose companion fly, right?

See, that's it, that's it. Simple, a graffiti program is finished, don't look at only two control, and now it can work completely. Of course, don't rush it because we also need to specify what actions the InkCanvas panel supports, such as the mouse, stylus, hand, and so on. OK, switch to Code view and add the following code to the constructor of the page class:

         Public MainPage ()        {            this. InitializeComponent ();             this. Ink_cvs. Inkpresenter.inputdevicetypes = Windows.UI.Core.CoreInputDeviceTypes.Mouse | Windows.UI.Core.CoreInputDeviceTypes.Pen | Windows.UI.Core.CoreInputDeviceTypes.Touch;        }

The Inputdevicetypes property specifies which device actions are supported by the ink panel, and here I simply use the mouse, pen, and finger.

Note that this code must be written after the InitializeComponent method call, not to make those low-level errors, because the XAML-defined UI finishes initializing after the InitializeComponent method call, otherwise the control instance is null and you access the fart.

Okay, now OK, run it.

Is it very simple? So, what if I just want to show a pencil, eraser, and two buttons without the need for another button? All right, very simple, come on, do worked.

First, change the Initialcontrols property of Inktoolbar to None.

   <Name= "Ink_bar"  targetinkcanvas= "{x:bind Ink_cvs} " Initialcontrols = "None" />

Then, manually define the individual buttons below the Inktoolbar element.

        <Name= "Ink_bar"  targetinkcanvas= "{x:bind Ink_cvs} " Initialcontrols = "None" >            < Inktoolbarpencilbutton />            < Inktoolbareraserbutton />        </ InkToolbar >

Run it again and see the effect.

Well, it's a lot simpler now.

Inktoolbar also offers a custom button, which you can customize with the Scribble button to extend its functionality. For example, I add a button.

        <InkToolbarName= "Ink_bar"Targetinkcanvas="{x:bind Ink_cvs}"Initialcontrols= "None">...<InktoolbarcustomtoolbuttonClick= "OnClick">                <SymboliconSymbol= "Folder"Tooltipservice.tooltip= "Sample" />            </Inktoolbarcustomtoolbutton>        </InkToolbar>

Get the following view.

Well, about Inktoolbar, let's talk about it.

Sample code

"Win 10 app development" inktoolbar--graffiti is so simple