Entrada de texto con la vista de escritura a mano

Nota:

La vista de escritura a mano no es compatible con los controles de texto de WinUI en el SDK de aplicaciones de Windows. Este artículo solo se aplica a las aplicaciones para UWP.

El cuadro de texto se expande cuando se pulsa con el lápiz

Personalice la vista de escritura a mano (para entrada de lápiz a texto) integrada en controles de entrada de texto para UWP, como TextBox, RichEditBox y AutoSuggestBox.

Información general

Los controles de entrada de texto para UWP admiten la entrada del lápiz con Windows Ink mediante la transformación en una superficie de escritura a mano cuando un usuario pulsa en un cuadro de entrada de texto mediante un lápiz.

El texto se reconoce mientras el usuario escribe en cualquier parte de la superficie de escritura a mano, y una ventana candidata muestra los resultados del reconocimiento. El usuario puede pulsar un resultado para elegirlo o continuar escribiendo para aceptar el candidato propuesto. Los resultados del reconocimiento literal (letra por letra) se incluyen en la ventana de candidatos, por lo que el reconocimiento no está restringido a las palabras de un diccionario. A medida que escribe el usuario, la entrada de texto aceptada se convierte en una fuente de script que conserva la sensación de escritura natural.

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.

Cuadro de texto con entrada de tinta y sugerencias

Un usuario puede editar su texto mediante gestos y acciones estándar:

tachar o rascar: dibujar para eliminar una palabra o parte de una palabra
join : dibujar un arco entre palabras para eliminar el espacio entre ellas
insertar : dibujar un símbolo de intercalación para insertar un espacio
sobrescribir - escribir sobre el texto existente para reemplazarlo

Cuadro de texto con corrección de tinta digital

Deshabilitar la vista de escritura a mano

La vista de escritura a mano integrada está habilitada de forma predeterminada.

Es posible que desee deshabilitar la vista de escritura a mano si ya proporciona una funcionalidad equivalente de entrada de lápiz a texto en la aplicación, o la experiencia de entrada de texto se basa en algún tipo de formato o carácter especial (como una pestaña) no disponible a través de la escritura a mano.

En este ejemplo, deshabilitamos la vista de escritura a mano estableciendo la propiedad IsHandwritingViewEnabled del control TextBox en false. Todos los controles de texto que admiten la vista de escritura a mano admiten una propiedad similar.

<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 para escritura a mano

La vista de escritura a mano se encuentra encima del control de texto subyacente y se dimensiona para adaptarse a las preferencias de escritura a mano del usuario (consulta Configuración —> Dispositivos Bluetooth y Dispositivos —> Lápiz y Windows Ink —> Escritura a mano —> Tamaño de fuente). La vista también se alinea automáticamente con respecto al control de texto y su ubicación dentro de la aplicación.

La interfaz de usuario de la aplicación no cambia de flujo para adaptarse al control más grande, lo que podría ocluir una interfaz de usuario importante.

En el fragmento de código siguiente se muestra cómo usar la propiedad PlacementAlignment de un TextBox HandwritingView para especificar qué anclaje del control de texto subyacente se usa para alinear la vista de escritura a mano.

<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 candidatos de finalización automática

La ventana emergente de sugerencia de texto está habilitada por defecto. Proporciona una lista de los mejores candidatos de reconocimiento de tinta de la que el usuario puede seleccionar, en caso de que el candidato principal sea incorrecto.

Si la aplicación ya proporciona una funcionalidad de reconocimiento personalizada sólida, puede usar la propiedad AreCandidatesEnabled para deshabilitar las sugerencias integradas, como se muestra en el ejemplo siguiente.

<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 preferencias de fuente de escritura a mano

Un usuario puede elegir entre una colección predefinida de fuentes basadas en escritura a mano para usarlas al representar texto basado en el reconocimiento de lápiz (consulta Configuración -> Bluetooth y dispositivos -> Lápiz y Windows Ink -> Escritura a mano -> Fuente).

La aplicación puede acceder a esta configuración y usar la fuente seleccionada para el texto reconocido en el control de texto.

En este ejemplo, escuchamos el evento TextChanged de un TextBox y aplicamos la fuente seleccionada por el usuario si el cambio de texto se originó en HandwritingView (o una fuente predeterminada, si no).

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

Acceso a HandwritingView en controles compuestos

Los controles compuestos que usan el control TextBox o RichEditBox (como AutoSuggestBox), también admiten handwritingView.

Para acceder a HandwritingView en un control compuesto, use la API VisualTreeHelper .

El siguiente fragmento de código XAML muestra un control AutoSuggestBox .

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

En el código subyacente correspondiente, se muestra cómo deshabilitar HandwritingView en AutoSuggestBox.

En primer lugar, se controla el evento Loaded del elemento y se llama a una FindInnerTextBox función para iniciar el recorrido del árbol visual.

private void SampleAutoSuggestBox_Loaded(object sender, RoutedEventArgs e)
{
    if (FindInnerTextBox((AutoSuggestBox)sender))
        autoSuggestInnerTextBox.IsHandwritingViewEnabled = false;
}

En la FindInnerTextBox función, recorremos en iteración el árbol visual (comenzando en un AutoSuggestBox) llamando a una FindVisualChildByName función.

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

Por último, la FindVisualChildByName función recorre en iteración el árbol visual hasta que se recupera textBox .

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

En algunos casos, es posible que tenga que asegurarse de que HandwritingView cubra elementos de la interfaz de usuario que de otro modo podría no cubrir.

Aquí, creamos un TextBox que admite dictado (implementado colocando un TextBox y un botón de dictado en un StackPanel).

Captura de pantalla de un cuadro de texto que admite dictado

Como StackPanel es ahora mayor que TextBox, es posible que HandwritingView no oculte todo el control compuesto.

Captura de pantalla de un control HandwritingView que ocluye parcialmente un TextBox y otro que se cambia de posición para ocluir completamente el TextBox

Para solucionar este problema, establezca la propiedad PlacementTarget de HandwritingView en el elemento de interfaz de usuario en el que se debe alinear.

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

También puede establecer el tamaño de HandwritingView, que puede resultar útil cuando necesite asegurarse de que la vista no ocluye la interfaz de usuario importante.

Al igual que en el ejemplo anterior, creamos un TextBox que admite dictado (implementado colocando un TextBox y un botón de dictado en un StackPanel).

Captura de pantalla de un TextBox que admite dictado

En este caso, cambiamos el tamaño de HandwritingView para asegurarnos de que el botón de dictado está visible.

Captura de pantalla de un control HandwritingView que ocluye el botón de dictado y otro cuyo tamaño se cambia para asegurarse de que el botón de dictado está visible

Para ello, enlazamos la propiedad MaxWidth de HandwritingView al ancho del elemento de la interfaz de usuario que debe ocluir.

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

Si tiene una interfaz de usuario personalizada que aparece en respuesta a la entrada de texto, como un elemento emergente informativo, es posible que tenga que cambiar la posición de esa interfaz de usuario para que no oclua la vista de escritura a mano.

TextBox con interfaz de usuario personalizada

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

Reconfigurar la plantilla del control HandwritingView

Al igual que con todos los controles del marco XAML, puedes personalizar la estructura visual y el comportamiento visual de un HandwritingView para tus requisitos específicos.

Para ver un ejemplo completo de cómo crear una plantilla personalizada, consulte el ejemplo Creación de controles de transporte personalizados o Control de edición personalizado.

Comentarios

¿Le ha resultado útil esta página?

Last updated on 2025-12-02