Ввод текста с помощью окна рукописного ввода

Замечание

Представление рукописного ввода не поддерживается текстовыми элементами управления в WinUI 3 в Windows App SDK. Эта статья относится только к приложениям UWP.

Текстовое поле разворачивается при нажатии пера

Настройте представление рукописного ввода (для рукописного ввода в текст), встроенное в элементы управления вводом текста UWP, такие как TextBox, RichEditBox и AutoSuggestBox.

Обзор

Элементы управления вводом текста UWP поддерживают ввод пера с помощью Windows Ink, преобразуя текстовое поле в поверхность для рукописного ввода, когда пользователь касается текстового поля пером.

Текст распознается как пользователь записывает в любом месте области рукописного ввода, пока в окне кандидата отображаются результаты распознавания. Пользователь может коснуться результата, чтобы выбрать его, или продолжить писать, чтобы принять предлагаемого кандидата. Результаты посимвольного распознавания включены в список предложенных вариантов, поэтому распознавание не ограничивается словами из словаря. При написании пользователем принятые текстовые данные преобразуются в шрифт скрипта, который сохраняет ощущение естественной записи.

Замечание

Представление рукописного ввода включено по умолчанию, но можно отключить его для каждого элемента управления и переключиться обратно на текстовую панель ввода.

Текстовое поле с рукописным вводом и предложениями

Пользователь может изменить текст с помощью стандартных жестов и действий:

зачеркивать или перечеркивать - проводите линию через текст, чтобы удалить слово или часть слова
соединить — чертить дугу между словами, чтобы удалить пробел между ними
вставка — рисование символа курсора для вставки пробела
перезапись — запись поверх существующего текста для его замены

Текстовое поле с коррекцией рукописного ввода

Отключите представление рукописного ввода

Встроенное представление рукописного ввода включено по умолчанию.

Может потребоваться отключить представление рукописного ввода, если вы уже предоставили эквивалентную функциональность рукописного ввода в приложении, или ваш интерфейс ввода текста зависит от какого-либо форматирования или специального символа (например, вкладки), недоступного с помощью рукописного ввода.

В этом примере мы отключаем представление рукописного ввода, задав свойству IsHandwritingViewEnabled элемента управления TextBox значение false. Все текстовые элементы управления, поддерживающие представление рукописного ввода, поддерживают аналогичное свойство.

<TextBox Name="SampleTextBox"
    Height="50" Width="500" 
    FontSize="36" FontFamily="Segoe UI" 
    PlaceholderText="Try taping with your pen" 
    IsHandwritingViewEnabled="False">
</TextBox>

Укажите выравнивание отображения рукописного текста

Представление рукописного ввода размещается над основным элементом управления текстом и имеет размер, соответствующий предпочтениям пользователя для ввода рукописи (см. раздел Настройки -> Bluetooth и устройства -> Перо и Windows Ink -> Рукописный ввод -> Размер шрифта). Вид также автоматически выравнивается по отношению к элементу управления текстом и его расположению в приложении.

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

В следующем фрагменте кода показано, как использовать свойство PlacementAlignment объекта TextBox HandwritingView , чтобы указать, какая привязка в базовом элементе управления текстом используется для выравнивания представления рукописного ввода.

<TextBox Name="SampleTextBox"
    Height="50" Width="500" 
    FontSize="36" FontFamily="Segoe UI" 
    PlaceholderText="Try taping with your pen">
        <TextBox.HandwritingView>
            <HandwritingView PlacementAlignment="TopLeft"/>
        </TextBox.HandwritingView>
</TextBox>

Отключите варианты автодополнения

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

Если ваше приложение уже предоставляет надёжные специальные функции распознавания, можно использовать свойство AreCandidatesEnabled для отключения встроенных предложений, как показано в следующем примере.

<TextBox Name="SampleTextBox"
    Height="50" Width="500" 
    FontSize="36" FontFamily="Segoe UI" 
    PlaceholderText="Try taping with your pen">
        <TextBox.HandwritingView>
            <HandwritingView AreCandidatesEnabled="False"/>
        </TextBox.HandwritingView>
</TextBox>

