Freigeben über

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

  • Artikel

Surface Pen Hero-Bild.
Surface Pen (erhältlich im Microsoft Store).

In diesem Tutorial wird beschrieben, wie Sie eine einfache Windows-App erstellen, die das Schreiben und Zeichnen mit Windows Ink unterstützt. Wir verwenden Ausschnitte 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 den einzelnen Schritten erläutert werden.

Wir konzentrieren uns auf Folgendes:

  • Hinzufügen der grundlegenden Freihandunterstützung
  • Hinzufügen einer Freihandsymbolleiste
  • Unterstützen der Handschrifterkennung
  • Unterstützen der grundlegenden Formenerkennung
  • Speichern und Laden von Freihandeingaben

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

Einführung

Mit Windows Ink können Sie Ihren Kunden die digitale Entsprechung nahezu aller vorstellbaren Erfahrungen bieten, die sich mit Stift und Papier erzielen lassen. Das reicht von schnellen, handschriftlichen Notizen und Anmerkungen bis hin zu Whiteboard-Demos sowie von Architektur- und Ingenieurzeichnungen bis hin zu persönlichen Meisterwerken.

Voraussetzungen

Hinweis

Windows Ink kann das Zeichnen per Maus und Touch unterstützen (wir zeigen dies in Schritt 3 dieses Tutorials), aber für eine optimale Windows Ink-Erfahrung empfehlen wir einen digitalen Stift und einen Computer mit einem Display, das die Eingabe über diesen digitalen Stift unterstützt.

Beispielcode

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

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

  1. Wählen Sie die grüne Schaltfläche Klonen oder Herunterladen aus.
    Klonen des Repositorys.
  2. Wenn Sie ein GitHub-Konto haben, können Sie das Repository auf Ihrem lokalen Computer klonen, indem Sie In Visual Studio öffnen auswählen.
  3. Wenn Sie kein GitHub-Konto haben oder nur eine lokale Kopie des Projekts wünschen, wählen Sie ZIP herunterladen aus (Sie müssen regelmäßig wiederkommen, um die neuesten Updates herunterzuladen).

Wichtig

Der Großteil des Codes im Beispiel ist auskommentiert. Beim Durchgehen der einzelnen Schritte werden Sie aufgefordert, die Auskommentierung verschiedener Abschnitte des Codes aufzuheben. Heben Sie in Visual Studio einfach die Codezeilen hervor und drücken Sie STRG-K und dann STRG-U.

Komponenten der Windows Ink-Plattform

Diese Objekte machen einen Großteil der Freihandfunktionen für Windows-Apps aus.

Komponente Beschreibung
InkCanvas Ein XAML-UI-Plattformsteuerelement, das standardmäßig alle Eingaben eines Stifts als Freihandstrich oder Löschstrich annimmt und anzeigt.
InkPresenter Ein CodeBehind-Objekt, das zusammen mit einem InkCanvas-Steuerelement instanziiert wird (über die Eigenschaft InkCanvas.InkPresentert verfügbar gemacht). Dieses Objekt verfügt über alle standardmäßigen Freihandfunktionen, die vom InkCanvas verfügbar gemacht werden, sowie über einen umfassenden Satz von APIs für die weitere Anpassung und Personalisierung.
InkToolbar Ein XAML-UI-Plattformsteuerelement, das eine anpassbare und erweiterbare Sammlung von Schaltflächen enthält, die Freihandfunktionen in einem zugehörigen InkCanvas aktivieren.
IInkD2DRenderer
Diese Funktionalität wird hier nicht behandelt. Weitere Informationen finden Sie im Komplexes Freihandbeispiel.		 Ermöglicht die Wiedergabe von Freihandstrichen im angegebenen Direct2D-Gerätekontext einer Universal Windows-App anstelle des standardmäßigen InkCanvas-Steuerelements.

Schritt 1: Ausführen des Beispiels

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

  1. Öffnen Sie das Beispielprojekt in Visual Studio.

  2. Legen Sie die Dropdownliste Lösungsplattformen auf eine Nicht-Arm-Auswahl fest.

  3. Drücken Sie F5 zum Kompilieren, Bereitstellen und Ausführen.

    Hinweis

    Alternativ können Sie das Menüelement Debuggen>Debugging starten oder die hier gezeigte Ausführungsschaltfläche Lokaler Computer auswählen. Visual Studio-Schaltfläche

