Tutorial: Unterstützung von Freihandeingaben in Ihrer Windows-App

Surface Pen (erhältlich im Microsoft Store).

In diesem Lernprogramm wird beschrieben, wie Sie eine einfache Windows-App erstellen, die das Schreiben und Zeichnen mit Windows Ink unterstützt. Wir verwenden Codeausschnitte aus einer Beispiel-App, die Sie von GitHub herunterladen können (siehe Beispielcode), um die verschiedenen Features und zugehörigen Windows Ink-APIs zu veranschaulichen (siehe Komponenten der Windows Ink-Plattform), die in jedem Schritt erläutert werden.

Wir konzentrieren uns auf Folgendes:

• Hinzufügen grundlegender Stiftunterstützung
• Hinzufügen einer Ink-Symbolleiste
• Unterstützen der Schrifterkennung
• Unterstützung bei der grundlegenden Formerkennung
• Speichern und Laden von Tinte

Weitere Details zur Implementierung dieser Features finden Sie unter Stiftinteraktionen und Windows Ink in Windows-Apps.

Einleitung

Mit Windows Ink können Sie Ihren Kunden die digitale Entsprechung nahezu jeder pen-and-paper-Erfahrung bieten, die vorstellbar ist, von schnellen, handschriftlichen Notizen und Anmerkungen bis hin zu Whiteboard-Demos sowie von Architektur- und Ingenieurzeichnungen bis hin zu persönlichen Meisterwerken.

Voraussetzungen

• Ein Computer (oder ein virtueller Computer), auf dem die aktuelle Version von Windows 10 oder Windows 11 ausgeführt wird
• Das Visual Studio 2019 und das RS2 SDK oder höher
• Windows 10 SDK (10.0.15063.0)
• Je nach Konfiguration müssen Sie möglicherweise das Microsoft.NETCore.UniversalWindowsPlatform NuGet-Paket installieren und den Entwicklermodus in Ihren Systemeinstellungen aktivieren (Einstellungen -> Update & Sicherheit -> Für Entwickler -> Verwenden von Entwicklerfeatures).
• Wenn Sie mit Der Entwicklung von Windows-Apps mit Visual Studio noch nicht vertraut sind, lesen Sie die folgenden Themen, bevor Sie mit diesem Lernprogramm beginnen:
  • Installieren von Tools für das Windows App SDK
  • Erstellen einer "Hello, world"-App (XAML)
• [OPTIONAL] Ein digitaler Stift und ein Computer mit einem Display, das Eingaben von diesem digitalen Stift unterstützt.

Hinweis

Windows Ink kann das Zeichnen mit einer Maus und Fingereingabe unterstützen (wir zeigen dies in Schritt 3 dieses Lernprogramms) für eine optimale Windows Ink-Erfahrung, wir empfehlen jedoch, dass Sie über einen digitalen Stift und einen Computer mit einer Anzeige verfügen, die Eingaben von diesem digitalen Stift unterstützt.

Beispielcode

In diesem Lernprogramm verwenden wir eine Beispiel-Zeichen-App, um die erläuterten Konzepte und Funktionen zu veranschaulichen.

Laden Sie dieses Visual Studio-Beispiel und den Quellcode aus GitHub- unter windows-appsample-get-started-ink-Beispielherunter:

1. Wählen Sie die Schaltfläche Klonen oder herunterladen in Grün aus.
   
2. Wenn Sie über ein GitHub-Konto verfügen, können Sie das Repo auf Ihren lokalen Computer klonen, indem Sie Open in Visual Studio auswählen.
3. Wenn Sie nicht über ein GitHub-Konto verfügen oder nur eine lokale Kopie des Projekts benötigen, wählen Sie ZIP- herunterladen (Sie müssen regelmäßig zurückkehren, um die neuesten Updates herunterzuladen)

Von Bedeutung

Der Großteil des Codes im Beispiel ist auskommentiert. Während wir jeden Schritt durchgehen, werden Sie aufgefordert, verschiedene Abschnitte des Codes zu entkommentieren. Markieren Sie in Visual Studio einfach die Codezeilen, und drücken Sie CTRL-K und dann STRG-U.

Komponenten der Windows Ink-Plattform

