Parte 2: Adicionar um controle UWP InkCanvas usando ilhas XAML

Esta é a segunda parte de um tutorial que demonstra como modernizar um aplicativo de desktop WPF de exemplo chamado Contoso Expenses. Para obter uma visão geral do tutorial, pré-requisitos e instruções para baixar o aplicativo de exemplo, consulte Tutorial: Modernizar um aplicativo WPF. Este artigo pressupõe que você já concluiu a parte 1.

No cenário fictício deste tutorial, a equipe de desenvolvimento da Contoso deseja adicionar suporte para assinaturas digitais ao aplicativo Contoso Expenditures. O controlo UWP InkCanvas é uma ótima opção para este cenário, pois suporta tinta digital e funcionalidades potenciadas por IA, como a capacidade de reconhecer texto e formas. Para fazer isso, você usará o controle UWP encapsulado InkCanvas disponível no Kit de Ferramentas da Comunidade do Windows. Este controlo encapsula a interface e a funcionalidade do controlo InkCanvas da UWP para uso numa aplicação WPF. Para obter mais detalhes sobre controles UWP encapsulados, consulte Hospedar controles UWP XAML em aplicativos da área de trabalho (Ilhas XAML).

Configurar o projeto para usar XAML Islands

Antes de adicionar um controle de InkCanvas ao aplicativo Contoso Expenditures, primeiro você precisa configurar o projeto para dar suporte a Ilhas XAML UWP.

1. No Visual Studio 2019, clique com o botão direito do rato no projeto ContosoExpenses.Core no Explorador de Soluções e escolha Gerir Pacotes NuGet.

   

2. Na janela Gestor de Pacotes NuGet, clique em Procurar. Procure o pacote e instale a Microsoft.Toolkit.Wpf.UI.Controls versão 6.0.0 ou posterior.

   Observação

   Este pacote contém toda a infraestrutura necessária para hospedar Ilhas UWP XAML numa aplicação WPF, incluindo o controlo UWP encapsulado InkCanvas. Um pacote semelhante chamado Microsoft.Toolkit.Forms.UI.Controls está disponível para aplicativos do Windows Forms.

3. Clique com o botão direito do rato no projeto ContosoExpenses.Core no Gerenciador de Soluções e escolha Adicionar -> Novo Item.

4. Selecione Arquivo de manifesto do aplicativo, nomeie-o app.manifest e clique em Adicionar. Para obter mais informações sobre manifestos de aplicativos, consulte este artigo.

5. No arquivo de manifesto, descomente o seguinte elemento <supportedOS> para Windows 10.

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

6. No arquivo de manifesto, localize o seguinte elemento <application> comentado.

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

7. Exclua esta seção e substitua-a pelo XML a seguir. Isso configura o aplicativo para ter reconhecimento de DPI e lidar melhor com diferentes fatores de dimensionamento suportados pelo 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. Salve e feche o app.manifest arquivo.

9. No Gerenciador de Soluções , clique com o botão direito do mouse no projeto ContosoExpenses.Core e escolha Propriedades .

10. Na secção Recursos do separador Aplicativo, verifique se o menu pendente Manifesto está definido como app.manifest.

    

11. Salve as alterações nas propriedades do projeto.

Adicionar um controle InkCanvas ao aplicativo

Agora que você configurou seu projeto para usar Ilhas XAML UWP, agora está pronto para adicionar um InkCanvas controle UWP encapsulado ao aplicativo.

1. No Explorador de Soluções , expanda a pasta Vistas do projeto ContosoExpenses.Core e clique duas vezes no arquivo ExpenseDetail.xaml.

2. No elemento Window próximo à parte superior do arquivo XAML, adicione o seguinte atributo. Isso faz referência ao namespace XAML para o InkCanvas controle UWP encapsulado.

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

   Depois de adicionar esse atributo, o elemento Window agora deve ter esta aparência.

   <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. No arquivo ExpenseDetail.xaml, localize a tag de fechamento </Grid> que está imediatamente antes do comentário <!-- Chart -->. Adicione o seguinte XAML mesmo antes da marca </Grid> de encerramento. Esse XAML adiciona um controle de InkCanvas (prefixado pelo toolkit palavra-chave que você definiu anteriormente como um namespace) e um TextBlock de simples que atua como um cabeçalho para o controle.

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

4. Salve o arquivo ExpenseDetail.xaml.

5. Pressione F5 para executar o aplicativo no depurador.

6. Escolha um funcionário da lista e, em seguida, escolha uma das despesas disponíveis. Observe que a página de detalhes da despesa contém espaço para o controle InkCanvas.

   

   Se tiver um dispositivo compatível com uma caneta digital, como um Surface, e estiver a executar este laboratório numa máquina física, continue e tente utilizá-lo. Você verá a tinta digital aparecendo na tela. No entanto, se você não tiver um dispositivo compatível com caneta e tentar assinar com o mouse, nada acontecerá. Isso está acontecendo porque o controle InkCanvas está habilitado apenas para canetas digitais por padrão. No entanto, podemos mudar esse comportamento.

7. Feche o aplicativo e clique duas vezes no arquivo ExpenseDetail.xaml.cs na pasta Views do projeto ContosoExpenses.Core.

8. Adicione a seguinte declaração de namespace na parte superior da classe:

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

9. Localize o construtor ExpenseDetail().

10. Adicione a seguinte linha de código após o InitializeComponent() método e salve o arquivo de código.

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

    Você pode usar o objeto InkPresenter para personalizar a experiência padrão de escrita digital. Esse código usa a propriedade InputDeviceTypes para habilitar a entrada por mouse e caneta.

11. Pressione F5 novamente para reconstruir e executar a aplicação no depurador. Escolha um funcionário da lista e, em seguida, escolha uma das despesas disponíveis.

12. Tente agora desenhar algo no espaço de assinatura com o mouse. Desta vez, você verá a tinta aparecendo na tela.

    

Próximos passos

Neste ponto do tutorial, você adicionou com êxito um controle de UWP InkCanvas ao aplicativo Contoso Expenditures. Agora está preparado para Parte 3: Adicionar um controlo UWP de visualização de calendário usando XAML Islands.