Tutorial: Freihandeingaben in Ihrer Windows-App unterstützen

Surface Pen (erhältlich für den Kauf 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 Tintenunterstützung
• Hinzufügen einer Tintentoolbar
• Unterstützen der Schrifterkennung
• Unterstützung der grundlegenden Formenerkennung
• Speichern und Laden von Digital Ink

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
• 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 App "Hello, world" (XAML)
• [OPTIONAL] Ein digitaler Stift und ein Computer mit einer Anzeige, die Eingaben von diesem digitalen Stift unterstützt.

Beispielcode

Im Verlauf dieses Tutorials verwenden wir eine Beispiel-Freihand-App, um die erläuterten Konzepte und Funktionen zu demonstrieren.

Laden Sie dieses Visual Studio-Beispiel und den Quellcode von GitHub unter "windows-appsample-get-started-ink" herunter:

1. Wählen Sie die grüne Schaltfläche Clone or download aus.
   
2. Wenn Sie über ein GitHub-Konto verfügen, können Sie das Repository auf Ihrem lokalen Computer klonen, indem Sie "In Visual Studio öffnen" 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 " aus (Sie müssen regelmäßig zurückkehren, um die neuesten Updates herunterzuladen)

Komponenten der Windows Ink-Plattform

Diese Objekte stellen den größten Teil des Inking-Erlebnisses für Windows-Apps bereit.

Schritt 1: Ausführen des Beispiels

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 Dropdown-Menü "Lösungsplattformen" auf eine Auswahl ein, die keine Arm-Option ist.

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

   Hinweis

   Alternativ können Sie das Menüelement " Debuggen>starten" auswählen oder die hier gezeigte Schaltfläche " Ausführen des lokalen Computers " auswählen.

Das Fenster der App öffnet sich, und nachdem ein Startbildschirm für einige Sekunden erscheint, siehst du diesen Anfangsbildschirm.

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 Tintenfunktionen hinzu.

Schritt 2: Verwenden von InkCanvas, um grundlegende Freihandeingaben zu unterstützen.

Vielleicht haben Sie bereits bemerkt, dass die App in der ursprünglichen Form nichts mit dem Stift zeichnen kann (obwohl Sie den Stift als Standardzeigergerät für die Interaktion mit der App verwenden können).

Lassen Sie 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.

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. Heben Sie die Kommentierung der folgenden Zeilen auf. (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 Schritts gekennzeichnet ist ("<-- Schritt 2: Einfache Freihandeingabe mit InkCanvas -->").
6. Entkommentieren Sie die folgende Zeile.

    <InkCanvas x:Name="inkCanvas" />

Das ist alles!

Führen Sie nun die App erneut aus. Fahren Sie fort und schreiben Sie Ihren Namen oder (wenn Sie einen Spiegel in der Hand halten oder ein sehr gutes Gedächtnis haben) zeichnen Sie Ihr Selbstporträt.

Schritt 3: Unterstützen der Freihandeingabe mit Toucheingabe und Maus

Sie werden feststellen, dass digitales Inking standardmäßig nur für die Eingabe mit dem Stift 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 die Stimmung zu heben, müssen Sie eine zweite Code-Zeile hinzufügen. Dieses Mal befindet es sich im Code-Behind für die XAML-Datei, in der Sie Ihren InkCanvas deklariert haben.

In diesem Schritt stellen wir das InkPresenter-Objekt vor, das eine präzisere Verwaltung der Eingabe, Verarbeitung und Rendering von Freihandeingaben (Standard und geändert) auf Ihrem InkCanvas bietet.

Um Maus- und Toucheingaben beim Schreiben zu aktivieren, legen Sie die InputDeviceTypes-Eigenschaft des InkPresenter auf die gewünschte Kombination von CoreInputDeviceTypes-Werten fest.

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 alle Ihre Träume vom Fingerpainting auf einem Computerbildschirm wahr geworden sind!

Schritt 4: Hinzufügen einer Zeichenwerkzeugleiste

Die InkToolbar ist ein UWP-Plattform-Steuerelement, das eine anpassbare und erweiterbare Sammlung von Schaltflächen zum Aktivieren von freihand-bezogenen Funktionen bereitstellt.

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 Stift-, Bleistift- und Textmarkerschaltflächen bieten jeweils ein Flyout zum Auswählen von Tintenfarbe und Strichgröße.

Wenn Sie einer Zeichen-App eine Standard-InkToolbar hinzufügen möchten, platzieren Sie sie einfach auf derselben Seite wie Ihr InkCanvas und verknüpfen Sie die beiden Steuerungselemente.

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 Freihandsymbolleiste -->").
3. Heben Sie die Kommentierung der folgenden Zeilen auf.

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

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

Herausforderung: Hinzufügen einer benutzerdefinierten Schaltfläche

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

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

Schritt 5: Unterstützen der Schrifterkennung

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 Schrifterkennungsfeatures von Windows Ink, um zu versuchen, das geschriebene Element zu entschlüsseln.

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. Entfernen Sie die Auskommentierung der 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. Entfernen Sie die Auskommentierung der 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 " Text erkennen ", in dem die Erkennungsverarbeitung erfolgt.

    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.

Richten Sie sich auf eine bestimmte Sprache, indem Sie die installierten Handschrifterkennungsmodule abfragen.

Weitere Informationen zur internationalen Schrifterkennung finden Sie unter Erkennen von Windows Ink-Strichen als Text.

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 dynamische Erkennung auch mithilfe einer einfachen Zeitsteuerungsfunktion durchführen.

Weitere Informationen zur dynamischen Erkennung finden Sie unter Erkennen von Windows Ink-Strichen als Text.

Schritt 6: Erkennen von Formen

Ok, jetzt können Sie Ihre handschriftlichen Notizen in eine lesbarere Form konvertieren. Aber wie steht es mit den wackeligen, koffeinhaltigen Kritzeleien von Ihrem morgendlichen Treffen der Anonymen Flussdiagrammer?

Durch die Nutzung der Ink-Analyse ist Ihre App in der Lage, eine Reihe von Kernformen zu erkennen, darunter:

• Kreis
• Diamant
• Zeichnung
• Ellipse
• Gleichseitiges Dreieck
• Sechseck
• IsoscelesTriangle
• Parallelogramm
• Fünfeck
• Viereck
• Rechteck
• RightTriangle
• Quadrat
• Trapez
• Triangle

In diesem Schritt verwenden wir die Formenerkennungsfunktionen von Windows Ink, um Ihre Doodles zu bereinigen.

In diesem Beispiel versuchen wir nicht, Freihandstriche neu zu zeichnen (obwohl dies möglich ist). Stattdessen fügen wir unter dem InkCanvas ein Standard-Canvas hinzu, in dem wir eine äquivalente Ellipse oder ein Polygonobjekt zeichnen, das von der ursprünglichen Tinteingabe abgeleitet ist. 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: Shapes erkennen -->")
3. Kommentieren Sie diese Zeile aus.

   <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 Shapes, 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: Speichern und Laden von Tinte

Sind Sie also mit dem Zeichnen fertig und Ihnen gefällt, was Sie sehen? Möchten Sie möglicherweise später ein paar Dinge anpassen? Sie können Ihre Freihandstriche in einer Ink Serialized Format (ISF)-Datei speichern und sie zur Bearbeitung laden, wenn Sie die Inspiration überkommt.

Die ISF-Datei ist ein einfaches GIF-Bild, das zusätzliche Metadaten enthält, die Freihandstricheigenschaften und -verhalten beschreiben. Apps, bei denen keine Tinte aktiviert ist, können die zusätzlichen Metadaten ignorieren und trotzdem das basische GIF-Bild (einschließlich Hintergrundtransparenz des Alphakanals) laden.

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 gekennzeichnet ist ("<-- Schritt 7: Speichern und Laden von Ink-Daten -->").
3. Heben Sie die Kommentare der folgenden Zeilen auf.

    <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 Tinte").
6. Entfernen Sie die Auskommentierung der 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 soeben gespeicherte Tinten-Datei.

Herausforderung: Verwenden der Zwischenablage zum Kopieren und Einfügen von Freihandstrichen

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

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

Zusammenfassung

Herzlichen Glückwunsch, Sie haben das Tutorial Input: Unterstützung von Freihandeingaben in Ihrer Windows-App abgeschlossen! Wir haben Ihnen den Grundcode gezeigt, der für die Unterstützung von Ink in Ihren Windows-Apps erforderlich ist, und wie Sie einige der umfangreicheren Benutzererfahrungen bereitstellen, die von der Windows Ink-Plattform unterstützt werden.

Verwandte Artikel

• Stiftinteraktionen und Windows Ink in Windows-Apps

Beispiele

• Tintenanalysebeispiel (einfach) (C#)
• Beispiel für die Tintenhandschriftenerkennung (C#)
• Speichern und Laden von Freihandstrichen aus einer ISF-Datei (Ink Serialized Format)
• Speichern und Laden von Freihandstrichen aus der Zwischenablage
• Beispiel für Position und Ausrichtung der Freihandsymbolleiste (einfach)
• Beispiel für Position und Ausrichtung der Freihandsymbolleiste (dynamisch)
• Einfaches Tintenmuster (C#/C++)
• Komplexes Tintenbeispiel (C++)
• Tintenprobe (JavaScript)
• Erste Schritte Anleitung: Unterstützung der Freihandfunktion in Ihrer Windows-App
• Farbbuchbeispiel
• Beispiel für Familiennotizen