Поделиться через

Часть 2. Добавление элемента управления UWP InkCanvas с помощью XAML Islands

  • Статья

Это вторая часть учебника, в котором рассматривается модернизация примера классического приложения WPF с именем Contoso Expenses. Общие сведения о руководстве, предварительных требованиях и инструкциях по скачиванию примера приложения см. в руководстве по модернизации приложения WPF. В этой статье предполагается, что вы уже выполнили инструкции из части 1.

В вымышленном сценарии для этого учебника группа разработки компании Contoso хочет добавить в приложение Contoso Expenses поддержку цифровых подписей. Элемент управления UWP InkCanvas будет является отличным выбором для этого сценария, так как он поддерживает функции цифрового рукописного ввода и искусственного интеллекта, например возможность распознавания текста и фигур. Его можно применить в формате заключенного в оболочку элемента управления UWP InkCanvas, который предоставляется в наборе средств сообщества Windows. Этот элемент управления является оболочкой для интерфейса и функциональных возможностей элемента управления UWP InkCanvas, позволяя использовать его в приложении WPF. Подробные сведения о заключенных в оболочку элементах управления UWP см. в статье Элементы управления UWP XAML в классических приложениях (XAML Islands).

Настройка проекта для использования XAML Islands

Прежде чем добавлять элемент управления InkCanvas в приложение Contoso Expenses, необходимо настроить в проекте поддержку XAML Islands для UWP.

  1. В Visual Studio 2019 щелкните правой кнопкой мыши проект ContosoExpenses.Core в обозревателе решений и выберите Управление пакетами NuGet.

    Меню

  2. В окне Диспетчер пакетов NuGet нажмите кнопку Обзор. Найдите пакет Microsoft.Toolkit.Wpf.UI.Controls и установите версию 6.0.0 или более позднюю.

    Примечание.

    Этот пакет содержит всю необходимую инфраструктуру для размещения XAML Islands для UWP в приложении WPF, включая заключенный в оболочку элемент управления UWP InkCanvas. Аналогичный пакет с именем Microsoft.Toolkit.Forms.UI.Controls доступен для приложений Windows Forms.

  3. Щелкните правой кнопкой мыши по проекту ContosoExpenses.Coreв обозревателе решений и выберите Добавить -> Новый элемент.

  4. Выберите файл манифеста приложения, присвойте ему имя app.manifestи нажмите Добавить. Подробные сведения о манифестах приложения см. в этой статье.

  5. В файле манифеста раскомментируйте следующий элемент <supportedOS> для Windows 10.

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

  6. В файле манифеста найдите следующий закомментированный элемент <application>.

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

  7. Удалите этот раздел и замените его приведенным ниже XML-кодом. Этот код включает в приложении поддержку DPI и улучшает обработку некоторых факторов масштабирования, поддерживаемых в 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. Сохраните и закройте файл app.manifest.

  9. В обозревателе решений щелкните правой кнопкой мыши проект ContosoExpenses.Core и выберите Свойства.

  10. В разделе Ресурсы на вкладке Приложение убедитесь, что в раскрывающемся списке Манифест выбрано значение app.manifest.

    Манифест приложения .NET Core

  11. Сохраните изменения в свойствах проекта.

Добавление элемента управления InkCanvas в приложение

Теперь, когда вы настроили в проекте XAML Islands для UWP, вы можете добавить в приложение заключенный в оболочку элемент управления UWP InkCanvas.

  1. В обозревателе решений разверните папку Представления для проекта ContosoExpenses.Core и дважды щелкните файл ExpenseDetail.xaml.

  2. В элемент Window в верхней части XAML-файла добавьте следующий атрибут. Он указывает на пространство имен XAML, в котором находится заключенный в оболочку элемент управления UWP InkCanvas.

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

    Когда вы добавите этот атрибут, элемент Окно будет выглядеть следующим образом.

    <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. В файле ExpenseDetail.xaml найдите закрывающий тег </Grid> прямо перед комментарием <!-- Chart -->. Добавьте следующий XAML-код непосредственно перед этим закрывающим тегом </Grid>. Этот код XAML добавляет элемент управления InkCanvas (с префиксом toolkit, который мы ранее определили как пространство имен), и простой тег TextBlock в качестве заголовка для нашего элемента управления.

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

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

  4. Сохраните файл ExpenseDetail.xaml.

  5. Нажмите клавишу F5, чтобы запустить приложение в отладчике.

  6. Выберите сотрудника из списка, а затем выберите одну из статей расходов. Обратите внимание, что страница сведений о статье расходов содержит место для элемента управления InkCanvas.

    Элемент Ink Canvas только для ввода пером

    Если у вас есть устройство, которое поддерживает цифровое перо, например Surface, и вы выполняете инструкции этого учебника на физическом компьютере, попробуйте использовать это устройство. Вы увидите, что на экране появится цифровая надпись. Если же у вас нет устройства, поддерживающего ввод пером, попытка расписаться с помощью мыши не даст результата. Это связано с тем, что элемент управления InkCanvas по умолчанию включен только для цифровых перьев. Однако мы можем изменить это поведение.

  7. Выберите приложение и дважды щелкните файл ExpenseDetail.xaml.cs в папке Views для проекта ContosoExpenses.Core.

  8. В верхней части класса добавьте следующее объявление пространства имен.

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

  9. Найдите конструктор ExpenseDetail().

  10. Добавьте приведенную ниже строку кода после метода InitializeComponent() и сохраните файл кода.

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

    Вы можете настроить интерфейс рукописного ввода по умолчанию, используя объект InkPresenter. Этот код использует свойство InputDeviceTypes для поддержки мыши в качестве устройства рукописного ввода.

  11. Снова нажмите клавишу F5, чтобы перестроить приложение и открыть его в отладчике. Выберите сотрудника из списка, а затем выберите одну из статей расходов.

  12. Попробуйте нарисовать что-нибудь с помощью мыши в области для подписи. Вы увидите, что теперь на экране появляется цифровая надпись.

    Снимок экрана: окно

Следующие шаги

На этом этапе работы с учебником вы уже добавили элемент управления UWP InkCanvas в приложение Contoso Expenses. Теперь вы готовы к части 3. Добавьте элемент управления CalendarView UWP с помощью XAML Islands.