ごった煮

色々な事を書いてます

UWPのInkで定規を使う

UWP xaml

Windows10の時期アップデートであるAniversary Updateでは、Inkが強化されるのでそれを先取りして実装してみます。

準備

新しいInkを使うには、いろいろと準備が必要です。

  • Windows10のInsider Preview 14332
  • Windows10 Aniversary SDK

が必要です。

Aniversary SDK はここのWindows SDKボタンを押すとダウンロードできます。

2GBくらいストレージが必要なのでその点気を付けましょう。

実装する

早速実装してみます。

とりあえず空のUWPプロジェクトを作ります。

アプリのターゲットバージョンは、14332を指定します。

image

当たり前ですが10240にするとビルドが通らないので気を付けましょう。

実装は下記の通りすごくシンプルです。

<Page
    x:Class="aniversary_ink_sample.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:aniversary_ink_sample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">



&lt;Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"&gt;
    &lt;Grid.RowDefinitions&gt;
        &lt;RowDefinition Height="1*" /&gt;
        &lt;RowDefinition Height="9*" /&gt;
    &lt;/Grid.RowDefinitions&gt;
    &lt;InkToolbar Grid.Row="0" TargetInkCanvas="{x:Bind ink}" VerticalAlignment="Top" HorizontalAlignment="Stretch"/&gt;
    &lt;InkCanvas x:Name="ink" Grid.Row="1"/&gt;
&lt;/Grid&gt;




</Page>

Inkを描画する部分は、例にもれずInkCanvasです。

今回いつもと違うのは、InkToolbarというコードが追加されています。

これが定規などを出す部分になります。

image

InkToolbarのTargetInkCanvasにInkCanvasの名前をバインドしてやるといろいろとInkCanvasに付加価値を付けられます。

一応InkToolbar単体での表示も可能ですが、InkCanvasを紐づけないでペンの色を変えたりすると落ちます。

起動してみる

起動すると以下のような感じです。

普通です。

image

定規とかも普通に使えます。

まとめ

WPFのころからあったInkが一週回ってめっちゃ強化されるのは非常にありがたいことです。

いろいろと今まで面倒だった直線をInkで引くサポートなどが楽になるのはかなりうれしいことだなあと思う今日この頃です。