Использование настроек шрифта рукописного ввода

Пользователь может выбрать коллекцию шрифтов на основе рукописного ввода для использования при отрисовке текста на основе распознавания рукописного ввода (см. раздел Параметры -> Bluetooth и устройства -> Перо и Windows Ink -> Рукописный ввод -> Шрифт).

Приложение может получить доступ к этому параметру и использовать выбранный шрифт для распознанного текста в элементе управления текстом.

В этом примере мы прослушиваем событие TextChanged текстового поля и применяем выбранный шрифт пользователя, если изменение текста произошло из рукописного представления (или шрифта по умолчанию, если нет).

private void SampleTextBox_TextChanged(object sender, TextChangedEventArgs e)
{
    ((TextBox)sender).FontFamily = 
        ((TextBox)sender).HandwritingView.IsOpen ?
            new FontFamily(PenAndInkSettings.GetDefault().FontFamilyName) : 
            new FontFamily("Segoe UI");
}

Доступ к HandwritingView в составных элементах управления

Составные элементы управления, использующие элемент управления TextBox или RichEditBox (например, AutoSuggestBox), также поддерживают HandwritingView.

Чтобы получить доступ к HandwritingView в составном элементе управления, используйте API VisualTreeHelper .

В следующем фрагменте кода XAML отображается элемент управления AutoSuggestBox .

<AutoSuggestBox Name="SampleAutoSuggestBox" 
    Height="50" Width="500" 
    PlaceholderText="Auto Suggest Example" 
    FontSize="16" FontFamily="Segoe UI"  
    Loaded="SampleAutoSuggestBox_Loaded">
</AutoSuggestBox>

В соответствующем коде показано, как отключить рукописный просмотр в AutoSuggestBox.

Во-первых, мы обрабатываем событие загруженного элемента и вызываем FindInnerTextBox функцию, чтобы запустить обход визуального дерева.
```
private void SampleAutoSuggestBox_Loaded(object sender, RoutedEventArgs e)
{
    if (FindInnerTextBox((AutoSuggestBox)sender))
        autoSuggestInnerTextBox.IsHandwritingViewEnabled = false;
}
```

В функции FindInnerTextBox мы итерируем визуальное дерево (начиная с AutoSuggestBox), вызывая функцию FindVisualChildByName.

private bool FindInnerTextBox(AutoSuggestBox autoSuggestBox)
{
    if (autoSuggestInnerTextBox == null)
    {
        // Cache textbox to avoid multiple tree traversals. 
        autoSuggestInnerTextBox = 
            (TextBox)FindVisualChildByName<TextBox>(autoSuggestBox);
    }
    return (autoSuggestInnerTextBox != null);
}
```

Наконец, FindVisualChildByName функция выполняет итерацию по визуальному дереву до получения Текстового поля .

private FrameworkElement FindVisualChildByName<T>(DependencyObject obj)
{
    FrameworkElement element = null;
    int childrenCount = 
        VisualTreeHelper.GetChildrenCount(obj);
    for (int i = 0; (i < childrenCount) && (element == null); i++)
    {
        FrameworkElement child = 
            (FrameworkElement)VisualTreeHelper.GetChild(obj, i);
        if ((child.GetType()).Equals(typeof(T)) || (child.GetType().GetTypeInfo().IsSubclassOf(typeof(T))))
        {
            element = child;
        }
        else
        {
            element = FindVisualChildByName<T>(child);
        }
    }
    return (element);
}
```

Переопределите область рукописного ввода

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

Здесь мы создадим текстовое поле, которое поддерживает диктовку (реализовано путем размещения текстового поля и кнопки диктовки в StackPanel).

Снимок экрана: текстовое поле с поддержкой диктовки

Так как StackPanel теперь больше TextBox, HandwritingView может не закрывать все составное управление.

Снимок экрана: элемент управления HandwritingView, который частично закрывает текстовое поле TextBox, и тот, который перемещен так, чтобы полностью закрыть текстовое поле.

Чтобы устранить эту проблему, задайте свойству PlacementTarget объекта HandwritingView элемент пользовательского интерфейса, к которому он должен быть выровнен.

