パート 2: XAML Islands を使用して UWP InkCanvas コントロールを追加する

  • [アーティクル]

これは、Contoso Expenses という名前のサンプル WPF デスクトップ アプリを最新化する方法を示すチュートリアルの 2 番目の部分です。 チュートリアルの概要、前提条件、サンプル アプリをダウンロードする手順については、「チュートリアル: WPF アプリのモダン化」を参照してください。 この記事では、読者がパート 1 を既に完了していることを前提にしています。

このチュートリアルの架空のシナリオでは、Contoso 開発チームが Contoso の経費アプリにデジタル署名を追加したいと考えています。 このシナリオには、デジタル インクや AI を利用したテキストや図形認識機能などをサポートする UWP InkCanvas コントロールが適した選択肢です。 これを行うには、Windows コミュニティ ツールキットにある InkCanvas でラップされた UWP コントロールを使用します。 このコントロールでは、WPF アプリで使用できるよう UWP InkCanvas コントロールのインターフェイスと機能がラップされています。 ラップされた UWP コントロールの詳細については、「デスクトップ アプリで UWP XAML コントロールをホストする (XAML Islands)」を参照してください。

XAML Islands を使用するためのプロジェクトの構成

InkCanvas コントロールを Contoso の経費アプリに追加する前に、プロジェクトで UWP XAML Islands をサポートする構成をまず実行する必要があります。

  1. Visual Studio 2019 のソリューション エクスプローラーで ContosoExpenses.Core プロジェクトを右クリックし、[NuGet パッケージの管理] を選択します。

    Manage NuGet Packages menu in Visual Studio

  2. [NuGet パッケージ マネージャー] ウィンドウで、[参照] をクリックします。 Microsoft.Toolkit.Wpf.UI.Controls パッケージを検索し、バージョン 6.0.0 以降のバージョンをインストールします。

    注意

    このパッケージには、InkCanvas でラップされた UWP コントロールを含む、WPF アプリで UWP XAML Islands をホストするために必要なすべてのインフラストラクチャが含まれています。 Windows フォーム アプリ用には、Microsoft.Toolkit.Forms.UI.Controls という名前の同様のパッケージがあります。

  3. ソリューション エクスプローラーで ContosoExpenses.Core プロジェクトを右クリックし、[追加] -> [新しい項目] と選択します。

  4. アプリケーション マニフェスト ファイルを選択し、app.manifest という名前を付け、[追加] をクリックします。 アプリケーション マニフェストの詳細については、こちらの記事を参照してください。

  5. このマニフェスト ファイルで、次の Windows 10 の <supportedOS> 要素をコメント解除します。

    <!-- Windows 10 -->
<supportedOS Id="{8e0f7a12-bfb3-4fe8-b9a5-48fd50a15a9a}" />

  6. マニフェスト ファイルで、次のコメントが付いた <application> 要素を探します。

    <!--
<application xmlns="urn:schemas-microsoft-com:asm.v3">
  <windowsSettings>
    <dpiAware xmlns="http://schemas.microsoft.com/SMI/2005/WindowsSettings">true</dpiAware>
  </windowsSettings>
</application>
-->

  7. このセクションを削除し、次の XML と置き換えます。 これにより、アプリは DPI 対応になり、Windows 10 がサポートするその他のスケーリング要因より適切に処理するようになります。

    <application xmlns="urn:schemas-microsoft-com:asm.v3">
  <windowsSettings>
      <dpiAware xmlns="http://schemas.microsoft.com/SMI/2005/WindowsSettings">true/PM</dpiAware>
      <dpiAwareness xmlns="http://schemas.microsoft.com/SMI/2016/WindowsSettings">PerMonitorV2, PerMonitor</dpiAwareness>
  </windowsSettings>
</application>

  8. app.manifest ファイルを保存し、閉じます。

  9. ソリューション エクスプローラーで ContosoExpenses.Core プロジェクトを右クリックし、[プロパティ] を選択します。

  10. [アプリケーション] タブの [リソース] セクションで、[マニフェスト] ドロップダウンが [app.manifest] に設定されていることを確認します。

    .NET Core app manifest

  11. プロジェクト プロパティに変更を保存します。