Diese Objekte bieten den Großteil der Freihanderfahrung für Windows-Apps.

Komponente	BESCHREIBUNG
InkCanvas	Ein XAML-UI-Plattformsteuerelement, das standardmäßig alle Eingaben eines Stifts als Tintenstrich oder Löschstrich entgegennimmt und darstellt.
InkPresenter	Ein CodeBehind-Objekt, das zusammen mit einem InkCanvas--Steuerelement instanziiert wird (über die InkCanvas.InkPresenter-Eigenschaft verfügbar gemacht). Dieses Objekt bietet alle standardmäßigen Freihandfunktionen, die vom InkCanvasverfügbar gemacht werden, sowie einen umfassenden Satz von APIs für zusätzliche Anpassungen und Personalisierung.
InkToolbar-	Ein XAML-UI-Plattform-Steuerelement, das eine anpassbare und erweiterbare Sammlung von Schaltflächen enthält, die tintenbezogene Funktionen in einem zugeordneten InkCanvas-aktivieren.
IInkD2DRenderer Wir behandeln diese Funktionalität hier nicht. Weitere Informationen finden Sie im komplexen Tintenbeispiel.	Ermöglicht das Rendern von Freihandstrichen auf den angegebenen Direct2D-Gerätekontext einer Universal Windows-App anstelle des standardmäßigen InkCanvas Steuerelements.

Schritt 1: Das Beispiel ausführen

Nachdem Sie die RadialController-Beispiel-App heruntergeladen haben, überprüfen Sie, ob sie ausgeführt wird:

1. Öffnen Sie das Beispielprojekt in Visual Studio.

2. Stellen Sie das Dropdownmenü Lösungsplattformen auf eine Auswahl ohne ARM-Prozessorarchitektur ein.

3. Drücken Sie F5, um kompilieren, bereitstellen und ausführen zu können.

   Hinweis

   Alternativ können Sie das Menüelement Debug>"Debuggen starten" auswählen oder die hier gezeigte Schaltfläche "Ausführen auf lokalem Computer" auswählen.

Das App-Fenster öffnet sich, und nachdem ein Begrüßungsbildschirm für einige Sekunden erscheint, sehen Sie diesen anfänglichen Bildschirm.

Okay, wir haben jetzt die grundlegende Windows-App, die wir während des restlichen Lernprogramms verwenden werden. In den folgenden Schritten fügen wir unsere Tintenfunktionalität hinzu.

Schritt 2: Verwenden von InkCanvas zur Unterstützung grundlegender Freihandeingaben

Vielleicht haben Sie bereits bemerkt, dass die App in ihrer ursprünglichen Form Ihnen nicht erlaubt, mit dem Stift etwas zu zeichnen (obwohl Sie den Stift als Standardzeigergerät zur Interaktion mit der App verwenden können).

Lass uns diesen kleinen Mangel in diesem Schritt beheben.

Wenn Sie grundlegende Freihandfunktionen hinzufügen möchten, platzieren Sie einfach ein InkCanvas Steuerelement auf der entsprechenden Seite in Ihrer App.

Hinweis

Ein InkCanvas verfügt standardmäßig über die Höhe und Breite von null, es sei denn, es ist das untergeordnete Element eines Elements, das seine untergeordneten Elemente automatisch größenmäßig anpasst.

Im Beispiel:

1. Öffnen Sie die MainPage.xaml.cs Datei.
2. Suchen Sie den Code, der mit dem Titel dieses Schritts gekennzeichnet ist ("// Schritt 2: Verwenden Sie InkCanvas, um einfache Freihandeingaben zu unterstützen").
3. Entkommentieren Sie die folgenden Zeilen. (Diese Verweise sind für die funktionalität erforderlich, die in den nachfolgenden Schritten verwendet wird).

    using Windows.UI.Input.Inking;
    using Windows.UI.Input.Inking.Analysis;
    using Windows.UI.Xaml.Shapes;
    using Windows.Storage.Streams;

4. Öffnen Sie die Datei "MainPage.xaml".
5. Suchen Sie den Code, der mit dem Titel dieses Schrittes gekennzeichnet ist ("<!-- Schritt 2: Einfache Freihandzeichnung mit InkCanvas -->").
6. Heben Sie die Auskommentierung der folgenden Zeile auf.

    <InkCanvas x:Name="inkCanvas" />

