Tekstinvoer met de handschriftweergave

Opmerking

Handschriftweergave wordt niet ondersteund door tekstbesturingselementen in WinUI in de Windows App SDK. Dit artikel is alleen van toepassing op UWP-apps.

Tekstvak wordt uitgevouwen wanneer er wordt getikt met pen

Pas de handschriftweergave (voor inkt naar tekstinvoer) aan die is ingebouwd in UWP-besturingselementen voor tekstinvoer, zoals het tekstvak, RichEditBox en AutoSuggestBox.

Overzicht

UWP-tekstinvoerbesturingselementen ondersteunen peninvoer door Windows Ink te gebruiken en transformeren in een handschriftoppervlak wanneer een gebruiker met een pen op een tekstvak tikt.

Tekst wordt herkend als de gebruiker ergens in het handschriftoppervlak schrijft terwijl in een kandidaatvenster de herkenningsresultaten worden weergegeven. De gebruiker kan op een resultaat tikken om het te kiezen of verder schrijven om de voorgestelde kandidaat te accepteren. De letterlijke (letter-by-letter) herkenningsresultaten worden opgenomen in het kandidaatvenster, dus herkenning is niet beperkt tot woorden in een woordenlijst. Terwijl de gebruiker schrijft, wordt de geaccepteerde tekstinvoer geconverteerd naar een scriptlettertype dat het gevoel van natuurlijk schrijven behoudt.

Opmerking

De handschriftweergave is standaard ingeschakeld, maar u kunt deze per controle uitschakelen en teruggaan naar het deelvenster voor tekstinvoer.

Tekstvak met inkt en suggesties

Een gebruiker kan de tekst bewerken met behulp van standaardbewegingen en acties:

doorhalen of doorstrepen - een lijn trekken door een woord of deel van een woord om het te verwijderen
join - teken een boog tussen woorden om de spatie tussen de woorden te verwijderen
invoegen - teken een caretsymbool om een spatie in te voegen
overschrijven - schrijf over bestaande tekst om deze te vervangen

Tekstvak met inktcorrectie

De handschriftweergave uitschakelen

De ingebouwde handschriftweergave is standaard ingeschakeld.

U kunt de handschriftweergave uitschakelen als u al een equivalente inkt-naar-tekstfunctionaliteit in uw toepassing hebt, of als uw tekstinvoerervaring afhankelijk is van een bepaalde vorm van opmaak of speciaal teken (zoals een tabblad) die niet beschikbaar is via handschrift.

In dit voorbeeld schakelen we de handschriftweergave uit door de eigenschap IsHandwritingViewEnabled van het besturingselement Tekstvak in te stellen op onwaar. Alle tekstbesturingselementen die ondersteuning bieden voor de handschriftweergave ondersteunen een vergelijkbare eigenschap.

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

De uitlijning van de handschriftweergave opgeven

De handschriftweergave bevindt zich boven het onderliggende tekstbesturingselement en is groot genoeg om aan de handschriftvoorkeuren van de gebruiker te voldoen (zie Instellingen -> Bluetooth & apparaten -> Pen & Windows Ink -> Handschrift -> Lettergrootte). De weergave wordt ook automatisch uitgelijnd ten opzichte van het tekstcontrole en de locatie ervan binnen de app.

De gebruikersinterface van de toepassing past zich niet aan om plaats te bieden aan het grotere controle-element, wat belangrijke gebruikersinterface-elementen mogelijk kan verbergen.

In het volgende codefragment ziet u hoe u de eigenschap PlacementAlignment van een Handschriftweergave voor tekstvakken gebruikt om op te geven welk anker op het onderliggende tekstbesturingselement wordt gebruikt om de handschriftweergave uit te lijnen.

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

Kandidaten voor automatisch aanvullen uitschakelen

De pop-up voor tekstsuggesties is standaard ingeschakeld. Het bevat een lijst met beste inktherkenningskandidaten waaruit de gebruiker kan selecteren voor het geval de primaire kandidaat onjuist is.

Als uw toepassing al robuuste, aangepaste herkenningsfunctionaliteit biedt, kunt u de eigenschap AreCandidatesEnabled gebruiken om de ingebouwde suggesties uit te schakelen, zoals wordt weergegeven in het volgende voorbeeld.

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

Voorkeuren voor handschriftlettertype gebruiken

Een gebruiker kan kiezen uit een vooraf gedefinieerde verzameling handschriftlettertypen die moeten worden gebruikt bij het weergeven van tekst op basis van inktherkenning (zie Instellingen -> Bluetooth - apparaten -> Pen & Windows Ink -> Handschrift -> Lettertype).

