Deel 2: Een UWP InkCanvas-besturingselement toevoegen met behulp van XAML-eilanden

Dit is het tweede deel van een tutorial die laat zien hoe u een voorbeeld WPF-bureaublad-app genaamd Contoso Expenses kunt moderniseren. Zie Zelfstudie: Een WPF-app moderniserenvoor een overzicht van de zelfstudie, vereisten en instructies voor het downloaden van de voorbeeld-app. In dit artikel wordt ervan uitgegaan dat u deel 1 al hebt voltooid.

In het fictieve scenario van deze zelfstudie wil het Contoso-ontwikkelingsteam ondersteuning voor digitale handtekeningen toevoegen aan de Contoso Expenses-app. Het BEsturingselement UWP InkCanvas is een uitstekende optie voor dit scenario, omdat het digitale inkt- en AI-functies ondersteunt, zoals de mogelijkheid om tekst en vormen te herkennen. Hiervoor gebruikt u het InkCanvas verpakt UWP-besturingselement dat beschikbaar is in de Windows Community Toolkit. Dit besturingselement verpakt de interface en functionaliteit van het UWP-InkCanvas besturingselement voor gebruik in een WPF-app. Voor meer informatie over verpakte UWP-besturingselementen, zie host UWP XAML-besturingselementen in desktop-apps (XAML-eilanden).

Het project configureren voor het gebruik van XAML-eilanden

Voordat u een InkCanvas-besturingselement kunt toevoegen aan de Contoso Expense-app, moet u eerst het project configureren om UWP XAML Islands te ondersteunen.

1. Klik in Visual Studio 2019 met de rechtermuisknop op het project ContosoExpenses.Core in Solution Explorer en kies NuGet-pakketten beheren.

   

2. Klik in het venster NuGet Package Manager op Bladeren.... Zoek het Microsoft.Toolkit.Wpf.UI.Controls pakket en installeer versie 6.0.0 of een nieuwere versie.

   Opmerking

   Dit pakket bevat alle benodigde infrastructuur voor het hosten van UWP XAML-eilanden in een WPF-app, waaronder de InkCanvas omwikkelde UWP-besturing. Er is een vergelijkbaar pakket beschikbaar Microsoft.Toolkit.Forms.UI.Controls voor Windows Forms-apps.

3. Klik met de rechtermuisknop op het project ContosoExpenses.Core in Solution Explorer en kies Toevoegen -> Nieuw item.

4. Selecteer het toepassingsmanifestbestand, geef het app.manifest een naam en klik op Toevoegen. Zie dit artikel voor meer informatie over toepassingsmanifesten.

5. Verwijder in het manifestbestand het commentaar op het volgende <supportedOS> element voor Windows 10.

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

6. Zoek in het manifestbestand het volgende commentaarelement <application>.

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

7. Verwijder deze sectie en vervang deze door de volgende XML. Hiermee configureert u de app om DPI-bewust te zijn en om verschillende schaalfactoren beter af te handelen die worden ondersteund door 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. Sla het bestand app.manifest op en sluit het vervolgens.

9. Klik in Solution Explorer met de rechtermuisknop op het project ContosoExpenses.Core en kies Properties.

10. Controleer in de sectie Resources van het tabblad Toepassing of de vervolgkeuzelijst Manifest is ingesteld op app.manifest.

    

11. Sla de wijzigingen op in de projecteigenschappen.

Een InkCanvas-besturingselement toevoegen aan de app

Nu u uw project hebt geconfigureerd voor het gebruik van UWP XAML Islands, kunt u nu een InkCanvas toevoegen verpakt UWP-besturingselement aan de app.

1. Vouw in Solution Explorer de map Views van het project ContosoExpenses.Core uit en dubbelklik op het bestand ExpenseDetail.xaml .

2. Voeg in het vensterelement boven aan het XAML-bestand het volgende kenmerk toe. Dit verwijst naar de XAML-naamruimte voor het UWP-besturingselement InkCanvas dat is verpakt.

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

   Nadat u dit kenmerk hebt toegevoegd, ziet het venster element er nu als volgt uit.

   <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. Zoek in het bestand ExpenseDetail.xaml de afsluitende </Grid> tag die direct voorafgaat aan de <!-- Chart --> opmerking. Voeg de volgende XAML toe vlak voor de afsluitende </Grid> tag. Met deze XAML voegt u een InkCanvas-besturingselement toe (voorafgegaan door het toolkit trefwoord dat u eerder hebt gedefinieerd als een naamruimte) en een eenvoudige TextBlock die fungeert als koptekst voor het besturingselement.

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

4. Sla het bestand ExpenseDetail.xaml op.

5. Druk op F5 om de app uit te voeren in het foutopsporingsprogramma.

6. Kies een werknemer in de lijst en kies vervolgens een van de beschikbare uitgaven. U ziet dat de onkostendetailpagina ruimte bevat voor het InkCanvas besturingselement.

   

   Als u een apparaat hebt dat ondersteuning biedt voor een digitale pen, zoals een Surface, en u dit lab uitvoert op een fysieke computer, gaat u verder en probeert u het te gebruiken. U ziet dat de digitale inkt op het scherm wordt weergegeven. Als u echter geen apparaat met pen hebt en u probeert te ondertekenen met uw muis, gebeurt er niets. Dit gebeurt omdat het besturingselement InkCanvas standaard alleen is ingeschakeld voor digitale pennen. We kunnen dit gedrag echter wijzigen.

7. Sluit de app en dubbelklik op het ExpenseDetail.xaml.cs bestand onder de map Weergaven van het project ContosoExpenses.Core .

8. Voeg bovenaan de klasse de volgende naamruimtedeclaratie toe:

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

9. Zoek de ExpenseDetail() constructor.

10. Voeg de volgende coderegel toe na de InitializeComponent() methode en sla het codebestand op.

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

    U kunt het InkPresenter-object gebruiken om de standaard inktervaring aan te passen. Deze code maakt gebruik van de eigenschap InputDeviceTypes om muis- en peninvoer in te schakelen.

11. Druk nogmaals op F5 om de app opnieuw te bouwen en uit te voeren in het foutopsporingsprogramma. Kies een werknemer in de lijst en kies vervolgens een van de beschikbare uitgaven.

12. Probeer nu iets te tekenen in de handtekeningruimte met de muis. Deze keer wordt de inkt weergegeven op het scherm.

    

Volgende stappen

Op dit punt in de zelfstudie hebt u met succes een UWP-InkCanvas besturingselement toegevoegd aan de Contoso Expenses-app. U bent nu klaar voor deel 3: Een UWP CalendarView-besturingselement toevoegen met XAML-eilanden.