Das ist alles!

Führen Sie nun die App erneut aus. Machen Sie weiter und schreiben Sie Ihren Namen auf, oder - wenn Sie einen Spiegel halten oder ein sehr gutes Gedächtnis haben - zeichnen Sie Ihr Selbstporträt.

Schritt 3: Unterstützung von Freihandzeichnen mit Touch und Maus

Sie werden feststellen, dass digitale Tinte standardmäßig nur für Stifteingabe unterstützt wird. Wenn Sie versuchen, mit ihrem Finger, Ihrer Maus oder Ihrem Touchpad zu schreiben oder zu zeichnen, werden Sie enttäuscht sein.

Um dieses Stirnrunzeln in ein Lächeln zu verwandeln, müssen Sie eine zweite Zeile Code hinzufügen. Diesmal befindet es sich im Code-Behind der XAML-Datei, in der Sie Ihren InkCanvas deklariert haben.

In diesem Schritt führen wir das InkPresenter--Objekt ein, das eine feiner abgestimmte Verwaltung der Eingabe, Verarbeitung und Darstellung von Freihandeingaben (sowohl standard als auch geändert) auf Ihrem InkCanvasermöglicht.

Hinweis

Die Standard-Freihandeingabe (Stiftspitze oder Radiererspitze/-taste) wird nicht mit einer sekundären Hardwareoption verändert, z. B. einer Stifttaste, einer rechten Maustaste oder einem ähnlichen Mechanismus.

Um Maus- und Toucheingabefunktionen zu aktivieren, stellen Sie die Eigenschaft InputDeviceTypes des InkPresenter auf die Kombination der gewünschten Werte von CoreInputDeviceTypes ein.

Im Beispiel:

1. Öffnen Sie die MainPage.xaml.cs Datei.
2. Suchen Sie den Code, der mit dem Titel dieses Schritts gekennzeichnet ist ("// Schritt 3: Unterstützung der Freihandeingabe mit Toucheingabe und Maus").
3. Entkommentieren Sie die folgenden Zeilen.

    inkCanvas.InkPresenter.InputDeviceTypes =
        Windows.UI.Core.CoreInputDeviceTypes.Mouse | 
        Windows.UI.Core.CoreInputDeviceTypes.Touch | 
        Windows.UI.Core.CoreInputDeviceTypes.Pen;

Führen Sie die App erneut aus, und Sie werden feststellen, dass all Ihre auf einem Computerbildschirm gemalten Fingerträume wahr geworden sind!

Hinweis

Wenn Sie Eingabegerätetypen angeben, müssen Sie die Unterstützung für jeden bestimmten Eingabetyp (einschließlich Stift) angeben, da das Festlegen dieser Eigenschaft die Standardeinstellung InkCanvas außer Kraft setzt.

Schritt 4: Hinzufügen einer Freihandsymbolleiste

Die InkToolbar - ist ein UWP-Plattformsteuerelement, das eine anpassbare und erweiterbare Sammlung von Tasten bereitstellt, um Freihandfunktionen zu aktivieren.

Standardmäßig enthält die InkToolbar- einen einfachen Satz von Schaltflächen, mit denen Benutzer schnell zwischen einem Stift, einem Bleistift, einem Textmarker oder einem Radierer auswählen können, die zusammen mit einer Schablone (Lineal oder Protractor) verwendet werden können. Die Schaltflächen für Stift, Bleistift und Textmarker bieten jeweils ein Flyout zum Auswählen der Tintenfarbe und Strichgröße an.

Um eine Standard-InkToolbar- zu einer Freihand-App hinzuzufügen, platzieren Sie sie einfach auf derselben Seite wie Ihre InkCanvas- und verbinden Sie die beiden Steuerelemente miteinander.

Im Beispiel