Uw app heeft toegang tot deze instelling en gebruikt het geselecteerde lettertype voor de herkende tekst in het tekstbeheer.

In dit voorbeeld luisteren we naar de gebeurtenis TextChanged van een tekstvak en passen we het geselecteerde lettertype van de gebruiker toe als de tekst is gewijzigd uit de HandwritingView (of een standaardlettertype, als dat niet het geval is).

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

De handschriftweergave openen in samengestelde bedieningselementen

Samengestelde besturingselementen die gebruikmaken van het besturingselement Tekstvak of RichEditBox (zoals AutoSuggestBox), ondersteunen ook een HandwritingView.

Gebruik de VisualTreeHelper-API om toegang te krijgen tot de HandwritingView in een samengesteld besturingselement.

In het volgende XAML-fragment wordt een besturingselement AutoSuggestBox weergegeven.

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

In de bijbehorende code-behind laten we zien hoe u de HandwritingView kunt uitschakelen in de AutoSuggestBox.

Eerst verwerken we de Geaden gebeurtenis van het element en roepen we een FindInnerTextBox functie aan om de visuele structuur door te lopen.

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

In de FindInnerTextBox functie doorlopen we de visualstructuur (te beginnen bij een AutoSuggestBox) door een FindVisualChildByName functie aan te roepen.

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

Ten slotte doorloopt de FindVisualChildByName functie de visualstructuur totdat het tekstvak wordt opgehaald.

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

De handschriftweergave verplaatsen

In sommige gevallen moet u er mogelijk voor zorgen dat de handschriftweergave ui-elementen behandelt die anders niet mogelijk zijn.

Hier maken we een tekstvak dat ondersteuning biedt voor dicteren (geïmplementeerd door een tekstvak en een dicteerknop in een StackPanel te plaatsen).

Schermopname van een tekstvak dat ondersteuning biedt voor dicteren

Omdat de StackPanel nu groter is dan het tekstvak, is het mogelijk dat de HandwritingView niet alle samengestelde besturingselementen bedekt of afschermt.

Schermopname van een handschriftweergave die een tekstvak gedeeltelijk bedekt en die is verplaatst om het tekstvak volledig af te sluiten

Als u dit wilt oplossen, stelt u de eigenschap PlacementTarget van de HandwritingView in op het ui-element waarop het moet worden uitgelijnd.

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

Het formaat van de handschriftweergave wijzigen

U kunt ook de grootte van de HandwritingView instellen, wat handig kan zijn wanneer u ervoor moet zorgen dat de weergave geen belangrijke gebruikersinterface bevat.

Net als in het vorige voorbeeld maken we een tekstvak dat ondersteuning biedt voor dicteren (geïmplementeerd door een tekstvak en een dicteerknop in een StackPanel te plaatsen).

Schermopname van een tekstvak dat ondersteuning biedt voor dicteren

In dit geval wijzigen we de grootte van de HandwritingView om ervoor te zorgen dat de dicteerknop zichtbaar is.

Schermopname van een handschriftweergave-besturingselement waarmee de knop dicteren wordt afgesloten en een besturingselement waarvan de grootte is gewijzigd om ervoor te zorgen dat de dicteerknop zichtbaar is

Hiervoor binden we de eigenschap MaxWidth van de HandwritingView aan de breedte van het UI-element dat moet worden afgesloten.

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

Aangepaste gebruikersinterface verplaatsen

Als u een aangepaste gebruikersinterface hebt die verschijnt bij tekstinvoer, zoals een informatievenster, moet u die gebruikersinterface mogelijk verplaatsen, zodat deze de handschriftweergave niet blokkeert.

Tekstvak met aangepaste gebruikersinterface

In het volgende voorbeeld ziet u hoe u de gebeurtenissen Geopend, Gesloten en SizeChanged van de HandwritingView kunt beluisteren om de positie van een pop-up in te stellen.

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

Het besturingselement HandwritingView hersjabloneren

Net als bij alle XAML-frameworkbesturingselementen kunt u zowel de visuele structuur als het visuele gedrag van een HandwritingView aanpassen voor uw specifieke vereisten.

Als u een volledig voorbeeld van het maken van een aangepaste sjabloon wilt zien, bekijkt u de instructies Aangepaste transportbesturingselementen maken of het voorbeeld van aangepast besturingselement bewerken.

Feedback

Is deze pagina nuttig?

Last updated on 2025-12-02