Texteingabe mit der Handschriftansicht

Hinweis

Die Handschriftansicht wird von Textsteuerelementen in WinUI im Windows App SDK nicht unterstützt. Dieser Artikel gilt nur für UWP-Apps.

Textfeld wird erweitert, wenn mit dem Stift getippt wird

Passen Sie die Handschriftansicht (für Freihandeingabe in Texteingaben) an, die in UWP-Texteingabesteuerelemente wie TextBox, RichEditBox und AutoSuggestBox integriert ist.

Überblick

UWP-Texteingabesteuerelemente unterstützen Stifteingaben mithilfe von Windows Ink , indem sie in eine Handschriftoberfläche umgewandelt werden, wenn ein Benutzer mithilfe eines Stifts in ein Texteingabefeld tippt.

Text wird erkannt, wenn der Benutzer an einer beliebigen Stelle in der Schriftoberfläche schreibt, während in einem Kandidatenfenster die Erkennungsergebnisse angezeigt werden. Der Benutzer kann auf ein Ergebnis tippen, um es auszuwählen, oder das Schreiben fortsetzen, um den vorgeschlagenen Kandidaten anzunehmen. Die buchstabenweisen Erkennungsergebnisse sind im Kandidatenfenster enthalten, sodass die Erkennung nicht auf Wörter in einem Wörterbuch beschränkt ist. Während der Benutzer schreibt, wird die akzeptierte Texteingabe in eine Skriptschriftart konvertiert, die das Gefühl natürlicher Schreibvorgänge behält.

Hinweis

Die Schriftansicht ist standardmäßig aktiviert, Sie können sie jedoch pro Steuerelement deaktivieren und stattdessen zum Texteingabebereich zurückkehren.

Textfeld mit digitalen Zeichnungen und Vorschlägen

Ein Benutzer kann seinen Text mithilfe von Standardgesten und Aktionen bearbeiten:

durchgestrichen oder durchgestrichen – Streichen Sie durch, um ein Wort oder einen Teil eines Wortes zu löschen.
Verknüpfung - Zeichnen eines Bogens zwischen Wörtern, um den Abstand zwischen ihnen zu löschen
einfügen - Zeichnen eines Caretsymbols zum Einfügen eines Leerzeichens
overwrite - Überschreiben von vorhandenem Text, um ihn zu ersetzen

Textfeld mit Freihandkorrektur

Deaktivieren der Handschriftansicht

Die integrierte Handschriftansicht ist standardmäßig aktiviert.

Möglicherweise möchten Sie die Handschriftansicht deaktivieren, wenn Sie bereits eine entsprechende Tinten-zu-Text-Funktionalität in Ihrer Anwendung bereitstellen, oder wenn Ihre Texteingabefunktion auf einer Art von Formatierung oder Sonderzeichen angewiesen ist (z. B. ein Tabulator), die über die Handschrifteingabe nicht verfügbar sind.

In diesem Beispiel wird die Handschriftansicht deaktiviert, indem die IsHandwritingViewEnabled-Eigenschaft des TextBox-Steuerelements auf "false" festgelegt wird. Alle Textsteuerelemente, die den Handschriftmodus unterstützen, unterstützen eine ähnliche Eigenschaft.

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

Geben Sie die Ausrichtung der Handschriftansicht an

Die Handschriftansicht befindet sich oberhalb des zugrunde liegenden Textsteuerelements und ist so dimensioniert, dass sie die Handschrifteinstellungen des Benutzers berücksichtigt (siehe Einstellungen -> Bluetooth & Geräte -> Stift & Windows Ink -> Handschrift -> Schriftgröße). Die Ansicht wird auch automatisch in Bezug auf das Textsteuerelement und dessen Position innerhalb der App ausgerichtet.

Die Anwendungsbenutzeroberfläche wird nicht umgelenkt, um das größere Steuerelement anzupassen, was möglicherweise wichtige Benutzeroberflächenelemente verdecken könnte.

Der folgende Codeausschnitt zeigt, wie die PlacementAlignment-Eigenschaft eines TextBox HandwritingView-Steuerelements verwendet wird, um anzugeben, welcher Anker für das zugrunde liegende Textsteuerelement verwendet wird, um die Handschriftansicht auszurichten.

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

Deaktivieren von Kandidaten für den automatischen Abschluss

Das Popupmenü "Textvorschlag" ist standardmäßig aktiviert. Es stellt eine Liste der besten Handschriftenerkennungskandidaten bereit, aus der der Benutzer auswählen kann, falls der primäre Kandidat falsch ist.

Wenn Ihre Anwendung bereits robuste, benutzerdefinierte Erkennungsfunktionen bereitstellt, können Sie die AreCandidatesEnabled-Eigenschaft verwenden, um die integrierten Vorschläge zu deaktivieren, wie im folgenden Beispiel gezeigt.

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

Verwenden von Handschrift-Schrifteinstellungen

Ein Benutzer kann aus einer vordefinierten Sammlung handschriftbasierter Schriftarten auswählen, die beim Rendern von Text basierend auf der Freihanderkennung verwendet werden sollen (siehe Einstellungen -> Bluetooth & Geräte -> Stift & Windows Ink - Handschrift ->> Schriftart).