Das App-Fenster wird geöffnet, und nachdem ein Begrüßungsbildschirm für einige Sekunden angezeigt wird, ist dieser Anfangsbildschirm zu sehen.

Screenshot der leeren App.

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

Schritt 2: Verwenden von InkCanvas zur Unterstützung der grundlegenden Freihandeingabe

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

Lassen Sie uns diese kleine Unzulänglichkeit in diesem Schritt beheben.

Zum Hinzufügen der grundlegenden Freihandfunktionen können Sie einfach ein InkCanvas-Steuerelement auf der entsprechenden Seite in Ihrer App platzieren.

Hinweis

Ein InkCanvas hat als Standardeigenschaften eine Höhe und Breite von Null, es sei denn, es handelt sich um das untergeordnete Element eines Elements, das die Größe seiner untergeordneten Elemente automatisch ändert.

Im Beispiel:

  1. Öffnen Sie die Datei „MainPage.xaml.cs“.
  2. Suchen Sie den mit dem Titel dieses Schritts gekennzeichneten Code („// Schritt 2: Verwenden von InkCanvas zur Unterstützung der grundlegenden Freihandeingabe“).
  3. Heben Sie die Auskommentierung der folgenden Zeilen auf. (Diese Verweise sind für die Funktionalität in den nachfolgenden Schritten erforderlich).
    using Windows.UI.Input.Inking;
    using Windows.UI.Input.Inking.Analysis;
    using Windows.UI.Xaml.Shapes;
    using Windows.Storage.Streams;
  1. Öffnen Sie die Datei MainPage.xaml.cs.
  2. Suchen Sie den mit dem Titel dieses Schritts gekennzeichneten Code („<!-- Schritt 2: Verwenden von InkCanvas zur Unterstützung der grundlegenden Freihandeingabe -->“).
  3. Heben Sie die Auskommentierung der folgenden Zeile auf.
    <InkCanvas x:Name="inkCanvas" />

Das ist alles!

Führen Sie die App nun erneut aus. Legen Sie los und schreiben Sie Ihren Namen oder (wenn Sie einen Spiegel oder ein sehr gutes Gedächtnis haben) zeichnen Sie Ihr Selbstporträt.

Screenshot der in diesem Thema hervorgehobenen Standard-Freihandbeispiel-App.

Schritt 3: Unterstützung der Freihandeingabe per Toucheingabe und Maus

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

Um das zu ändern, müssen Sie eine zweite Codezeile hinzufügen. Das geschieht dieses Mal im CodeBehind 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 von Eingabe, Verarbeitung und Rendering von Freihandeingaben (Standard und geändert) auf IhremInkCanvas ermöglicht.

Hinweis

Die standardmäßige Freihandeingabe (Stiftspitze oder Radiererspitze/-taste) wird nicht über eine sekundäre Hardware geändert, z. B. eine Stift-Drucktaste, eine rechte Maustaste oder einen ähnlichen Mechanismus.

Legen Sie zum Aktivieren der Maus- und Toucheingabe die Eigenschaft InputDeviceTypes des InkPresenter auf die gewünschte Kombination von CoreInputDeviceTypes-Werten fest.

Im Beispiel:

  1. Öffnen Sie die Datei „MainPage.xaml.cs“.
  2. Suchen Sie den mit dem Titel dieses Schritts gekennzeichneten Code („// Schritt 3: Unterstützung der Freihandeingabe per Toucheingabe und Maus“).
  3. Heben Sie die Auskommentierung der folgenden Zeilen auf.
    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 Zeichnen mit dem Finger auf einem Computerbildschirm wahr geworden sind!

Hinweis

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

Schritt 4: Hinzufügen einer Freihandsymbolleiste

Die InkToolbar ist ein UWP-Plattformsteuerelement mit einer anpassbaren und erweiterbaren Sammlung von Schaltflächen zum Aktivieren von Freihandfunktionen.

Standardmäßig enthält die InkToolbar einen einfachen Satz von Schaltflächen, mit denen Benutzer schnell einen Stift, Bleistift, Textmarker oder Radierer auswählen können, der jeweils zusammen mit einer Schablone (Lineal oder Winkelmesser) verwendet werden kann. Die Stift-, Bleistift- und Textmarkerschaltflächen verfügen jeweils auch über ein Flyout zum Auswählen von Freihandfarbe und Strichgröße.

Wenn Sie einer Freihand-App eine Standard-InkToolbar hinzufügen möchten, müssen Sie sie einfach auf derselben Seite wie Ihr InkCanvas platzieren und die beiden Steuerelemente zuordnen.

Im Beispiel:

  1. Öffnen Sie die Datei MainPage.xaml.cs.
  2. Suchen Sie den mit dem Titel dieses Schritts gekennzeichneten Code („<!-- Schritt 4: Hinzufügen einer Freihandsymbolleiste -->“).
  3. Heben Sie die Auskommentierung der folgenden Zeilen auf.
    <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 Canvas wiedergegeben und ist für den Benutzer nicht zugänglich.

Führen Sie nun die App erneut aus, damit die InkToolbar angezeigt wird, und probieren Sie einige der Tools aus.

Screenshot der in diesem Thema hervorgehobenen Standard-Freihandbeispiel-App mit der standardmäßigen InkToolbar.

Herausforderung: Hinzufügen einer benutzerdefinierten Schaltfläche

Hier sehen Sie ein Beispiel für eine benutzerdefinierte InkToolbar (vom Sketchpad im Windows Ink-Arbeitsbereich).

Screenshot der Freihandsymbolleiste vom Skizzenblock im Freihandarbeitsbereich.

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

Schritt 5: Unterstützung der Handschrifterkennung

Nachdem Sie nun in Ihrer App schreiben und zeichnen können, versuchen wir jetzt, etwas Sinnvolles damit anzufangen.

In diesem Schritt versuchen wir, mit den Handschrifterkennungsfunktionen von Windows Ink das Geschriebene zu entziffern.

Hinweis

Die Handschrifterkennung kann über die Einstellungen für Stift und Windows Ink verbessert werden:

  1. Öffnen Sie das Startmenü und wählen Sie Einstellungen aus.
  2. Wählen Sie im Einstellungsbildschirm Geräte>Stift und Windows Ink aus. Screenshot der Seite
  3. Wählen Sie Kennenlernen meiner Handschrift aus, um den Dialog Handschrift personalisieren zu öffnen. Screenshot des Dialogfelds

Im Beispiel:

  1. Öffnen Sie die Datei MainPage.xaml.cs.
  2. Suchen Sie den mit dem Titel dieses Schritts gekennzeichneten Code („<!-- Schritt 5: Unterstützung der Handschrifterkennung -->“).
  3. Heben Sie die Auskommentierung der folgenden Zeilen auf.
    <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" />
  1. Öffnen Sie die Datei „MainPage.xaml.cs“.
  2. Suchen Sie den mit dem Titel dieses Schritts gekennzeichneten Code („Schritt 5: Unterstützung der Handschrifterkennung“).
  3. Heben Sie die Auskommentierung der folgenden Zeilen auf.
  • 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();
        }
    }
  1. Führen Sie die App erneut aus, schreiben Sie etwas, und klicken Sie dann auf die Schaltfläche Text erkennen.
  2. Die Ergebnisse der Erkennung werden neben der Schaltfläche angezeigt.

