Bagian 2: Menambahkan kontrol UWP InkCanvas menggunakan Kepulauan XAML

Ini adalah bagian kedua dari tutorial yang menunjukkan cara memodernisasi sampel aplikasi desktop WPF bernama Contoso Expenses. Untuk gambaran umum tutorial, prasyarat, dan instruksi untuk mengunduh aplikasi sampel, lihat Tutorial: Memodernisasi aplikasi WPF. Artikel ini mengasumsikan Anda telah menyelesaikan bagian 1.

Dalam skenario fiktif tutorial ini, tim pengembangan Contoso ingin menambahkan dukungan untuk tanda tangan digital ke aplikasi Contoso Expenses. Kontrol UWP InkCanvas adalah opsi yang bagus untuk skenario ini, karena mendukung tinta digital dan fitur bertenaga AI seperti kemampuan untuk mengenali teks dan bentuk. Untuk melakukan ini, Anda akan menggunakan kontrol UWP terbungkus InkCanvas yang tersedia di Windows Community Toolkit. Kontrol ini membungkus antarmuka dan fungsionalitas kontrol UWP InkCanvas untuk digunakan dalam aplikasi WPF. Untuk detail selengkapnya tentang kontrol UWP yang dibungkus, lihat Kontrol host UWP XAML di aplikasi desktop (Kepulauan XAML).

Mengonfigurasi proyek untuk menggunakan Kepulauan XAML

Sebelum Anda dapat menambahkan kontrol InkCanvas ke aplikasi Contoso Expenses, Anda harus terlebih dahulu mengonfigurasi proyek untuk mendukung Kepulauan XAML UWP.

1. Di Visual Studio 2019, klik kanan proyek ContosoExpenses.Core di Penjelajah Solusi dan pilih Kelola Paket NuGet.

   

2. Di jendela Manajer Paket NuGet, klik Telusuri. Cari Microsoft.Toolkit.Wpf.UI.Controls paket dan instal versi 6.0.0 atau versi yang lebih baru.

   Catatan

   Paket ini berisi semua infrastruktur yang diperlukan untuk menghosting Kepulauan XAML UWP dalam aplikasi WPF, termasuk kontrol UWP yang dibungkus InkCanvas . Paket serupa bernama Microsoft.Toolkit.Forms.UI.Controls tersedia untuk aplikasi Formulir Windows.

3. Klik kanan proyek ContosoExpenses.Core di Penjelajah Solusi dan pilih Tambahkan -> Item baru.

4. Pilih File Manifes Aplikasi, beri nama app.manifest, dan klik Tambahkan. Untuk informasi selengkapnya tentang manifes aplikasi, lihat artikel ini.

5. Dalam file manifes, batalkan komentar elemen berikut <supportedOS> untuk Windows 10.

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

6. Dalam file manifes, temukan elemen yang dikomentari <application> berikut.

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

7. Hapus bagian ini dan ganti dengan XML berikut. Ini mengonfigurasi aplikasi untuk menjadi sadar DPI dan lebih baik menangani faktor penskalaan yang berbeda yang didukung oleh 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. Simpan dan tutup app.manifest file.

9. Di Penjelajah Solusi, klik kanan proyek ContosoExpenses.Core dan pilih Properti.

10. Di bagian Sumber Daya pada tab Aplikasi , pastikan dropdown Manifes diatur ke app.manifest.

    

11. Simpan perubahan ke properti proyek.

Menambahkan kontrol InkCanvas ke aplikasi

Setelah mengonfigurasi proyek untuk menggunakan UWP XAML Islands, Anda sekarang siap untuk menambahkan kontrol UWP yang dibungkus InkCanvas ke aplikasi.

1. Di Penjelajah Solusi, perluas folder Tampilan proyek ContosoExpenses.Core dan klik dua kali file ExpenseDetail.xaml.

2. Di elemen Window di dekat bagian atas file XAML, tambahkan atribut berikut. Ini mereferensikan namespace XAML untuk kontrol UWP yang dibungkus InkCanvas .

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

   Setelah menambahkan atribut ini, elemen Window sekarang akan terlihat seperti ini.

   <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. Dalam file ExpenseDetail.xaml, temukan tag penutup </Grid> yang segera mendahului <!-- Chart --> komentar. Tambahkan XAML berikut tepat sebelum tag penutup </Grid> . XAML ini menambahkan kontrol InkCanvas (diawali oleh kata kunci toolkit yang Anda tentukan sebelumnya sebagai namespace layanan) dan TextBlock sederhana yang bertindak sebagai header untuk kontrol.

   <TextBlock Text="Signature:" FontSize="16" FontWeight="Bold" Grid.Row="5" />
   
   <toolkit:InkCanvas x:Name="Signature" Grid.Row="6" />
   

4. Simpan file ExpenseDetail.xaml.

5. Tekan F5 untuk menjalankan aplikasi di debugger.

6. Pilih karyawan dari daftar lalu pilih salah satu pengeluaran yang tersedia. Perhatikan bahwa halaman detail pengeluaran berisi ruang untuk kontrol InkCanvas .

   

   Jika Anda memiliki perangkat yang mendukung pena digital, seperti Surface, dan Anda menjalankan lab ini pada mesin fisik, lanjutkan dan coba gunakan. Anda akan melihat tinta digital muncul di layar. Namun, jika Anda tidak memiliki perangkat berkemampuan pena dan mencoba menandatangani dengan mouse Anda, tidak ada yang akan terjadi. Ini terjadi karena kontrol InkCanvas diaktifkan hanya untuk pena digital secara default. Namun, kita dapat mengubah perilaku ini.

7. Tutup aplikasi dan klik dua kali file ExpenseDetail.xaml.cs di bawah folder Tampilan proyek ContosoExpenses.Core.

8. Tambahkan deklarasi namespace berikut di bagian atas kelas:

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

9. ExpenseDetail() Temukan konstruktor.

10. Tambahkan baris kode berikut setelah InitializeComponent() metode dan simpan file kode.

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

    Anda dapat menggunakan objek InkPresenter untuk menyesuaikan pengalaman penintaan default. Kode ini menggunakan properti InputDeviceTypes untuk mengaktifkan mouse serta input pena.

11. Tekan F5 lagi untuk membangun kembali dan menjalankan aplikasi di debugger. Pilih karyawan dari daftar lalu pilih salah satu pengeluaran yang tersedia.

12. Coba sekarang untuk menggambar sesuatu di ruang tanda tangan dengan mouse. Kali ini, Anda akan melihat tinta muncul di layar.

    

Langkah berikutnya

Pada titik ini dalam tutorial, Anda telah berhasil menambahkan kontrol UWP InkCanvas ke aplikasi Contoso Expenses. Anda sekarang siap untuk Bagian 3: Tambahkan kontrol UWP CalendarView menggunakan Kepulauan XAML.