Ввод текста в представлении рукописного вводаText input with the handwriting view

Текстовое поле развертывается при касании пером

Настройте встроенное представление рукописного ввода для распознавания введенного текста, которое поддерживается текстовыми элементами управления Windows, такими как TextBox, RichEditBox и элементами управления, производными от них, такими как AutoSuggestBox.Customize the built-in handwriting view for ink to text input supported by Windows text controls such as the TextBox, RichEditBox, and controls derived from these such as the AutoSuggestBox.

ОбзорOverview

Поля ввода текста XAML имеют встроенную поддержку рукописного ввода с использованием Windows Ink.XAML text input boxes feature embedded support for pen input using Windows Ink. При касании текстового поля пером Windows текстовое поле превращается в поверхность для рукописного ввода, а не открывается отдельная панель ввода.When a user taps into a text input box using a Windows pen, the text box transforms into a handwriting surface, rather than opening a separate input panel.

Текст распознается, когда пользователь пишет в любом месте текстового поля, а в окнах подбора слов-кандидатов отображаются результаты распознавания.Text is recognized as the user writes anywhere in the text box, and a candidate window shows the recognition results. Пользователь может коснуться результата, чтобы выбрать его, или продолжить писать, чтобы выбрать предлагаемое слово-кандидат.The user can tap a result to choose it, or continue writing to accept the proposed candidate. Буквальные (побуквенные) результаты распознавания добавляются в окно слов-кандидатов, поэтому распознавание не ограничивается словами из словаря.The literal (letter-by-letter) recognition results are included in the candidate window, so recognition is not restricted to words in a dictionary. По мере того, как пользователь пишет, текст преобразуется в рукописный шрифт, создавая ощущение естественного письма.As the user writes, the accepted text input is converted to a script font that retains the feel of natural writing.

Примечание

Представление рукописного ввода включено по умолчанию, но его можно отключить отдельно для каждого элемента управления и вместо него вернуться к использованию панели ввода текста.The handwriting view is enabled by default, but you can disable it on a per-control basis and revert to the text input panel instead.

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

Пользователь может изменить свой текст, используя стандартные жесты и действия:A user can edit their text using standard gestures and actions, like these:

  • зачеркнуть или вычеркнуть — провести линию поверх слова, чтобы удалить слово или его часть;strike through or scratch out - draw through to delete a word or part of a word
  • соединить — нарисовать дугу между словами, чтобы удалить пробел между ними;join - draw an arc between words to delete the space between them
  • вставить — нарисовать символ вставки, чтобы вставить пробел;insert - draw a caret symbol to insert a space
  • перезапись — запись поверх существующего текста для его замены.overwrite - write over existing text to replace it

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

Отключение представления рукописного вводаDisable the handwriting view

Встроенное представление рукописного ввода по умолчанию включено.The built-in handwriting view is enabled by default.

Представление рукописного ввода, если вы уже предоставляете эквивалентную функциональность рукописного ввода в своем приложении, или процесс ввода текста зависит от какого-либо рода форматирования или специальных символов (например, "Tab"), недоступных с помощью рукописного ввода, может потребоваться отключить.You might want to disable the handwriting view if you already provide equivalent ink-to-text functionality in your application, or your text input experience relies on some kind of formatting or special character (such as a tab) not available through handwriting.

В этом примере мы отключим представление рукописного ввода, задав для свойство IsHandwritingViewEnabled элемента управления TextBox значение "false".In this example, we disable the handwriting view by setting the IsHandwritingViewEnabled property of the TextBox control to false. Все элементы управления, которые поддерживают представление рукописного ввода, поддерживают аналогичное свойство.All text controls that support the handwriting view support a similar property.

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

Определение выравнивания для представления рукописного вводаSpecify the alignment of the handwriting view

Представление рукописного ввода располагается над основным текстовым элементом управления и его размер изменяется, чтобы вместить настройки рукописного ввода пользователя (см. Настройки -> Устройства -> Перо и Windows Ink -> Рукописный ввод -> Размер шрифта при записи непосредственно в текстовом поле).The handwriting view is located above the underlying text control and sized to accommodate the user's handwriting preferences (see Settings -> Devices -> Pen & Windows Ink -> Handwriting -> Size of font when writing directly into text field). Представление также автоматически выравнивается относительно текстового элемента управления и его расположения в приложении.The view is also automatically aligned relative to the text control and its location within the app.

