Parte 2: Aggiungere un controllo InkCanvas UWP tramite le isole XAML

Questa è la seconda parte di un'esercitazione che illustra come modernizzare un'app desktop WPF di esempio denominata Contoso Expenses. Per una panoramica dell'esercitazione, dei prerequisiti e delle istruzioni per il download dell'app di esempio, vedere Esercitazione: Modernizzare un'app WPF. Questo articolo presuppone che tu abbia già completato la parte 1.

Nello scenario fittizio di questa esercitazione, il team di sviluppo di Contoso vuole aggiungere il supporto per le firme digitali all'app Contoso Expenses. Il controllo InkCanvas UWP è un'ottima opzione per questo scenario, perché supporta l'input digitale e le funzionalità basate su intelligenza artificiale, ad esempio la capacità di riconoscere testo e forme. A tale scopo, userai il controllo UWP incapsulato InkCanvas disponibile nel Toolkit della community di Windows. Questo controllo esegue il wrapping dell'interfaccia e della funzionalità del controllo InkCanvas UWP per l'uso in un'app WPF. Per altri dettagli sui controlli UWP incapsulati, vedi Ospitare controlli XAML UWP nelle app desktop (isole XAML).

Configurare il progetto per l'uso di isole XAML

Prima di poter aggiungere un controllo InkCanvas all'app Contoso Expenses, devi configurare il progetto per il supporto delle isole XAML UWP.

1. In Visual Studio 2019, fai clic con il pulsante destro del mouse sul progetto ContosoExpenses.Core in Esplora soluzioni e scegli Gestisci pacchetti NuGet.

   

2. Nella finestra Gestione pacchetti NuGet fai clic su Sfoglia. Cerca il pacchetto Microsoft.Toolkit.Wpf.UI.Controls e installa la versione 6.0.0 o successiva.

   Nota

   Questo pacchetto contiene tutte le infrastrutture necessarie per l'hosting di isole XAML UWP in un'app WPF, inclusi i controlli UWP incapsulati InkCanvas. Un pacchetto simile denominato Microsoft.Toolkit.Forms.UI.Controls è disponibile per le app Windows Forms.

3. Fare clic con il pulsante destro del mouse sul progetto ContosoExpenses.Core in Esplora soluzioni e scegliere Aggiungi -> Nuovo elemento.

4. Seleziona il file manifesto dell'applicazione, denominalo app.manifeste fai clic su Aggiungi. Per altre informazioni sui manifesti dell'applicazione, vedi questo articolo.

5. Nel file manifesto rimuovi il commento dall'elemento <supportedOS> seguente per Windows 10.

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

6. Nel file manifesto individua l'elemento <application> commentato seguente.

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

7. Elimina questa sezione e sostituiscila con il codice XML seguente. Questo consente di configurare l'applicazione in modo che sia compatibile con DPI e di gestire meglio i diversi fattori di scalabilità supportati da 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. Salva e chiude il file app.manifest.

9. In Esplora soluzioni fai clic con il pulsante destro del mouse sul progetto ContosoExpenses.Core e scegli Proprietà.

10. Nella sezione Risorse della scheda Applicazione verifica che l'elenco a discesa Manifesto sia impostato su app.manifest.

    

11. Salva le modifiche apportate alle proprietà del progetto.

Aggiungere un controllo InkCanvas all'app

Ora che hai configurato il progetto per l'uso delle isole XAML UWP, puoi aggiungere all'app i controlli UWP incapsulati InkCanvas.

1. In Esplora soluzioni espandi la cartella Viste del progetto ContosoExpenses.Core e fai doppio clic sul file ExpenseDetail.xaml.

2. Nell'elemento Window accanto alla parte superiore del file XAML aggiungi l'attributo seguente, Questo fa riferimento allo spazio dei nomi XAML per i controlli UWP incapsulati InkCanvas.

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

   Dopo l'aggiunta di questo attributo, l'elemento Window dovrebbe essere simile al seguente.

   <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. Nel file ExpenseDetail.xaml individua il tag di chiusura </Grid> che precede immediatamente il commento <!-- Chart -->. Aggiungi il codice XAML seguente immediatamente prima del tag di chiusura </Grid>. Questo codice XAML aggiunge un controllo InkCanvas (preceduto dalla parola chiave toolkit definita in precedenza come uno spazio dei nomi) e un TextBlock semplice che funge da intestazione per il controllo.

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

4. Salva il file ExpenseDetail.xaml.

5. Premi F5 per eseguire l'app nel debugger.

6. Seleziona un dipendente dall'elenco e quindi scegli una spesa tra quelle disponibili. Nota che la pagina dei dettagli delle spese contiene spazio per il controllo InkCanvas.

   

   Se hai un dispositivo che supporta una penna digitale, ad esempio Surface, e stai eseguendo il Lab su un computer fisico, continua e prova a usarlo. Vedrai l'input digitale sullo schermo. Se tuttavia non hai un dispositivo con supporto per la penna e provi a firmare con il mouse, non accadrà nulla. Questa situazione si verifica perché il controllo InkCanvas è abilitato solo per le penne digitali per impostazione predefinita. Questo comportamento può tuttavia essere modificato.

7. Chiudi l'app e fai doppio clic sul file ExpenseDetail.xaml.cs nella cartella Viste del progetto ContosoExpenses.Core.

8. Aggiungi la dichiarazione di spazio dei nomi seguente all'inizio della classe:

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

9. Individua il costruttore ExpenseDetail().

10. Aggiungi la riga di codice seguente dopo il metodo InitializeComponent() e salva il file di codice.

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

    Puoi usare l'oggetto InkPresenter per personalizzare l'esperienza di input penna predefinita. Questo codice usa la proprietà InputDeviceTypes per abilitare il mouse e l'input penna.

11. Premi di nuovo F5 per ricompilare ed eseguire l'app nel debugger. Seleziona un dipendente dall'elenco e quindi scegli una spesa tra quelle disponibili.

12. Ora prova a tracciare qualcosa nello spazio di firma con il mouse. Questa volta vedrai l'input sullo schermo.

    

Passaggi successivi

A questo punto dell'esercitazione hai aggiunto correttamente un controllo InkCanvas UWP all'app Contoso Expenses. Ora sei pronto per la Parte 3: Aggiungere un controllo CalendarView UWP tramite le isole XAML.