Input di testo con la visualizzazione scrittura manualeText input with the handwriting view

La casella di testo si espande quando viene toccata con una penna

Personalizza la visualizzazione scrittura manuale incorporata per la conversione input penna in testo supportata dai controlli di testo di Windows, come TextBox, RichEditBox e i controlli derivati da questi, ad esempio 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.

PanoramicaOverview

Le caselle di input testo XAML hanno il supporto incorporato per l'input penna con Windows Ink.XAML text input boxes feature embedded support for pen input using Windows Ink. Quando un utente tocca l'interno di una casella di input testo con una penna di Windows, la casella di testo si trasforma in una superficie per la scrittura manuale, invece di aprire un pannello di input a parte.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.

Il testo viene riconosciuto man mano che l'utente scrive nella casella di testo e in una finestra di potenziali candidati vengono mostrati i risultati del riconoscimento.Text is recognized as the user writes anywhere in the text box, and a candidate window shows the recognition results. L'utente può toccare un risultato per sceglierlo o continuare a scrivere per accettare il candidato proposto.The user can tap a result to choose it, or continue writing to accept the proposed candidate. I risultati del riconoscimento (lettera per lettera) sono inclusi nella finestra dei candidati, quindi il riconoscimento non è limitato alle parole di un dizionario.The literal (letter-by-letter) recognition results are included in the candidate window, so recognition is not restricted to words in a dictionary. Mentre l'utente scrive, l'input testo accettato viene convertito in un tipo di carattere script che conserva l'aspetto della scrittura naturale.As the user writes, the accepted text input is converted to a script font that retains the feel of natural writing.

Nota

La visualizzazione scrittura manuale è abilitata per impostazione predefinita, ma è possibile disabilitarla in base a livello di controllo e ripristinare invece il pannello di input di testo.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.

Casella di testo con input penna e suggerimenti

Un utente può modificare il testo usando azioni e movimenti standard, ad esempio:A user can edit their text using standard gestures and actions, like these:

  • barrare o cancellare - Tracciare una riga per eliminare una parola parzialmente o per interostrike through or scratch out - draw through to delete a word or part of a word
  • unire - Disegnare un arco tra le parole per eliminare lo spazio tra di essejoin - draw an arc between words to delete the space between them
  • inserire - Disegnare un simbolo di accento circonflesso per inserire uno spazioinsert - draw a caret symbol to insert a space
  • sovrascrivere - Sovrascrivere il testo esistente per sostituirlooverwrite - write over existing text to replace it

Casella di testo con correzione input penna

Disabilitare la visualizzazione scrittura manualeDisable the handwriting view

La visualizzazione scrittura manuale incorporata è abilitata per impostazione predefinita.The built-in handwriting view is enabled by default.

Potresti voler disabilitare la visualizzazione scrittura manuale se offri già funzionalità equivalenti di conversione input penna in testo nell'applicazione o se l'esperienza di input di testo si basa su un tipo di formattazione o carattere speciale (ad esempio una scheda) non disponibile tramite scrittura manuale.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.

In questo esempio, abbiamo disabilitato la visualizzazione scrittura manuale impostando la proprietà IsHandwritingViewEnabled del controllo TextBox su false.In this example, we disable the handwriting view by setting the IsHandwritingViewEnabled property of the TextBox control to false. Tutti i controlli di testo che supportano la scrittura manuale supportano una proprietà simile.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>

Specificare l'allineamento della visualizzazione scrittura manualeSpecify the alignment of the handwriting view

La visualizzazione scrittura manuale è posizionata sopra il controllo di testo sottostante e automatizzata in modo da tenere conto delle preferenze di scrittura manuale dell'utente (vedi Impostazioni -> Dispositivi -> Penna e Windows Ink -> Scrittura manuale -> Dimensione carattere quando scrivi direttamente nel campo di testo).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 viene anche automaticamente allineata rispetto al controllo di testo e alla relativa posizione all'interno dell'app.The view is also automatically aligned relative to the text control and its location within the app.

L'interfaccia utente dell'applicazione non viene adattata per supportare il controllo di dimensioni maggiori, quindi la vista potrebbe nascondere elementi importanti dell'interfaccia utente.The application UI does not reflow to accommodate the larger control, so the system might cause the view to occlude important UI.

In questo caso, mostriamo come usare la proprietà PlacementAlignment di un TextBox HandwritingView per specificare quale ancoraggio del controllo di testo sottostante viene usato per allineare la vista scrittura manuale.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>

Disabilitare candidati di completamento automaticoDisable auto-completion candidates

Il popup di suggerimento di testo è abilitato per impostazione predefinita in modo da fornire un elenco di principali candidati di riconoscimento dell'input penna tra cui l'utente può scegliere nel caso in cui il candidato principale non sia corretto.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 l'applicazione fornisce già una funzionalità di riconoscimento affidabile e personalizzata, puoi usare la proprietà AreCandidatesEnabled per disattivare i suggerimenti predefiniti, come illustrato nell'esempio seguente.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>

Usare le preferenze del tipo di carattere della grafiaUse handwriting font preferences

Un utente può scegliere in una raccolta predefinita di tipi di carattere per la scrittura manuale da usare quando esegue il rendering del testo basato sul riconoscimento input penna (vedi Impostazioni -> Dispositivi -> Penna e Windows Ink -> Scrittura manuale -> Tipo di carattere quando usi la scrittura manuale).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

