Compartir a través de

Parte 2: Incorporación de un control InkCanvas en UWP mediante islas XAML

  • Artículo

Esta es la segunda parte de un tutorial en el que se muestra cómo modernizar una aplicación de escritorio de WPF de ejemplo denominada Contoso Expenses. Para obtener información general sobre el tutorial, los requisitos previos y las instrucciones para descargar la aplicación de ejemplo, consulta Tutorial: modernizar una aplicación de WPF. En este artículo se da por supuesto que ya has completado la parte 1.

En el escenario ficticio de este tutorial, el equipo de desarrollo de Contoso desea agregar compatibilidad con firmas digitales a la aplicación Contoso Expenses. El control InkCanvas de UWP es una opción excelente para este escenario, ya que admite características de entrada de lápiz digital y con tecnología de AI, como la capacidad para reconocer texto y formas. Para ello, usarás el control InkCanvas encapsulado de UWP disponible en el kit de herramientas de la comunidad de Windows. Este control encapsula la interfaz y la funcionalidad del control InkCanvas encapsulado de UWP para su uso en una aplicación de WPF. Para obtener más información sobre los controles encapsulados de UWP, consulta Hospedaje de controles XAML de UWP en aplicaciones de escritorio (islas XAML).

Configuración del proyecto para usar islas XAML

Antes de poder agregar un control InkCanvas a la aplicación Contoso Expenses, primero debes configurar el proyecto para que admita islas XAML de UWP.

  1. En Visual Studio 2019, haz clic con el botón derecho en el proyecto ContosoExpenses.Core en el Explorador de soluciones y elige Administrar paquetes NuGet.

    Menú Administrar paquetes NuGet en Visual Studio

  2. En la ventana Administrador de paquetes NuGet, haz clic en Examinar. Busca el paquete Microsoft.Toolkit.Wpf.UI.Controls e instala la versión 6.0.0 o una versión posterior.

    Nota

    Este paquete contiene toda la infraestructura necesaria para hospedar islas XAML de UWP en una aplicación de WPF, incluido el control InkCanvas encapsulado de UWP. Un paquete similar denominado Microsoft.Toolkit.Forms.UI.Controls está disponible para las aplicaciones de Windows Forms.

  3. Haga clic con el botón derecho en el proyecto ContosoExpenses.Core en el Explorador de soluciones y elija Agregar -> Nuevo elemento.

  4. Selecciona Archivo de manifiesto de aplicación, asígnale el nombre app.manifest y haz clic en Agregar. Para obtener más información sobre los manifiestos de aplicación, consulta este artículo.

  5. En el archivo de manifiesto, quita la marca de comentario del siguiente elemento <supportedOS> para Windows 10.

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

  6. En el archivo de manifiesto, busca el siguiente 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. Elimina esta sección y sustitúyela por el siguiente código XML. De esta forma, se configura la aplicación para que sea compatible con PPP y controle mejor factores de escalado diferentes compatibles con 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. Guarda y cierra el archivo app.manifest.

  9. En el Explorador de soluciones, haz clic con el botón derecho en el proyecto ContosoExpenses.Core y elige Propiedades.

  10. En la sección Recursos de la pestaña Aplicación, asegúrate de que el menú desplegable Manifiesto está establecido en app.manifest.

    Manifiesto de la aplicación .NET Core

  11. Guarda los cambios en las propiedades del proyecto.

Adición de un control InkCanvas a la aplicación

Ahora que has configurado el proyecto para que use islas XAML de UWP, ya puedes agregar un control encapsulado de UWP InkCanvas a la aplicación.

  1. En el Explorador de soluciones, expande la carpeta Vistas del proyecto ContosoExpenses.Core y haz doble clic en el archivo ExpenseDetail.xaml.

  2. En el elemento Ventana situado cerca de la parte superior del archivo XAML, agrega el atributo siguiente. Esto hace referencia al espacio de nombres de XAML para el control encapsulado de UWP InkCanvas.

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

    Después de agregar este atributo, el elemento Ventana debe tener ahora un aspecto como este.

    <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. En el archivo ExpenseDetail.xaml, busca la etiqueta de cierre </Grid> que precede inmediatamente al comentario <!-- Chart -->. Agrega el siguiente código XAML justo delante de la etiqueta de cierre </Grid>. Este código XAML agrega un control InkCanvas (precedido por la palabra clave toolkit definida anteriormente como un espacio de nombres) y una clase TextBlock sencilla que actúa como encabezado del control.

    <TextBlock Text="Signature:" FontSize="16" FontWeight="Bold" Grid.Row="5" />

<toolkit:InkCanvas x:Name="Signature" Grid.Row="6" />

  4. Guarda el archivo ExpenseDetail.xaml.

  5. Presiona F5 para ejecutar la aplicación en el depurador.

  6. Elige un empleado en la lista y, a continuación, selecciona alguno de los gastos disponibles. Observa que la página de detalles de gastos contiene espacio para el control InkCanvas.

    InkCanvas solo para lápiz

    Si tienes un dispositivo que admite un lápiz digital, como Surface, y ejecutas este laboratorio en un equipo físico, continúa e intenta usarlo. Verás que la entrada de lápiz digital aparece en la pantalla. Sin embargo, si no tienes un dispositivo compatible con el lápiz e intentas iniciar sesión con el mouse, no ocurrirá nada. Esto sucede porque el control InkCanvas está habilitado solo para los lápices digitales de forma predeterminada. Sin embargo, podemos cambiar este comportamiento.

  7. Cierra la aplicación y haz doble clic en el archivo ExpenseDetail.xaml.cs en la carpeta Vistas del proyecto ContosoExpenses.Core.

  8. Agrega la siguiente declaración de espacio de nombres en la parte superior de la clase:

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

  9. Busca el constructor ExpenseDetail().

  10. Agrega la siguiente línea de código después del método InitializeComponent() y guarda el archivo de código.

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

    Puedes usar el objeto InkPresenter para personalizar la experiencia de entrada manuscrita predeterminada. Este código usa la propiedad InputDeviceTypes para habilitar el mouse, así como la entrada manuscrita.

  11. Vuelve a presionar F5 para volver a compilar y ejecutar la aplicación en el depurador. Elige un empleado en la lista y, a continuación, selecciona alguno de los gastos disponibles.

  12. Ahora intenta dibujar algo en el espacio de la firma con el mouse. Esta vez, verás que la entrada de lápiz aparece en la pantalla.

    Captura de pantalla del Detalle de gastos que muestra el espacio de la firma.

Pasos siguientes

En este punto del tutorial, has agregado correctamente un control encapsulado de UWP InkCanvas a la aplicación Contoso Expenses. Ahora ya estás listo para continuar con la Parte 3: Incorporación de un control CalendarView en UWP mediante islas XAML.