1. Öffnen Sie die Datei "MainPage.xaml".
2. Suchen Sie den Code, der mit dem Titel dieses Schritts gekennzeichnet ist ("<!-- Schritt 4: Hinzufügen einer Zeichenwerkzeugleiste -->").
3. Entkommentieren Sie die folgenden Zeilen.

    <InkToolbar x:Name="inkToolbar" 
                        VerticalAlignment="Top" 
                        Margin="10,0,10,0"
                        TargetInkCanvas="{x:Bind inkCanvas}">
    </InkToolbar>

Hinweis

Um die Benutzeroberfläche und den Code so übersichtlich und einfach wie möglich zu halten, verwenden wir ein einfaches Rasterlayout und deklarieren die InkToolbar- nach dem InkCanvas- in einer Rasterzeile. Wenn Sie sie vor dem InkCanvas-deklarieren, wird die InkToolbar- zuerst unter dem Zeichenbereich gerendert und für den Benutzer nicht zugänglich.

Führen Sie nun die App erneut aus, um die InkToolbar anzuzeigen, und probieren Sie die Tools aus.

Herausforderung: Hinzufügen einer benutzerdefinierten Schaltfläche

Hier ist ein Beispiel für eine benutzerdefinierte InkToolbar- (aus Sketchpad im Windows Ink-Arbeitsbereich).

Weitere Informationen zum Anpassen einer InkToolbar-finden Sie unter Hinzufügen einer InkToolbar zu einer Windows-App-Freihand-App.

Schritt 5: Schrifterkennung unterstützen

Nachdem Sie nun in Ihrer App schreiben und zeichnen können, versuchen wir, mit diesen Skizzen etwas hilfreiches zu tun.

In diesem Schritt verwenden wir die Schrifterkennungsfunktionen von Windows Ink, um das Geschriebene zu entschlüsseln.

Hinweis

Durch die Einstellungen für Stift und Windows Ink kann die Schrifterkennung verbessert werden:

1. Öffnen Sie das Startmenü, und wählen Sie Einstellungenaus.
2. Wählen Sie auf dem Bildschirm "Einstellungen" die Option "Gerätestift>" und "Windows Ink" aus.
3. Wählen Sie Lernen Sie meine Handschrift kennen, um das Dialogfeld Handschrifteinstellung zu öffnen.

Im Beispiel:

1. Öffnen Sie die Datei "MainPage.xaml".
2. Suchen Sie den Code, der mit dem Titel dieses Schritts gekennzeichnet ist ("<!-- Schritt 5: Unterstützung der Schrifterkennung ->").
3. Entkommentieren Sie die folgenden Zeilen.

    <Button x:Name="recognizeText" 
            Content="Recognize text"  
            Grid.Row="0" Grid.Column="0"
            Margin="10,10,10,10"
            Click="recognizeText_ClickAsync"/>
    <TextBlock x:Name="recognitionResult" 
                Text="Recognition results: "
                VerticalAlignment="Center" 
                Grid.Row="0" Grid.Column="1"
                Margin="50,0,0,0" />

4. Öffnen Sie die MainPage.xaml.cs Datei.
5. Suchen Sie den Code, der mit dem Titel dieses Schritts gekennzeichnet ist (" Schritt 5: Unterstützen der Schrifterkennung").
6. Entkommentieren Sie die folgenden Zeilen.

• Dies sind die globalen Variablen, die für diesen Schritt erforderlich sind.

    InkAnalyzer analyzerText = new InkAnalyzer();
    IReadOnlyList<InkStroke> strokesText = null;
    InkAnalysisResult resultText = null;
    IReadOnlyList<IInkAnalysisNode> words = null;

• Dies ist der Handler für die Schaltfläche Erkennen von Text, wo wir die Erkennungsverarbeitung durchführen.

    private async void recognizeText_ClickAsync(object sender, RoutedEventArgs e)
    {
        strokesText = inkCanvas.InkPresenter.StrokeContainer.GetStrokes();
        // Ensure an ink stroke is present.
        if (strokesText.Count > 0)
        {
            analyzerText.AddDataForStrokes(strokesText);

            resultText = await analyzerText.AnalyzeAsync();

            if (resultText.Status == InkAnalysisStatus.Updated)
            {
                words = analyzerText.AnalysisRoot.FindNodes(InkAnalysisNodeKind.InkWord);
                foreach (var word in words)
                {
                    InkAnalysisInkWord concreteWord = (InkAnalysisInkWord)word;
                    foreach (string s in concreteWord.TextAlternates)
                    {
                        recognitionResult.Text += s;
                    }
                }
            }
            analyzerText.ClearDataForAllStrokes();
        }
    }

