Entrada de texto con la vista de escritura a manoText input with the handwriting view

El cuadro de texto se amplía cuando se pulsa con el lápiz

Personaliza la vista integrada de escritura a mano para entrada de lápiz en texto que sea compatible con controles de texto de Windows tales como TextBox y RichEditBox y controles derivados de estos tales como 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.

IntroducciónOverview

Los cuadros de entrada de texto XAML cuentan con soporte incrustado de entrada manuscrita con Windows Ink.XAML text input boxes feature embedded support for pen input using Windows Ink. Cuando un usuario pulsa en un cuadro de entrada de texto con un lápiz de Windows, el cuadro de texto se transforma en una superficie de escritura a mano, en lugar de abrir un panel de entrada independiente.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.

El texto se reconoce cuando el usuario escribe en cualquier parte del cuadro de texto y una ventana de candidatos muestra los resultados del reconocimiento.Text is recognized as the user writes anywhere in the text box, and a candidate window shows the recognition results. El usuario puede pulsar un resultado para elegirlo o seguir escribiendo para aceptar al candidato propuesto.The user can tap a result to choose it, or continue writing to accept the proposed candidate. Los resultados del reconocimiento literal (letra por letra) se incluyen en la ventana de candidatos, por lo que el reconocimiento no se restringe a las palabras de un diccionario.The literal (letter-by-letter) recognition results are included in the candidate window, so recognition is not restricted to words in a dictionary. Conforme el usuario escribe, la entrada de texto aceptada se convierte en una fuente de script que se parece mucho a la escritura natural.As the user writes, the accepted text input is converted to a script font that retains the feel of natural writing.

Nota

La vista de escritura a mano está habilitada de forma predeterminada, pero puede deshabilitarla por control y volver al panel de entrada de texto en su lugar.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.

Cuadro de texto con entrada de lápiz y sugerencias

Un usuario puede editar el texto con acciones y gestos estándar, como:A user can edit their text using standard gestures and actions, like these:

  • strike through o scratch out: dibujar atravesando una palabra o parte de ella para eliminarlastrike through or scratch out - draw through to delete a word or part of a word
  • join: dibujar un arco entre las palabras para eliminar el espacio entre ellasjoin - draw an arc between words to delete the space between them
  • insert: dibujar un símbolo de intercalación para insertar un espacioinsert - draw a caret symbol to insert a space
  • overwrite: escribir sobre texto existente para sustituirlooverwrite - write over existing text to replace it

Cuadro de texto con corrección de entrada de lápiz

Deshabilitar la vista de escritura a manoDisable the handwriting view

La vista integrada de escritura a mano está habilitada de forma predeterminada.The built-in handwriting view is enabled by default.

Es posible que quieras deshabilitar la vista de escritura a mano si ya ofreces una funcionalidad equivalente de entrada de lápiz a texto en la aplicación o tu experiencia de entrada de texto se basa en algún tipo de formato o carácter especial (por ejemplo, un tabulador) no disponible a través de la escritura a mano.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.

En este ejemplo, se deshabilita la vista de escritura a mano estableciendo la propiedad IsHandwritingViewEnabled del control TextBox en false.In this example, we disable the handwriting view by setting the IsHandwritingViewEnabled property of the TextBox control to false. Todos los controles de texto que admiten la vista de escritura a mano admiten una propiedad similar.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>

Especificar la alineación de la vista de escritura a manoSpecify the alignment of the handwriting view

La vista de escritura a mano se encuentra encima del control de texto subyacente y tiene un tamaño que se adapta a las preferencias de escritura a mano del usuario (consulte Configuración -> Dispositivos -> Pen & Windows Ink [Lápiz y Windows Ink] -> Escritura a mano -> Size of font when writing directly into text field [Tamaño de la fuente al escribir directamente en campo de texto] ).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). La vista también se alinea automáticamente en relación con el control de texto y su ubicación dentro de la aplicación.The view is also automatically aligned relative to the text control and its location within the app.

La interfaz de usuario de la aplicación no se redistribuye para incluir el control más grande, por lo que el sistema puede causar que la vista obstruya una interfaz de usuario importante.The application UI does not reflow to accommodate the larger control, so the system might cause the view to occlude important UI.

Aquí se muestra cómo usar la propiedad PlacementAlignment del elemento HandwritingView de un objeto TextBox para especificar qué delimitador del control de texto subyacente se usa para alinear la vista de escritura a mano.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>

Deshabilitar los candidatos de finalización automáticaDisable auto-completion candidates

El elemento emergente de sugerencia de texto está habilitado de forma predeterminada para ofrecer una lista de los mejores candidatos de reconocimiento de entrada de lápiz entre los que el usuario puede seleccionar en caso de que el mejor candidato no sea correcto.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.

Si tu aplicación ya ofrece una funcionalidad de reconocimiento sólida y personalizada, puedes usar la propiedad AreCandidatesEnabled para deshabilitar las sugerencias integradas, tal y como se muestra en el ejemplo siguiente.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>

Usar las preferencias de fuente de escritura a manoUse handwriting font preferences

