Część 2: Dodawanie kontrolki InkCanvas z UWP przy użyciu XAML Islands

Jest to druga część samouczka, który pokazuje, jak zmodernizować przykładową aplikację klasyczną WPF o nazwie Contoso Expenses. Aby zapoznać się z omówieniem samouczka, wymagań wstępnych i instrukcji dotyczących pobierania przykładowej aplikacji, zobacz Tutorial: Modernize a WPF app. W tym artykule założono, że ukończono już część 1.

W fikcyjnym scenariuszu tego samouczka zespół deweloperów firmy Contoso chce dodać obsługę podpisów cyfrowych do aplikacji Contoso Expenses. Kontrola UWP InkCanvas jest doskonałym rozwiązaniem w tym scenariuszu, ponieważ obsługuje cyfrowe pismo i funkcje oparte na sztucznej inteligencji, takie jak możliwość rozpoznawania tekstu i kształtów. W tym celu użyjesz kontrolki InkCanvas opakowanej UWP dostępnej w zestawie narzędzi Windows Community Toolkit. Ta kontrola opakowuje interfejs i funkcje kontroli UWP InkCanvas do użycia w aplikacji WPF. Aby uzyskać więcej informacji na temat opakowanych kontrolek platformy UWP, zobacz hostowanie kontrolek XAML platformy UWP w aplikacjach klasycznych (wysp XAML).

Konfigurowanie projektu do używania wysp XAML

Przed dodaniem kontrolki InkCanvas do aplikacji Contoso Expenses należy najpierw skonfigurować projekt do obsługi UWP XAML Islands.

1. W programie Visual Studio 2019 kliknij prawym przyciskiem myszy projekt ContosoExpenses.Core w eksploratorze rozwiązań i wybierz Zarządzaj pakietami NuGet.

   menu Zarządzanie pakietami NuGet

2. W oknie menedżera pakietów NuGet kliknij pozycję Przeglądaj. Wyszukaj pakiet Microsoft.Toolkit.Wpf.UI.Controls i zainstaluj wersję 6.0.0 lub nowszą.

   Uwaga / Notatka

   Ten pakiet zawiera całą niezbędną infrastrukturę do hostowania wysp XAML platformy UWP w aplikacji WPF, w tym InkCanvas opakowanej kontrolce platformy UWP. Podobny pakiet o nazwie Microsoft.Toolkit.Forms.UI.Controls jest dostępny dla aplikacji Windows Forms.

3. Kliknij prawym przyciskiem myszy projekt ContosoExpenses.Core w Eksploratorze rozwiązań , a następnie wybierz „Dodaj” — „Nowy element”>.

4. Wybierz plik manifestu aplikacji , nadaj mu nazwę app.manifesti kliknij przycisk Dodaj. Aby uzyskać więcej informacji na temat manifestów aplikacji, zobacz tym artykule.

5. W pliku manifestu usuń komentarz z następującego elementu <supportedOS> dla systemu Windows 10.

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

6. W pliku manifestu znajdź następujący skomentowany element <application>.

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

7. Usuń tę sekcję i zastąp ją następującym kodem XML. Pozwala to skonfigurować aplikację tak, aby uwzględniała dpi i lepiej obsługiwała różne czynniki skalowania obsługiwane przez system 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. Zapisz i zamknij plik app.manifest.

9. W eksploratorze rozwiązań kliknij prawym przyciskiem myszy projekt ContosoExpenses.Core i wybierz Właściwości.

10. W sekcji zasoby na karcie aplikacji upewnij się, że lista rozwijana manifestu jest ustawiona na app.manifest.

    

11. Zapisz zmiany we właściwościach projektu.

Dodawanie kontrolki InkCanvas do aplikacji

Po skonfigurowaniu projektu do używania wysp XAML platformy UWP możesz teraz dodać InkCanvas opakowaną kontrolkę platformy UWP do aplikacji.

1. W eksploratorze rozwiązań rozwiń folder widoki projektu ContosoExpenses.Core i kliknij dwukrotnie plik ExpenseDetail.xaml.

2. W elemencie okna , znajdującym się w górnej części pliku XAML, dodaj następujący atrybut. Odwołuje się to do przestrzeni nazw XAML dla InkCanvas opakowanej kontrolki platformy UWP.

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

   Po dodaniu tego atrybutu element Window powinien teraz wyglądać następująco.

   <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. W pliku ExpenseDetail.xaml znajdź tag zamykający , który bezpośrednio poprzedza komentarz . Dodaj następujący kod XAML tuż przed tagiem zamykającym </Grid>. Ten kod XAML dodaje kontrolkę InkCanvas (poprzedzoną prefiksem zestawu narzędzi zdefiniowanym wcześniej jako przestrzeń nazw) oraz prostą TextBlock, która działa jako nagłówek kontrolki.

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

4. Zapisz plik ExpenseDetail.xaml.

5. Naciśnij F5, aby uruchomić aplikację w debugerze.

6. Wybierz pracownika z listy, a następnie wybierz jeden z dostępnych wydatków. Zwróć uwagę, że strona szczegółów wydatków zawiera przestrzeń dla kontrolki InkCanvas.

   

   Jeśli masz urządzenie, które obsługuje pióro cyfrowe, takie jak Surface, i uruchamiasz to laboratorium na fizycznej maszynie, przejdź dalej i spróbuj go użyć. Na ekranie pojawi się cyfrowy atrament. Jeśli jednak nie masz urządzenia obsługującego pióro i spróbujesz podpisać się myszą, nic się nie stanie. Dzieje się tak, ponieważ kontrolka InkCanvas jest domyślnie włączona tylko dla piór cyfrowych. Możemy jednak zmienić to zachowanie.

7. Zamknij aplikację i kliknij dwukrotnie plik ExpenseDetail.xaml.cs w folderze Views projektu ContosoExpenses.Core.

8. Dodaj następującą deklarację przestrzeni nazw w górnej części klasy:

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

9. Znajdź konstruktor ExpenseDetail().

10. Dodaj następujący wiersz kodu po metodzie InitializeComponent() i zapisz plik kodu.

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

    Obiektu InkPresenter możesz użyć, aby dostosować domyślne doświadczenie pisma odręcznego. Ten kod używa właściwości InputDeviceTypes w celu włączenia myszy, a także wprowadzania pióra.

11. Ponownie naciśnij F5, aby ponownie skompilować i uruchomić aplikację w debugerze. Wybierz pracownika z listy, a następnie wybierz jeden z dostępnych wydatków.

12. Spróbuj teraz narysować coś w przestrzeni podpisu myszą. Tym razem na ekranie pojawi się atrament.

    

Dalsze kroki

W tym momencie w samouczku pomyślnie dodano platformy UWP kontrolki InkCanvas do aplikacji Contoso Expenses. Teraz jesteś gotowy na część 3: Dodaj kontrolkę CalendarView platformy UWP używając wysp XAML.