Gli utenti possono anche creare un tipo di carattere basato sulla propria grafia.Users can even create a font based on their own handwriting.

L'app può accedere a questa impostazione e usare il tipo di carattere selezionato per il testo riconosciuto nel controllo di testo.Your app can access this setting and use the selected font for the recognized text in the text control.

In questo esempio, restiamo in ascolto dell'evento TextChanged di un controllo TextBox e applichiamo il tipo di carattere selezionato dall'utente se la modifica del testo ha avuto origine dal controllo HandwritingView (o altrimenti un tipo di carattere predefinito).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");
}

Accesso al controllo HandwritingView nei controlli compositiAccess the HandwritingView in composite controls

I controlli composti che usano i controlli TextBox o RichEditBox, ad esempio AutoSuggestBox, supportano anche un controllo HandwritingView.Composite controls that use the TextBox or RichEditBox controls, such as AutoSuggestBox also support a HandwritingView.

Per accedere al controllo HandwritingView in un controllo composito, usa l'API VisualTreeHelper.To access the HandwritingView in a composite control, use the VisualTreeHelper API.

Il frammento di codice XAML seguente visualizza un controllo 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>

Nel code-behind corrispondente, mostriamo come disabilitare il controllo HandwritingView nel controllo AutoSuggestBox.In the corresponding code-behind, we show how to disable the HandwritingView on the AutoSuggestBox.

  1. In primo luogo, gestiamo l'evento Loaded dell'applicazione in cui chiamiamo una funzione FindInnerTextBox per iniziare l'attraversamento dell'albero visuale.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. Quindi, iniziamo l'iterazione attraverso l'albero visuale (iniziando con un controllo AutoSuggestBox) nella funzione FindInnerTextBox con una chiamata 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. Infine, questa funzione esegue l'iterazione attraverso l'albero visuale fino a quando non viene recuperato il controllo 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);
    }
    

Riposizionare il controllo HandwritingViewReposition the HandwritingView

In alcuni casi, potresti dover verificare che il controllo HandwritingView copra elementi dell'interfaccia utente che altrimenti potrebbe non coprire.In some cases, you might need to ensure that the HandwritingView covers UI elements that it otherwise might not.

In questo caso, creiamo un controllo TextBox che supporta la dettatura (implementato dall'inserimento di un controllo TextBox e un pulsante di dettatura in un elemento StackPanel).Here, we create a TextBox that supports dictation (implemented by placing a TextBox and a dictation button into a StackPanel).

Screenshot di un controllo TextBox che supporta la dettatura.

Dal momento che l'elemento StackPanel è ora di dimensioni maggiori del controllo TextBox, il controllo HandwritingView potrebbe non coprire tutti i controlli compositi.As the StackPanel is now larger than the TextBox, the HandwritingView might not occlude all of the composite cotnrol.

Screenshot di un controllo HandwritingView che copre parzialmente un controllo TextBox e di un controllo riposizionato in modo da coprire completamente il controllo TextBox.

Per risolvere questo problema, imposta la proprietà PlacementTarget del controllo HandwritingView sull'elemento dell'interfaccia utente al quale deve essere allineata.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>

Ridimensionare il controllo HandwritingViewResize the HandwritingView

È anche possibile impostare le dimensioni del controllo HandwritingView, che può essere utile quando occorre assicurarsi che la vista non nasconda elementi importanti dell'interfaccia utente.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.

Come nell'esempio precedente, creiamo un controllo TextBox che supporta la dettatura (implementato dall'inserimento di un controllo TextBox e di un pulsante di dettatura in un elemento StackPanel).Like the previous example, we create a TextBox that supports dictation (implemented by placing a TextBox and a dictation button into a StackPanel).

Screenshot di un controllo TextBox che supporta la dettatura.

In questo caso, il controllo HandwritingView viene ridimensionato per garantire che il pulsante di dettatura sia visibile.In this case, we resize the HandwritingView to ensure that the dictation button is visible.

Screenshot di un controllo HandwritingView che copre il pulsante di dettatura e di un controllo ridimensionato per garantire che il pulsante di dettatura sia visibile.

A tale scopo associamo la proprietà MaxWidth del controllo HandwritingView sulla larghezza dell'elemento dell'interfaccia utente che deve nascondere.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>

Riposizionare l'interfaccia utente personalizzataReposition custom UI

Se hai un'interfaccia utente personalizzata che viene visualizzata in risposta all'input di testo, ad esempio un messaggio popup informativo, potresti doverla riposizionare in modo che non nasconda la vista scrittura manuale.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 interfaccia utente personalizzata

L'esempio seguente illustra come rimanere in ascolto degli eventi Opened, Closed e SizeChanged del controllo HandwritingView per impostare la posizione di 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);    
}

Ridefinire il modello del controllo HandwritingViewRetemplate the HandwritingView control

Come con tutti i controlli del framework XAML, puoi personalizzare sia la struttura visiva che il comportamento visivo di un controllo HandwritingView in base alle tue specifiche esigenze.As with all XAML framework controls, you can customize both the visual structure and visual behavior of a HandwritingView for your specific requirements.

Per vedere un esempio completo di creazione di un modello personalizzato, vedi la procedura Creare controlli di trasporto personalizzati o l'Esempio di controllo di modifica personalizzato.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.