Un usuario puede elegir entre una colección predefinida de fuentes de escritura a mano que se utiliza al representar texto basado en el reconocimiento de entrada a lápiz (consulta Configuración -> Dispositivos -> Pen & Windows Ink [Lápiz y Windows Ink] -> Escritura a mano -> Font when using handwriting [Fuente cuando se usa escritura a mano] ).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).

Nota

Los usuarios pueden incluso crear una fuente según su propia escritura a mano.Users can even create a font based on their own handwriting.

La aplicación puede acceder a esta opción y usar la fuente seleccionada para el texto reconocido en el control de texto.Your app can access this setting and use the selected font for the recognized text in the text control.

En este ejemplo, se escucha el evento TextChanged de un TextBox y se aplica la fuente seleccionada por el usuario si el cambio de texto se originó en el HandwritingView; si no, se aplica una fuente predeterminada.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");
}

Acceder al control HandwritingView en controles compuestosAccess the HandwritingView in composite controls

Los controles compuestos que usan los controles TextBox o RichEditBox, como AutoSuggestBox, también admiten un HandwritingView.Composite controls that use the TextBox or RichEditBox controls, such as AutoSuggestBox also support a HandwritingView.

Para acceder al control HandwritingView de un control compuesto, usa la VisualTreeHelper API.To access the HandwritingView in a composite control, use the VisualTreeHelper API.

El fragmento de código XAML siguiente muestra un control 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>

En el correspondiente código subyacente, se muestra cómo deshabilitar HandwritingView en el control compuesto AutoSuggestBox.In the corresponding code-behind, we show how to disable the HandwritingView on the AutoSuggestBox.

  1. Primero, controlamos el evento Loaded de la aplicación donde llamamos a una función FindInnerTextBox para iniciar el recorrido del árbol visual.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. Luego se comienza a recorrer en iteración el árbol visual (comenzando en un AutoSuggestBox) de la función FindInnerTextBox con una llamada a 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. Por último, esta función recorre en iteración el árbol visual hasta que se recupere el 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);
    }
    

Cambiar la posición del control HandwritingViewReposition the HandwritingView

En algunos casos, puede que debas asegurarte de que el HandwritingView abarque elementos de la interfaz de usuario que, de lo contrario, tal vez no incluiría.In some cases, you might need to ensure that the HandwritingView covers UI elements that it otherwise might not.

En este caso, se crea un TextBox que admite el dictado (que se implementa colocando un TextBox y un botón de dictado en un StackPanel).Here, we create a TextBox that supports dictation (implemented by placing a TextBox and a dictation button into a StackPanel).

Captura de pantalla de un TextBox que admite dictado.

Como el StackPanel es ahora más grande que el TextBox, es posible que el HandwritingView no obstruya todo el control compuesto.As the StackPanel is now larger than the TextBox, the HandwritingView might not occlude all of the composite cotnrol.

Captura de pantalla de un control HandwritingView que obstruye parcialmente un TextBox, y otro que se reposiciona para ocluir completamente el TextBox.

Para solucionar este problema, establece la propiedad PlacementTarget del HandwritingView en el elemento de la interfaz de usuario con el que se debe alinear.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>

Cambiar el tamaño del control HandwritingViewResize the HandwritingView

También puedes establecer el tamaño del HandwritingView, lo que puede resultar útil cuando tengas que asegurarte de que la vista no obstruye una interfaz de usuario importante.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.

En este caso, se crea un TextBox que admite el dictado (que se implementa colocando un TextBox y un botón de dictado en un StackPanel).Like the previous example, we create a TextBox that supports dictation (implemented by placing a TextBox and a dictation button into a StackPanel).

Captura de pantalla de un TextBox que admite dictado.

En este caso, queremos asegurarnos cambiar el tamaño de HandwritingView para asegurar que el botón de dictado esté visible.In this case, we resize the HandwritingView to ensure that the dictation button is visible.

Captura de pantalla de un control HandwritingView que obstruye el botón dictado, y otro cuyo tamaño se cambia para asegurar que el botón de dictado esté visible.

Para ello, enlazamos la propiedad MaxWidth del HandwritingView al ancho del elemento de interfaz de usuario que debe obstruir.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>

Cambiar la posición de la interfaz de usuario personalizadaReposition custom UI

Si tienes una interfaz de usuario personalizada que aparece en respuesta a la entrada de texto, como un elemento emergente informativo, has de cambiar la posición de esa interfaz de usuario para que no obstruya la vista de escritura a mano.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 con interfaz de usuario personalizada

El siguiente ejemplo muestra cómo escuchar los eventos Opened, Closed y SizeChanged del HandwritingView para establecer la posición de un 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);    
}

Volver a crear la plantilla del control HandwritingViewRetemplate the HandwritingView control

Como con todos los controles del marco de trabajo XAML, puedes personalizar la estructura visual y el comportamiento visual de un HandwritingView para tus requisitos específicos.As with all XAML framework controls, you can customize both the visual structure and visual behavior of a HandwritingView for your specific requirements.

Para ver un ejemplo completo de creación de una plantilla personalizada, consulta los procedimientos de Crear controles de transporte personalizados o el ejemplo de control de edición personalizado.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.