<StackPanel Name="DictationBox" 
    Orientation="Horizontal" 
    VerticalAlignment="Top" 
    HorizontalAlignment="Left" 
    BorderThickness="1" BorderBrush="DarkGray" 
    Height="55" Width="500" Margin="50">
    <TextBox Name="DictationTextBox" 
        Width="450" BorderThickness="0" 
        FontSize="24" VerticalAlignment="Center">
        <TextBox.HandwritingView>
            <HandwritingView PlacementTarget="{Binding ElementName=DictationBox}"/>
        </TextBox.HandwritingView>
    </TextBox>
    <Button Name="DictationButton" 
        Height="48" Width="48" 
        FontSize="24" 
        FontFamily="Segoe MDL2 Assets" 
        Content="&#xE720;" 
        Background="White" Foreground="DarkGray"     Tapped="DictationButton_Tapped" />
</StackPanel>

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

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

Как и в предыдущем примере, мы создадим текстовое поле, которое поддерживает диктовку (реализовано путем размещения текстового поля и кнопки диктовки в StackPanel).

Снимок экрана: текстовое поле с поддержкой диктовки

В этом случае мы изменяем размер поля рукописного ввода, чтобы убедиться, что кнопка диктовки видна.

Снимок экрана элемента управления HandwritingView, который закрывает кнопку диктовки, и элемента, измененного так, чтобы кнопка диктовки была видна

Для этого мы привязываем свойство MaxWidth объекта HandwritingView к ширине элемента пользовательского интерфейса, который он должен закрывать.

<StackPanel Name="DictationBox" 
    Orientation="Horizontal" 
    VerticalAlignment="Top" 
    HorizontalAlignment="Left" 
    BorderThickness="1" 
    BorderBrush="DarkGray" 
    Height="55" Width="500" 
    Margin="50">
    <TextBox Name="DictationTextBox" 
        Width="450" 
        BorderThickness="0" 
        FontSize="24" 
        VerticalAlignment="Center">
        <TextBox.HandwritingView>
            <HandwritingView 
                PlacementTarget="{Binding ElementName=DictationBox}"
                MaxWidth="{Binding ElementName=DictationTextBox, Path=Width"/>
        </TextBox.HandwritingView>
    </TextBox>
    <Button Name="DictationButton" 
        Height="48" Width="48" 
        FontSize="24" 
        FontFamily="Segoe MDL2 Assets" 
        Content="&#xE720;" 
        Background="White" Foreground="DarkGray" 
        Tapped="DictationButton_Tapped" />
</StackPanel>

Настраиваемый пользовательский интерфейс переместите

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

TextBox с пользовательским интерфейсом

В следующем примере показано, как прослушивать события Открыто, Закрыто и РазмерИзменен объекта HandwritingView, чтобы задать положение всплывающего окна.

private void Search_HandwritingViewOpened(
    HandwritingView sender, HandwritingPanelOpenedEventArgs args)
{
    UpdatePopupPositionForHandwritingView();
}

private void Search_HandwritingViewClosed(
    HandwritingView sender, HandwritingPanelClosedEventArgs args)
{
    UpdatePopupPositionForHandwritingView();
}

private void Search_HandwritingViewSizeChanged(
    object sender, SizeChangedEventArgs e)
{
    UpdatePopupPositionForHandwritingView();
}

private void UpdatePopupPositionForHandwritingView()
{
if (CustomSuggestionUI.IsOpen)
    CustomSuggestionUI.VerticalOffset = GetPopupVerticalOffset();
}

private double GetPopupVerticalOffset()
{
    if (SearchTextBox.HandwritingView.IsOpen)
        return (SearchTextBox.Margin.Top + SearchTextBox.HandwritingView.ActualHeight);
    else
        return (SearchTextBox.Margin.Top + SearchTextBox.ActualHeight);    
}

Повторно шаблонизировать элемент управления HandwritingView

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

Чтобы просмотреть полный пример создания пользовательского шаблона, ознакомьтесь с примером Create custom transport controls how-to или Custom Edit Control.

Обратная связь

Были ли сведения на этой странице полезными?

Last updated on 2026-03-11