Herausforderung 1: Internationale Erkennung

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

Visieren Sie durch Abfragen der installierten Handschrifterkennungsmodule eine bestimmte Sprache an.

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

Herausforderung 2: Dynamische Erkennung

Für dieses Tutorial 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 Timingfunktion 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 etwas besser Lesbares konvertieren. Aber was ist mit diesem wackeligen Gekritzel aus den anonymen Flussdiagrammen Ihrer morgendlichen Besprechung?

Mithilfe der Freihandanalyse kann Ihre App auch eine Reihe von Kernformen erkennen wie:

  • Kreis
  • Diamond
  • Zeichnung
  • Ellipse
  • Gleichseitiges Dreieck
  • Sechseck
  • Gleichschenkliges Dreieck
  • Parallelogramm
  • Fünfeck
  • Viereck
  • Rechteck
  • Rechtwinkliges Dreieck
  • Quadrat
  • Trapez
  • Dreieck

In diesem Schritt versuchen wir Ihr Gekritzel mit den Formerkennungsfunktionen von Windows Ink in Reine zu bringen.

In diesem Beispiel versuchen wir nicht, Freihandstriche neu zu zeichnen (obwohl dies möglich ist). Stattdessen fügen wir im InkCanvas einen Standardcanvas hinzu, in dem wir entsprechende Ellipsen- oder Polygonobjekte zeichnen, die aus der ursprünglichen Freihandeingabe abgeleitet sind. Anschließend löschen wir die entsprechenden Freihandstriche.

