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

Статья
08/11/2011

Включение цифровых рукописных данных в приложения стало проще, чем когда-либо. Рукописные данные развились от дополнения к COM и методу программирования Windows Forms до достижения полной интеграции в WPF. Устанавливать отдельные пакеты SDK или библиотеки времени выполнения не требуется.

Предварительные требования

Для использования следующих примеров необходимо сначала установить Microsoft Visual Studio 2005 и Windows SDK. Также следует понимать порядок написания приложений для WPF. Дополнительные сведения о начале работы с WPF см. в разделе Пошаговое руководство. Начало работы с WPF.

Быстрое руководство

Этот раздел помогает написать простое приложение WPF для сбора данных рукописного ввода.

Установите Microsoft Visual Studio 2005 и Windows Software Development Kit (SDK), если это еще не сделано. Обычно приложения WPF перед просмотром должны быть скомпилированы, даже если они состоят только из Extensible Application Markup Language (XAML). Однако Windows Software Development Kit (SDK) включает приложение XamlPad, созданное для ускорения процесса реализации пользовательского интерфейса на основе XAML. Это приложение можно использовать для просмотра и ознакомления с несколькими первыми примерами данного документа. Процесс создания компилируемых приложений из XAML рассматривается далее в этом документе.

Чтобы запустить XAMLPad, нажмите кнопку Пуск, а затем последовательно выберите команды Все программы, Microsoft Windows SDK, Средства и XAMLPad. В области отрисовки XAMLPad отображается визуализация кода XAML, написанного в области кода. Можно редактировать код XAML, и изменения сразу отражаются в области отрисовки.

Есть рукописные данные?

Чтобы запустить первое приложение WPF с поддержкой рукописного ввода:

Откройте Microsoft Visual Studio 2005
Создать новое Приложение Windows (WPF)
Введите <InkCanvas/> между тегами <Grid>
Нажмите клавишу F5 для запуска приложения в отладчике
Используя перо или мышь, напишите Hello world в окне

Вы написали рукописный эквивалент приложения "Hello world" нажатием всего 12 клавиш!

Добавьте изюминку в приложение

Воспользуемся преимуществами некоторых возможностей WPF. Замените все содержимое между открывающим <Window> и закрывающим </Window> тегами следующей разметкой, чтобы получить градиентный фон поверхности рукописного ввода.

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


...


</Page>

Использование анимации

Давайте развлечемся анимацией цветов кисти градиента. Добавьте следующий код XAML после закрывающего тега </InkCanvas>, но перед закрывающим тегом </Page>.

<Page.Triggers>
  <EventTrigger RoutedEvent="Page.Loaded">
    <EventTrigger.Actions>
      <BeginStoryboard>
        <Storyboard RepeatBehavior="Forever" AutoReverse="True">
          <ColorAnimation  Storyboard.TargetName="myInkCanvas"
          Storyboard.TargetProperty=
            "(InkCanvas.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)"
          From="Yellow" To="Blue" Duration="0:0:5"/>
          <ColorAnimation Storyboard.TargetName="myInkCanvas"
          Storyboard.TargetProperty=
            "(InkCanvas.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)"
          From="Blue" To="Red" Duration="0:0:5"/>
          <ColorAnimation Storyboard.TargetName="myInkCanvas"
          Storyboard.TargetProperty=
            "(InkCanvas.Background).(LinearGradientBrush.GradientStops)[2].(GradientStop.Color)"
          From="Green" To="Blue" Duration="0:0:5"/>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger.Actions>
  </EventTrigger>
</Page.Triggers>

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

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

Установите обработчик MouseRightButtonUp в XAML:

<InkCanvas Name="myInkCanvas" MouseRightButtonUp="RightMouseUpHandler">

В обозревателе решений Visual Studio разверните Windows1.xaml и откройте файл кода программной части Window1.xaml.cs или Window1.xaml.vb, если используется Visual Basic. Добавьте следующий код обработчика событий:

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 'RightMouseUpHandler

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);
}

Теперь запустите приложение. Добавьте рукописные данные и щелкните правой кнопкой мыши или выполните эквивалентное нажатие и удерживание с помощью пера.

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

Можно получить доступ ко всем возможностям WPF из процедурного кода. Вот приложение "Hello Ink World" для WPF, которое вообще не использует XAML. Вставьте следующий код в пустое консольное приложение в Visual Studio. Добавьте ссылки на сборки PresentationCore, PresentationFramework и WindowsBase и постройте приложение нажатием клавиши F5:

Imports System
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 'OnStartup

End Class 'Program

Module Module1

    Sub Main()
        Dim prog As New Program()
        prog.Run()

    End Sub

End Module

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();
    }
}