Пользовательский интерфейс приложения не обновляется, чтобы вместить больший элемент управления, поэтому система может вынудить представление перекрыть важный элемент пользовательского интерфейса.The application UI does not reflow to accommodate the larger control, so the system might cause the view to occlude important UI.

Здесь мы покажем, как использовать свойство PlacementAlignment элемента управления TextBoxHandwritingView, чтобы указать, какая привязка в базовом текстовом элементе управления используется для выравнивания представления рукописного ввода.Here, we show how to use the PlacementAlignment property of a TextBox HandwritingView to specify which anchor on the underlying text control is used to align the handwriting view.

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

Отключение автоматического завершения слов-кандидатовDisable auto-completion candidates

Всплывающее окно с предложениями текста включено по умолчанию, чтобы предоставить список лучших слов-кандидатов для распознавания, из которых пользователь может выбрать нужное слово, если главный кандидат не подходит.The text suggestion popup is enabled by default to provide a list of top ink recognition candidates from which the user can select in case the top candidate is incorrect.

Если ваше приложение уже предоставляет надежные, настраиваемые функции распознавания, вы можете использовать свойство AreCandidatesEnabled, позволяющее отключить встроенные предложения, как показано в следующем примере.If your application already provides robust, custom recognition functionality, you can use the AreCandidatesEnabled property to disable the built-in suggestions, as shown in the following example.

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

Использование настроек рукописного шрифтаUse handwriting font preferences

Пользователь может выбрать шрифт из заранее определенной коллекции рукописных шрифтов, который будет использоваться для отображения текста при распознавании рукописного ввода (см. Настройки -> Устройства ->Перо и Windows Ink -> Рукописный ввод -> Шрифт при использовании рукописного ввода).A user can choose from a pre-defined collection of handwriting-based fonts to use when rendering text based on ink recognition (see Settings -> Devices -> Pen & Windows Ink -> Handwriting -> Font when using handwriting).

Примечание

Пользователи могут даже создать шрифт, основанный на их собственном почерке.Users can even create a font based on their own handwriting.

Ваше приложение может получить доступ к этому параметру и использовать выбранный шрифт для распознанного текста в текстовом элементе управления.Your app can access this setting and use the selected font for the recognized text in the text control.

В этом примере мы ожидаем событие TextChanged элемента управления TextBox и применяем выбранный пользователем шрифт, если изменение текста происходит из HandwritingView (или шрифт по умолчанию, если шрифт не выбран).In this example, we listen for the TextChanged event of a TextBox and apply the user's selected font if the text change originated from the HandwritingView (or a default font, if not).

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 в составных элементах управленияAccess the HandwritingView in composite controls

Составные элементы управления, которые используют элементы управления TextBox или RichEditBox, такие как AutoSuggestBox, также поддерживают HandwritingView.Composite controls that use the TextBox or RichEditBox controls, such as AutoSuggestBox also support a HandwritingView.

Чтобы получить доступ к HandwritingView в составном элементе управления, используйте API VisualTreeHelper.To access the HandwritingView in a composite control, use the VisualTreeHelper API.

В следующем фрагменте XAML отображается элемент управления AutoSuggestBox.The following XAML snippet displays an AutoSuggestBox control.

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

В соответствующем фрагменте кода мы покажем, как отключить HandwritingView в AutoSuggestBox.In the corresponding code-behind, we show how to disable the HandwritingView on the AutoSuggestBox.

  1. Сначала мы обрабатываем событие Loaded приложения, в котором мы вызываем функцию FindInnerTextBox для запуска обхода визуального дерева.First, we handle the application's Loaded event where we call a FindInnerTextBox function to start the visual tree traversal.

    private void SampleAutoSuggestBox_Loaded(object sender, RoutedEventArgs e)
    {
        if (FindInnerTextBox((AutoSuggestBox)sender))
            autoSuggestInnerTextBox.IsHandwritingViewEnabled = false;
    }
    
  2. Затем мы начинаем итерацию по визуальному дереву (начиная с AutoSuggestBox) в функции FindInnerTextBox с помощью вызова FindVisualChildByName.We then begin iterating through the visual tree (starting at an AutoSuggestBox) in the FindInnerTextBox function with a call to FindVisualChildByName.

    private bool FindInnerTextBox(AutoSuggestBox autoSuggestBox)
    {
        if (autoSuggestInnerTextBox == null)
        {
            // Cache textbox to avoid multiple tree traversals. 
            autoSuggestInnerTextBox = 
                (TextBox)FindVisualChildByName<TextBox>(autoSuggestBox);
        }
        return (autoSuggestInnerTextBox != null);
    }
    
  3. Наконец, эта функция перебирает визуальное дерево до тех пор, пока не будет получен TextBox.Finally, this function iterates through the visual tree until the TextBox is retrieved.

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