Im Beispiel:

  1. Öffnen Sie die Datei MainPage.xaml
  2. Suchen Sie den mit dem Titel dieses Schritts gekennzeichneten Code („<!-- Schritt 6: Erkennen von Formen -->“)
  3. Heben Sie die Auskommentierung dieser Zeile auf.
   <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" />
  1. Öffnen Sie die Datei MainPage.xaml.cs
  2. Suchen Sie den mit dem Titel dieses Schritts gekennzeichneten Code („// Schritt 6: Erkennen von Formen“)
  3. Heben Sie die Auskommentierung dieser Zeilen auf:
    private async void recognizeShape_ClickAsync(object sender, RoutedEventArgs e)
    {
        ...
    }

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

    private void DrawPolygon(InkAnalysisInkDrawing shape)
    {
        ...
    }
  1. 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 von einer digitalen Serviette.

Screenshot eines rudimentären Flussdiagramms aus einer digitalen Serviette.

Hier ist dasselbe Flussdiagramm nach der Formenerkennung.

Screenshot des Flussdiagramms, nachdem der Benutzer das Shape

Schritt 7: Speichern und Laden von Freihandeingaben

Sie haben also fertig gekritzelt und es gefällt Ihnen, was Sie sehen, aber Sie möchten vielleicht später ein paar Dinge optimieren? Sie können Ihre Freihandstriche in einer ISF-Datei (Ink Serialized Format) speichern und sie zur Bearbeitung laden, wenn immer die Inspiration Sie überkommt.

Die ISF-Datei ist ein einfaches GIF-Bild mit zusätzlichen Metadaten, die die Eigenschaften und das Verhalten von Freihandstrichen und beschreiben. Apps ohne aktivierte Freihandeingabe können die zusätzlichen Metadaten ignorieren und weiterhin das einfache GIF-Bild (einschließlich Alphakanal-Hintergrundtransparenz) laden.

Hinweis

Die Spezifikation für serialisiertes Freihandformat (Ink Serialized Format, ISF) kann aus dem Microsoft Download Center heruntergeladen werden.

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

Im Beispiel:

  1. Öffnen Sie die Datei MainPage.xaml.cs.
  2. Suchen Sie den mit dem Titel dieses Schritts gekennzeichneten Code („<!-- Schritt 7: Speichern und Laden von Freihandeingaben -->“).
  3. Heben Sie die Auskommentierung 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"/>
  1. Öffnen Sie die Datei „MainPage.xaml.cs“.
  2. Suchen Sie den mit dem Titel dieses Schritts gekennzeichneten Code („// Schritt 7: Speichern und Laden von Freihandeingaben“).
  3. Heben Sie die Auskommentierung der folgenden Zeilen auf.
    private async void buttonSave_ClickAsync(object sender, RoutedEventArgs e)
    {
        ...
    }

    private async void buttonLoad_ClickAsync(object sender, RoutedEventArgs e)
    {
        ...
    }
  1. Führen Sie die App aus, und zeichnen Sie etwas.
  2. Wählen Sie die Schaltfläche Speichern aus, und speichern Sie Ihre Zeichnung.
  3. Löschen Sie die Freihandeingabe oder starten Sie die App neu.
  4. Wählen Sie die Schaltfläche Laden aus und öffnen Sie die soeben gespeicherte Freihanddatei.

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

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 von Windows Ink-Strichdaten.

Zusammenfassung

Herzlichen Glückwunsch, Sie haben das Tutorial Eingabe: Unterstützen von Freihandeingaben in Ihrer Windows-App abgeschlossen! Wir haben Ihnen gezeigt, welcher grundlegende Code zur Unterstützung der Freihandeingabe in Ihren Windows-Apps erforderlich ist und wie Sie einige der umfangreicheren Benutzererlebnisse bereitstellen können, die von der Windows Ink-Plattform unterstützt werden.

Beispiele