アプリへの InkCanvas コントロールの追加

これでご自分のプロジェクトで UWP XAML Islands を使用する構成が完了したので、アプリに InkCanvas でラップされた UWP コントロールを追加できます。

  1. ソリューション エクスプローラーで、ContosoExpenses.Core プロジェクトの [ビュー] フォルダーを展開し、ExpenseDetail.xaml ファイルをダブルクリックします。

  2. XAML ファイルの先頭近くにある Window 要素に、次の属性を追加します。 これにより、InkCanvas でラップされた UWP コントロールの XAML 名前空間が参照されるようになります。

    xmlns:toolkit="clr-namespace:Microsoft.Toolkit.Wpf.UI.Controls;assembly=Microsoft.Toolkit.Wpf.UI.Controls"

    Window 要素は、この属性の追加後、次のようになります。

    <Window x:Class="ContosoExpenses.Views.ExpenseDetail"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:toolkit="clr-namespace:Microsoft.Toolkit.Wpf.UI.Controls;assembly=Microsoft.Toolkit.Wpf.UI.Controls"
        xmlns:converters="clr-namespace:ContosoExpenses.Converters"
        DataContext="{Binding Source={StaticResource ViewModelLocator}, Path=ExpensesDetailViewModel}"
        xmlns:local="clr-namespace:ContosoExpenses"
        mc:Ignorable="d"
        Title="Expense Detail" Height="500" Width="800"
        Background="{StaticResource HorizontalBackground}">

  3. ExpenseDetail.xaml ファイルで、<!-- Chart --> の直前にある </Grid> 終了タグを探します。 次の XAML を、</Grid> 終了タグの直前に追加します。 この XAML により (前に名前空間として定義した toolkit キーワードで始まる) InkCanvas コントロールと、コントロールのヘッダーとして機能する単純な TextBlock が追加されます。

    <TextBlock Text="Signature:" FontSize="16" FontWeight="Bold" Grid.Row="5" />

<toolkit:InkCanvas x:Name="Signature" Grid.Row="6" />

  4. ExpenseDetail.xaml ファイルを保存します。

  5. F5 キーを押して、デバッガーでアプリを実行します。

  6. 一覧から従業員を選択し、使用可能な経費の 1 つを選択します。 経費詳細ページに、InkCanvas コントロール用の領域が用意されたことに注目してください。

    Ink Canvas pen only

    デジタル ペンをサポートする Surface などのデバイスがあり、この演習を物理マシンで実行している場合は、このままそれの使用を継続してください。 画面にデジタル インクが表示されます。 ペン対応のデバイスを使用しておらず、ご自分のマウスで署名しようとしている場合は、何も起こりません。 これは、InkCanvas コントロールがデジタル ペンに対してのみ既定で有効になるためです。 ただし、この動作は変更できます。

  7. アプリを閉じ、ContosoExpenses.Core プロジェクトの [参照] フォルダーの下の ExpenseDetail.xaml.cs ファイルをダブルクリックします。

  8. このクラスの上部に、次の名前空間宣言を追加します。

    using Microsoft.Toolkit.Win32.UI.Controls.Interop.WinRT;

  9. ExpenseDetail() コンストラクターを探します。

  10. InitializeComponent() メソッドの後に次のコード行を追加し、コード ファイルを保存します。

    Signature.InkPresenter.InputDeviceTypes = CoreInputDeviceTypes.Mouse | CoreInputDeviceTypes.Pen;

    InkPresenter オブジェクトを使用して、既定のインク エクスペリエンスをカスタマイズできます。 このコードでは、InputDeviceTypes プロパティを使用して、マウスおよびペン入力を有効にします。

  11. F5 キーを再度押して、デバッガーでアプリをリビルドして実行します。 一覧から従業員を選択し、使用可能な経費の 1 つを選択します。

  12. マウスで署名スペースに何かを描画してみましょう。 今回は画面にインクが表示されます。

    Screenshot of the Expense Detail showing the signature space.

次のステップ

このチュートリアルのこの時点では、Contoso の経費アプリに UWP InkCanvas コントロールが追加されています。 これで、「パート 3: XAML Islands を使用して UWP CalendarView コントロールを追加する」に進む準備ができました。