Entrada de texto com exibição de texto manuscritoText input with the handwriting view

Caixa de texto se expande quando tocada com a caneta

Personalize a exibição interna de manuscrito para entrada tinta em texto que é compatível com controles de texto do Windows, como TextBox, RichEditBox, e controles derivados desses, 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.

Visão geralOverview

Caixas de entrada de texto XAML têm suporte inserido para entrada à caneta usando Windows Ink.XAML text input boxes feature embedded support for pen input using Windows Ink. Quando um usuário toca em uma caixa de entrada de texto usando uma caneta do Windows, a caixa de texto se transforma em uma superfície para manuscrito, em vez de abrir um painel de entrada separado.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.

O texto é reconhecido à medida que o usuário escreve em qualquer lugar na caixa de texto e uma janela de candidatos mostra os resultados do reconhecimento.Text is recognized as the user writes anywhere in the text box, and a candidate window shows the recognition results. O usuário pode tocar em um resultado para escolhê-lo ou continuar escrevendo para aceitar o candidato proposto.The user can tap a result to choose it, or continue writing to accept the proposed candidate. Os resultados do reconhecimento literal (letra pela letra) estão incluídos na janela de candidatos, para que o reconhecimento não fique restrito a palavras em um dicionário.The literal (letter-by-letter) recognition results are included in the candidate window, so recognition is not restricted to words in a dictionary. Conforme o usuário escreve, a entrada de texto aceita é convertida em uma fonte de script que mantém a sensação de escrita.As the user writes, the accepted text input is converted to a script font that retains the feel of natural writing.

Observação

A exibição de texto manuscrito é habilitada por padrão, mas você pode desabilitá-la por controle e reverter para o painel de entrada de texto.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.

Caixa de texto com tinta e sugestões

Um usuário pode editar o texto usando gestos e ações padrão, como estes:A user can edit their text using standard gestures and actions, like these:

  • tachado ou rabisco – desenhar para excluir uma palavra ou parte de uma palavrastrike through or scratch out - draw through to delete a word or part of a word
  • unir – desenhar um arco entre as palavras para excluir o espaço entre elasjoin - draw an arc between words to delete the space between them
  • inserir – desenhar um símbolo de acento circunflexo para inserir um espaçoinsert - draw a caret symbol to insert a space
  • substituir – escrever sobre o texto existente para substituí-looverwrite - write over existing text to replace it

Caixa de texto com a correção de tinta

Desabilitar o modo de exibição de manuscritoDisable the handwriting view

O modo de exibição interno de manuscrito é habilitado por padrão.The built-in handwriting view is enabled by default.

Talvez você queira desabilitar o modo de exibição de manuscrito se você já fornece funcionalidade equivalente de tinta em texto em seu aplicativo ou sua experiência de entrada de texto se baseia em algum tipo de formatação ou caractere especial (como uma guia) não disponível por meio de manuscrito.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.

Neste exemplo, podemos desabilitar o modo de exibição de manuscrito definindo a propriedade IsHandwritingViewEnabled do controle TextBox como false.In this example, we disable the handwriting view by setting the IsHandwritingViewEnabled property of the TextBox control to false. Todos os controles de texto que dão suporte à exibição de texto manuscrito oferecem suporte a uma propriedade semelhante.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 o alinhamento do modo de exibição de manuscritoSpecify the alignment of the handwriting view

O modo de exibição de manuscrito localizado acima do controle de texto subjacente e dimensionado para acomodar as preferências de manuscrito do usuário (confira Configurações -> Dispositivos -> Caneta e Windows Ink -> Manuscrito -> Tamanho da fonte ao escrever diretamente no 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). O modo de exibição também é alinhado automaticamente em relação ao controle de texto e sua localização dentro do aplicativo.The view is also automatically aligned relative to the text control and its location within the app.

A interface do usuário do aplicativo não reflui para acomodar o controle maior, de modo que o sistema pode fazer com que o modo de exibição obstrua uma interface do usuário importante.The application UI does not reflow to accommodate the larger control, so the system might cause the view to occlude important UI.

Aqui, mostramos como usar a propriedade PlacementAlignment de uma TextBox HandwritingView para especificar qual âncora no controle de texto subjacente é usada para alinhar o modo de exibição de manuscrito.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>

Desabilitar candidatos de preenchimento automáticoDisable auto-completion candidates

O pop-up de sugestão de texto está habilitado por padrão para fornecer uma lista de candidatos de reconhecimento de tinta principais da qual o usuário pode selecionar caso o candidato superior esteja incorreto.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.

Se o aplicativo já fornece a funcionalidade de reconhecimento robusta e personalizada, você pode usar a propriedade AreCandidatesEnabled para desabilitar as sugestões internas, conforme mostrado no exemplo a seguir.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 as preferências de fonte de manuscritoUse handwriting font preferences