7. Führen Sie die App erneut aus, schreiben Sie etwas, und klicken Sie dann auf die Schaltfläche Text erkennen
8. Die Ergebnisse der Erkennung werden neben der Schaltfläche angezeigt.

Herausforderung 1: Internationale Anerkennung

Windows Ink unterstützt die Texterkennung für viele der sprachen, die von Windows unterstützt werden. Jedes Sprachpaket enthält ein Schrifterkennungsmodul, das mit dem Sprachpaket installiert werden kann.

Zielen Sie auf eine bestimmte Sprache, indem Sie die installierten Schrifterkennungsmodule abfragen.

Weitere Informationen zur internationalen Schrifterkennung finden Sie unter Windows Ink-Striche als Text erkennen.

Herausforderung 2: Dynamische Erkennung

Für dieses Lernprogramm ist es erforderlich, dass eine Schaltfläche gedrückt wird, um die Erkennung zu initiieren. Sie können die dynamische Erkennung auch mithilfe einer einfachen Zeitfunktion durchführen.

Weitere Informationen zur dynamischen Erkennung finden Sie unter Windows Ink-Striche als Text erkennen.

Schritt 6: Erkennen von Formen

Ok, jetzt können Sie Ihre handschriftlichen Notizen in etwas Lesbareres umwandeln. Aber was ist mit diesen wackeligen, koffeinierten Kritzeleien aus Ihrer morgendlichen Flowcharters-Anonym-Sitzung?

Mithilfe der Tintenanalyse kann Ihre App auch eine Reihe von Grundformen erkennen, einschließlich:

• Kreis
• Diamant
• Zeichnung
• Ellipse
• GleichseitigesDreieck
• Sechseck
• Gleichschenkliges Dreieck
• Parallelogramm
• Fünfeck
• Viereck
• Rechteck
• RightTriangle
• Quadrat
• Trapez
• Dreieck

In diesem Schritt verwenden wir die Formenerkennungsfunktionen von Windows Ink, um Ihre Kritzeleien zu verbessern.

In diesem Beispiel versuchen wir nicht, Freihandstriche neu zu zeichnen (obwohl dies möglich ist). Stattdessen fügen wir unter "InkCanvas" einen Standardbereich hinzu, in dem wir äquivalente Ellipse- oder Polygonobjekte zeichnen, die von der ursprünglichen Freihandeingabe abgeleitet sind. Anschließend löschen wir die entsprechenden Tintenstriche.

Im Beispiel:

1. Öffnen der Datei "MainPage.xaml"
2. Suchen Sie den Code, der mit dem Titel dieses Schritts gekennzeichnet ist ("<!-- Schritt 6: Formen erkennen -->")
3. Entkommentieren Sie diese Zeile.

   <Canvas x:Name="canvas" />

   And these lines.

    <Button Grid.Row="1" x:Name="recognizeShape" Click="recognizeShape_ClickAsync"
        Content="Recognize shape" 
        Margin="10,10,10,10" />

4. Öffnen der datei MainPage.xaml.cs
5. Suchen Sie den Code, der mit dem Titel dieses Schritts gekennzeichnet ist ("// Schritt 6: Shapes erkennen")
6. Kommentar für diese Zeilen aufheben:

    private async void recognizeShape_ClickAsync(object sender, RoutedEventArgs e)
    {
        ...
    }

    private void DrawEllipse(InkAnalysisInkDrawing shape)
    {
        ...
    }

    private void DrawPolygon(InkAnalysisInkDrawing shape)
    {
        ...
    }

7. Führen Sie die App aus, zeichnen Sie einige Formen, und klicken Sie auf die Schaltfläche Form erkennen

Hier ist ein Beispiel für ein rudimentäres Flussdiagramm aus einer digitalen Serviette.

Dies ist dasselbe Flussdiagramm nach der Shape-Erkennung.

Schritt 7: Ink speichern und laden