Ihre App kann auf diese Einstellung zugreifen und die ausgewählte Schriftart für den erkannten Text im Textsteuerelement verwenden.

In diesem Beispiel lauschen wir auf das TextChanged-Ereignis eines TextBox-Steuerelements und verwenden die vom Benutzer ausgewählte Schriftart, wenn die Textänderung von der Handschriftansicht stammt (oder eine Standardschriftart, wenn nicht).

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

Zugriff auf die Handschriftansicht in zusammengesetzten Steuerelementen

Zusammengesetzte Steuerelemente, die entweder das TextBox - oder RichEditBox-Steuerelement (z. B. AutoSuggestBox) verwenden, unterstützen auch eine Handschriftansicht.

Verwenden Sie die VisualTreeHelper-API, um auf die Handschriftansicht in einem zusammengesetzten Steuerelement zuzugreifen.

Der folgende XAML-Codeausschnitt zeigt ein AutoSuggestBox-Steuerelement an.

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

Im entsprechenden Code-Behind zeigen wir, wie die Handschriftansicht im AutoSuggestBox deaktiviert wird.

Zunächst behandeln wir das Loaded-Ereignis des Elements und rufen eine FindInnerTextBox-Funktion auf, um den visuellen Baum zu durchlaufen.

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

In der FindInnerTextBox-Funktion durchlaufen wir den visuellen Baum (beginnend bei einem AutoSuggestBox), indem wir eine FindVisualChildByName-Funktion aufrufen.

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

Schließlich durchläuft die FindVisualChildByName Funktion die visuelle Struktur, bis das TextBox-Objekt abgerufen wird.

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

Position der Handschrift-Ansicht ändern

In einigen Fällen müssen Sie möglicherweise sicherstellen, dass die Handschriftansicht UI-Elemente abdeckt, die andernfalls nicht zulässig sind.

Hier erstellen wir ein TextBox-Objekt, das das Diktieren unterstützt (implementiert durch Platzieren eines TextBox-Steuerelements und einer Diktierschaltfläche in einem StackPanel).

Screenshot eines Textfelds, das diktieren unterstützt

Da der StackPanel jetzt größer als die TextBox ist, verdeckt die Handschriftansicht möglicherweise nicht das gesamte zusammengesetzte Steuerelement.

Screenshot eines Handschriftanzeige-Steuerelements, das eine TextBox teilweise verdeckt, und eines, das neu positioniert wird, um die TextBox vollständig zu verdecken

Um dies zu beheben, legen Sie die PlacementTarget-Eigenschaft der Handschriftansicht auf das UI-Element fest, an das sie ausgerichtet werden soll.

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

Ändern der Größe der Handschriftansicht

Sie können auch die Größe der Handschriftansicht festlegen, was hilfreich sein kann, wenn Sie sicherstellen müssen, dass die Ansicht keine wichtige Benutzeroberfläche verdeckt.

Wie im vorherigen Beispiel erstellen wir ein TextBox-Steuerelement, das das Diktieren unterstützt (implementiert durch das Platzieren eines TextBox-Steuerelements und einer Diktierschaltfläche in ein StackPanel).

Screenshot eines Textfelds, das Diktateingabe unterstützt

In diesem Fall ändern wir die Größe der Handschriftansicht, um sicherzustellen, dass die Diktierschaltfläche sichtbar ist.

Screenshot eines Handschriftansicht-Steuerelements, das die Diktierschaltfläche verdeckt, und eines, das in der Größe angepasst wird, um sicherzustellen, dass die Diktierschaltfläche sichtbar ist

Dazu binden wir die MaxWidth-Eigenschaft der Handschriftansicht an die Breite des UI-Elements, das verdeckt werden soll.

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

Benutzerdefinierte Benutzeroberfläche neu positionieren

Wenn Sie eine benutzerdefinierte Benutzeroberfläche haben, die als Reaktion auf die Texteingabe angezeigt wird, z. B. ein Informationspopup, müssen Sie diese Benutzeroberfläche möglicherweise neu positionieren, damit die Handschriftansicht nicht verdeckt wird.

TextBox mit benutzerdefinierter Benutzeroberfläche

Das folgende Beispiel zeigt, wie Sie die Ereignisse "Öffnen", " Geschlossen" und " SizeChanged " der Handschriftansicht überwachen, um die Position eines Popups festzulegen.

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

Neuformatierung des Handschriftansicht-Steuerelements

Wie bei allen XAML-Framework-Steuerelementen können Sie sowohl die visuelle Struktur als auch das visuelle Verhalten einer Handschriftansicht für Ihre spezifischen Anforderungen anpassen.

Ein vollständiges Beispiel zum Erstellen einer benutzerdefinierten Vorlage finden Sie im Beispiel " Erstellen benutzerdefinierter Transportsteuerelemente" oder im Beispiel "Benutzerdefiniertes Bearbeitungssteuerelement".

Feedback

War diese Seite hilfreich?

Last updated on 2025-12-02