Um usuário pode escolher de uma coleção predefinida de fontes com base em texto manuscrito para usar ao renderizar texto com base no reconhecimento de tinta (confira Configurações -> Dispositivos -> Caneta e Windows Ink -> Manuscrito -> Fonte ao usar o manuscrito).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).

Observação

Os usuários podem até mesmo criar uma fonte com base em seu próprio manuscrito.Users can even create a font based on their own handwriting.

Seu aplicativo pode acessar essa configuração e usar a fonte selecionada para o texto reconhecido no controle de texto.Your app can access this setting and use the selected font for the recognized text in the text control.

Neste exemplo, podemos escutar o evento TextChanged de um TextBox e aplicar a fonte de selecionada do usuário se a alteração de texto se originou do HandwritingView (ou uma fonte padrão, caso contrário).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");
}

Acessar HandwritingView em controles compostosAccess the HandwritingView in composite controls

Controles compostos que usam os controles TextBox ou RichEditBox, como AutoSuggestBox, também dão suporte a HandwritingView.Composite controls that use the TextBox or RichEditBox controls, such as AutoSuggestBox also support a HandwritingView.

Para acessar o HandwritingView em um controle composto, use a API VisualTreeHelper.To access the HandwritingView in a composite control, use the VisualTreeHelper API.

O snippet XAML a seguir exibe um controle 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>

No code-behind correspondente, mostramos como desabilitar o HandwritingView no AutoSuggestBox.In the corresponding code-behind, we show how to disable the HandwritingView on the AutoSuggestBox.

  1. Primeiro, tratamos o evento Loaded do aplicativo, no qual podemos chamar uma função FindInnerTextBox para iniciar a passagem da árvore 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. Em seguida, começamos a iterar na árvore visual (começando em um AutoSuggestBox) na função FindInnerTextBox com uma chamada para 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 fim, essa função itera na árvore visual até que TextBox seja recuperado.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);
    }
    

Reposicionar o HandwritingViewReposition the HandwritingView

Em alguns casos, talvez seja necessário garantir que o HandwritingView abranja elementos de interface do usuário que, de outra forma, não faria.In some cases, you might need to ensure that the HandwritingView covers UI elements that it otherwise might not.

Aqui, podemos criar um TextBox que dá suporte a ditado (implementado colocando um TextBox e um botão de ditado em um StackPanel).Here, we create a TextBox that supports dictation (implemented by placing a TextBox and a dictation button into a StackPanel).

Captura de tela de uma caixa de texto que dá suporte a ditado

Como o StackPanel agora é maior do que o TextBox, o HandwritingView talvez não obstrua todos os controles compostos.As the StackPanel is now larger than the TextBox, the HandwritingView might not occlude all of the composite cotnrol.

Captura de tela de um controle HandwritingView que parcialmente oclui um TextBox e outro que é reposicionado para ocluir totalmente o Textbox

Para resolver isso, defina a propriedade PlacementTarget do HandwritingView como o elemento de interface do usuário para o qual deve ser alinhada.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>

Redimensionar o HandwritingViewResize the HandwritingView

Você também pode definir o tamanho do HandwritingView, que pode ser útil quando você precisa garantir que o modo de exibição não obstrua uma interface do usuário 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.

Assim como no exemplo anterior, podemos criar um TextBox que dá suporte a ditado (implementado colocando um TextBox e um botão de ditado em um 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 tela de um TextBox que dá suporte a ditado

Nesse caso, redimensionamos o HandwritingView para verificar se o botão de ditado está visível.In this case, we resize the HandwritingView to ensure that the dictation button is visible.

Captura de tela de um controle HandwritingView que oclui o botão de ditado e outro que é redimensionado para verificar se o botão de ditado está visível

Para fazer isso, podemos associar a propriedade MaxWidth do HandwritingView com a largura do elemento da interface do usuário que ele deve 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>

Reposicionar a interface do usuário personalizadaReposition custom UI

Se você tiver interface do usuário personalizada que aparece em resposta à entrada de texto, como um pop-up informativo, talvez seja necessário reposicionar a interface do usuário para que ela não obstrua o modo de exibição de manuscrito.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 com a interface do usuário personalizada

O exemplo a seguir mostra como escutar eventos Opened, Closed e SizeChanged do HandwritingView para definir o posição de um pop-up.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);    
}

Remodelar o controle HandwritingViewRetemplate the HandwritingView control

Assim como com todos os controles de estrutura XAML, você pode personalizar a estrutura e o comportamento visuais de um HandwritingView para suas necessidades específicas.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 um exemplo completo de criação de um modelo personalizado, confira a instrução Criar controles personalizados de transporte ou Exemplo de controle de edição personalizada.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.