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


Начало работы с рукописным вводом в WPF

Windows Presentation Foundation (WPF) имеет функцию рукописного ввода, которая упрощает внедрение цифрового рукописного ввода в приложение.

Необходимые компоненты

Чтобы использовать следующие примеры, сначала установите Visual Studio. Он также помогает узнать, как создавать базовые приложения WPF. Дополнительные справочные сведения о начале работы с WPF см. в разделах Пошаговое руководство. Создание первого классического приложения WPF.

Краткая инструкция

В этом разделе показано, как написать простое приложение WPF, которое собирает рукописный ввод.

У вас есть рукописный ввод?

Чтобы создать приложение WPF, поддерживающее рукописный ввод, выполните следующие действия.

  1. Откройте Visual Studio.

  2. Создание приложения WPF.

    В диалоговом окне Новый проект разверните Установленные>Visual C# или категорию Visual Basic>Windows Desktop. Затем выберите шаблон приложения WPF (платформа .NET Framework). Введите имя, а затем нажмите кнопку ОК.

    Viual Studio создает проект и открывает MainWindow.xaml в конструкторе.

  3. Введите <InkCanvas/> между тегами <Grid>.

    XAML designer with InkCanvas tag

  4. Нажмите клавишу F5 для запуска приложения в отладчике.

  5. Используя перо или мышь, напишите в окне hello world.

Вы написали рукописный эквивалент приложения «hello world» с помощью всего 12 нажатий клавиш!

Улучшение приложения

Давайте воспользуемся некоторыми функциями WPF. Замените все элементы между открывающим и закрывающим тегами <Окна> следующей разметкой:

<Page>
  <InkCanvas Name="myInkCanvas" MouseRightButtonUp="RightMouseUpHandler">
    <InkCanvas.Background>
      <LinearGradientBrush>
        <GradientStop Color="Yellow" Offset="0.0" />
          <GradientStop Color="Blue" Offset="0.5" />
            <GradientStop Color="HotPink" Offset="1.0" />
              </LinearGradientBrush>
    </InkCanvas.Background>
  </InkCanvas>
</Page>

Этот XAML создает фон кисти градиента на поверхности рукописного ввода.

Gradient colors on inking surface in WPF app

Добавление кода в программной части XAML

Хотя XAML значительно упрощает проектирование пользовательского интерфейса, любое реальное приложение должно добавлять код для обработки событий. Ниже приведен простой пример, который увеличивает масштаб рукописного ввода в ответ на щелчок правой кнопкой мыши.

  1. Задайте обработчик MouseRightButtonUp в XAML:

    <InkCanvas Name="myInkCanvas" MouseRightButtonUp="RightMouseUpHandler">
    
  2. В Обозревателе решений разверните узел MainWindow.xaml и откройте файл кода программной части (MainWindow.xaml.cs или MainWindow.xaml.vb). Добавьте следующий код обработчика событий.

    private void RightMouseUpHandler(object sender,
                                     System.Windows.Input.MouseButtonEventArgs e)
    {
        Matrix m = new Matrix();
        m.Scale(1.1d, 1.1d);
        ((InkCanvas)sender).Strokes.Transform(m, true);
    }
    
    Private Sub RightMouseUpHandler(ByVal sender As Object, _
                                    ByVal e As System.Windows.Input.MouseButtonEventArgs)
    
        Dim m As New Matrix()
        m.Scale(1.1, 1.1)
        CType(sender, InkCanvas).Strokes.Transform(m, True)
    
    End Sub
    
  3. Запустите приложение. Добавьте рукописный ввод, а затем щелкните правой кнопкой мыши или выполните эквивалент нажатия и удерживания с помощью пера.

    Экран увеличивается при каждом нажатии правой кнопки мыши.

Использование процедурного кода вместо XAML

Доступ ко всем функциям WPF можно получить из процедурного кода. Выполните следующие действия, чтобы создать приложение Hello Ink World для WPF, которое вообще не использует XAML.

  1. Создайте в Visual Studio новый проект консольного приложения.

    В диалоговом окне Новый проект разверните Установленные>Visual C# или категорию Visual Basic>Windows Desktop. Затем выберите шаблон Консольное приложение (платформа .NET Framework). Введите имя, а затем нажмите кнопку ОК.

  2. Вставьте следующий код в файл Program.cs или Program.vb.

    using System;
    using System.Windows;
    using System.Windows.Controls;
    class Program : Application
    {
        Window win;
        InkCanvas ic;
    
        protected override void OnStartup(StartupEventArgs args)
        {
            base.OnStartup(args);
            win = new Window();
            ic = new InkCanvas();
            win.Content = ic;
            win.Show();
        }
    
        [STAThread]
        static void Main(string[] args)
        {
            new Program().Run();
        }
    }
    
    Imports System.Windows
    Imports System.Windows.Controls
    
    
    Class Program
        Inherits Application
        Private win As Window
        Private ic As InkCanvas
    
    
        Protected Overrides Sub OnStartup(ByVal args As StartupEventArgs)
            MyBase.OnStartup(args)
            win = New Window()
            ic = New InkCanvas()
            win.Content = ic
            win.Show()
    
        End Sub
    
    End Class
    
    Module Module1
    
        Sub Main()
            Dim prog As New Program()
            prog.Run()
    
        End Sub
    
    End Module
    
  3. Добавьте ссылки на сборки PresentationCore, PresentationFramework и WindowsBase, щелкнув правой кнопкой мыши Ссылки в Обозревателе решений и выбрав команду Добавить ссылку.

    Reference Manager showing PresentationCore and PresentationFramework

  4. Создайте приложение, нажав клавишу F5.

См. также