Sie sind also mit dem Kritzeln fertig und mögen, was Sie sehen, denken aber, dass Sie später ein paar Dinge ändern möchten? Sie können Ihre Freihandstriche in einer ISF-Datei (Ink Serialized Format) speichern und sie zur Bearbeitung laden, wenn Sie inspiriert sind.

Die ISF-Datei ist ein einfaches GIF-Bild, das zusätzliche Metadaten enthält, die Stricheigenschaften und deren Verhalten beschreiben. Apps, die keine Freihandeingaben aktiviert haben, können die zusätzlichen Metadaten ignorieren und weiterhin das grundlegende GIF-Bild (einschließlich Alphakanalhintergrundtransparenz) laden.

Hinweis

Die Ink Serialized Format (ISF)-Spezifikation kann vom Microsoft Download Centerheruntergeladen werden.

In diesem Schritt verbinden wir die Schaltflächen Speichern und Laden neben der Freihandsymbolleiste.

Im Beispiel:

1. Öffnen Sie die Datei "MainPage.xaml".
2. Suchen Sie den Code, der mit dem Titel dieses Schritts versehen ist ("<!-- Schritt 7: Speichern und Laden von Tinte -->").
3. Entkommentieren Sie die folgenden Zeilen.

    <Button x:Name="buttonSave" 
            Content="Save" 
            Click="buttonSave_ClickAsync"
            Width="100"
            Margin="5,0,0,0"/>
    <Button x:Name="buttonLoad" 
            Content="Load"  
            Click="buttonLoad_ClickAsync"
            Width="100"
            Margin="5,0,0,0"/>

4. Öffnen Sie die MainPage.xaml.cs Datei.
5. Suchen Sie den Code, der mit dem Titel dieses Schritts gekennzeichnet ist ("// Schritt 7: Speichern und Laden von Freihandzeichnungen").
6. Entkommentieren Sie die folgenden Zeilen.

    private async void buttonSave_ClickAsync(object sender, RoutedEventArgs e)
    {
        ...
    }

    private async void buttonLoad_ClickAsync(object sender, RoutedEventArgs e)
    {
        ...
    }

7. Führen Sie die App aus, und zeichnen Sie etwas.
8. Wählen Sie die Schaltfläche Speichern aus und speichern Sie Ihre Zeichnung.
9. Löschen Sie die Tinte, oder starten Sie die App neu.
10. Wählen Sie die Schaltfläche Laden aus und öffnen Sie die Tintendatei, die Sie gerade gespeichert haben.

Herausforderung: Verwenden der Zwischenablage, um Freihandstriche zu kopieren und einzufügen

Windows Ink unterstützt auch das Kopieren und Einfügen von Freihandstrichen in und aus der Zwischenablage.

Weitere Informationen zur Verwendung der Zwischenablage mit Freihandeingabe finden Sie unter Speichern und Abrufen der Windows Ink-Strichdaten.

Zusammenfassung

Herzlichen Glückwunsch, Sie haben die Eingabe abgeschlossen: Unterstützung von Freihandeingaben in Ihrer Windows-App Lernprogramm! Wir haben Ihnen den grundlegenden Code gezeigt, der für die Unterstützung von Freihand in Ihren Windows-Apps erforderlich ist und wie Sie einige der umfangreicheren Benutzeroberflächen bereitstellen, die von der Windows Ink-Plattform unterstützt werden.

Verwandte Artikel

• Stiftinteraktionen und Windows Ink in Windows-Apps

Beispiele

• Tintenanalyseprobe (grundlegend) (C#)
• Ink-Handschrifterkennungsbeispiel (C#)
• Speichern und Laden von Tintenstrichen aus einer Ink Serialized Format (ISF) Datei
• Speichern und Laden von Freihandstrichen aus der Zwischenablage
• Beispiel für Position und Ausrichtung der Ink-Toolbar (einfach)
• Beispiel zur Position und Ausrichtung der Tinten-Symbolleiste (dynamisch)
• Einfaches Tintenbeispiel (C#/C++)
• Komplexes Tintenmuster (C++)
• Tintenmuster (JavaScript)
• Erste Schritte-Tutorial: Unterstützung für Ink in Ihrer Windows-App
• Farbbuchbeispiel
• Beispiel für familiäre Notizen