Изменение положения HandwritingViewReposition the HandwritingView

В некоторых случаях вам необходимо убедиться, что HandwritingView содержит элементы пользовательского интерфейса, которых в противном случае могло и не быть.In some cases, you might need to ensure that the HandwritingView covers UI elements that it otherwise might not.

Здесь мы создаем элемент TextBox, который поддерживает диктовку (реализуется путем помещения TextBox и кнопки диктовки в StackPanel).Here, we create a TextBox that supports dictation (implemented by placing a TextBox and a dictation button into a StackPanel).

Снимок экрана: элемент TextBox, поддерживающий диктовку

Поскольку StackPanel теперь больше, чем TextBox, HandwritingView может не перекрывать весь составной элемент управления.As the StackPanel is now larger than the TextBox, the HandwritingView might not occlude all of the composite cotnrol.

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

Чтобы решить эту проблему, установите для свойства PlacementTarget HandwritingView значение элемента пользовательского интерфейса, по которому он должен быть выровнен.To address this, set the PlacementTarget property of the HandwritingView to the UI element to which it should be aligned.

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

Изменение размера HandwritingViewResize the HandwritingView

Вы также можете задать размер HandwritingView, что может быть полезно, когда вам нужно убедиться, что представление не перекрывает важный элемент пользовательского интерфейса.You can also set the size of the HandwritingView, which can be useful when you need to ensure the view doesn't occlude important UI.

Как и в предыдущем примере, мы создаем TextBox, который поддерживает диктовку (реализуется путем помещения TextBox и кнопки диктовки в StackPanel).Like the previous example, we create a TextBox that supports dictation (implemented by placing a TextBox and a dictation button into a StackPanel).

Снимок экрана: элемент TextBox, поддерживающий диктовку

В этом случае мы изменяем размер HandwritingView, чтобы была видна кнопка диктовки.In this case, we resize the HandwritingView to ensure that the dictation button is visible.

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

Для этого мы привязываем свойство MaxWidth HandwritingView к ширине элемента пользовательского интерфейса, который он закрывает.To do this, we bind the MaxWidth property of the HandwritingView to the width of the UI element that it should occlude.

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

Изменение положения пользовательского элемента интерфейсаReposition custom UI

Если у вас есть пользовательский элемент интерфейса, который появляется в ответ на ввод текста, например, информационное всплывающее окно, вам может потребоваться изменить положение этого элемента интерфейса, чтобы он не перекрывал представление рукописного ввода.If you have custom UI that appears in response to text input, such as an informational popup, you might need to reposition that UI so it doesn't occlude the handwriting view.

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

В следующем примере показано, как прослушивать события Opened, Closed и SizeChangedHandwritingView, чтобы задать положение Popup.The following example shows how to listen for the Opened, Closed, and SizeChanged events of the HandwritingView to set the position of a Popup.

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

Замена шаблона элемента управления HandwritingViewRetemplate the HandwritingView control

Как и во всех элементах управления XAML, вы можете настроить как визуальную структуру, так и визуальное поведение элемента HandwritingView для ваших конкретных требований.As with all XAML framework controls, you can customize both the visual structure and visual behavior of a HandwritingView for your specific requirements.

Чтобы увидеть полный пример создания пользовательского шаблона с практическими рекомендациями, см. статьи Create custom transport controls (Создание пользовательских элементов управления транспортировкой) и Custom Edit Control sample (Пример пользовательского элемента управления для редактирования текста).To see a full example of creating a custom template check out the Create custom transport controls how-to or the Custom Edit Control sample.