Steuerelemente für Tinteingaben

Es gibt zwei verschiedene Steuerelemente, die Freihandeingaben in Windows-Apps erleichtern: InkCanvas und InkToolbar.

Das InkCanvas-Steuerelement stellt die Stifteingabe entweder als Zeichenstrich (unter Verwendung der Standardeinstellungen für Farbe und Dicke) oder als Radierstrich dar. Bei diesem Steuerelement handelt es sich um ein transparentes Überlagerungselement, das keine integrierte Benutzeroberfläche zum Ändern der standardmäßigen Zeichenstricheigenschaften enthält.

Hinweis

InkCanvas kann so konfiguriert werden, dass ähnliche Funktionen für Maus- und Toucheingaben unterstützt werden.

Da das InkCanvas-Steuerelement keine Unterstützung für die Änderung der Standardeinstellung für den Zeichenstrich bietet, kann es mit einem InkToolbar-Steuerelement gekoppelt werden. Die InkToolbar enthält eine benutzerdefinierte und erweiterbare Sammlung von Schaltflächen, die die Funktionen in einem zugehörigen InkCanvas freischalten, die sich auf digitale Tinte beziehen.

Die InkToolbar enthält standardmäßig Schaltflächen zum Zeichnen, Löschen, Hervorheben sowie zum Anzeigen eines Lineals. Abhängig von der Funktion werden weitere Einstellungen und Befehle, wie z.B. für Tintenfarbe, Strichstärke und das Löschen aller Tinte, in einem Flyout bereitgestellt.

Hinweis

InkToolbar unterstützt Stift- und Mauseingaben und kann für die Erkennung von Toucheingaben konfiguriert werden.

Ist dies das richtige Steuerelement?

Verwenden Sie das InkCanvas, wenn Sie grundlegende Inking-Funktionen in Ihrer App aktivieren müssen, ohne dem Benutzer Inking-Einstellungen bereitzustellen.

Standardmäßig werden Striche als Tinte gerendert, wenn Sie die Stiftspitze verwenden (ein schwarzer Kugelschreiber mit einer Dicke von 2 Pixel), und als Radierer, wenn Sie die Radiergummispitze verwenden. Wenn kein Radierstift vorhanden ist, kann der InkCanvas so konfiguriert werden, dass er Eingaben mit der Stiftspitze als Radierbewegungen verarbeitet.

Verbinden Sie den InkCanvas mit der InkToolbar, um eine Benutzeroberfläche für die Aktivierung von Inking-Features und die Einstellung grundlegender Stifteigenschaften wie Linienstärke, Farbe und Form der Stiftspitze bereitzustellen.

Hinweis

Verwenden Sie das zugrunde liegende InkPresenter-Objekt, um umfangreichere Anpassungen des Tintenstrich-Renderings für ein InkCanvas-Steuerelement vorzunehmen.

Übersicht über die Ink-Toolbar

Integrierte Schaltflächen

Die InkToolbar enthält die folgenden integrierten Schaltflächen:

Stifte

• Kugelschreiber - zeichnet einen deckenden, undurchsichtigen Strich mit einer kreisförmigen Stiftspitze. Die Strichgröße hängt vom erkannten Stiftdruck ab.
• Bleistift - zeichnet einen weichen, strukturierten und halbtransparenten Strich (nützlich für überschichtete Schattierungseffekte) mit einer Kreisstiftspitze. Die Farbe des Strichs (Dunkelheit) hängt vom erkannten Stiftdruck ab.
• Textmarker – zeichnet einen halb-transparenten Strich mit einer rechteckigen Stiftspitze.

Sie können sowohl die Farbpalette als auch Größenattribute (min, max, Default) im Flyout für jeden Stift anpassen.

Werkzeug

• Radierer – Löscht alle Freihandstriche, die berührt werden. Beachten Sie, dass der gesamte Freihandstrich gelöscht wird, nicht nur der Teil unter dem Radiererstrich.

Toggle

• Lineal – Blendet das Lineal ein oder aus. Das Zeichnen in der Nähe der Kante des Lineals bewirkt, dass der Freihandstrich am Lineal angedockt wird.
  

Obwohl dies die Standardkonfiguration ist, haben Sie die vollständige Kontrolle darüber, welche integrierten Schaltflächen in der InkToolbar für Ihre App enthalten sind.

Benutzerdefinierte Schaltflächen

Die InkToolbar besteht aus zwei unterschiedlichen Gruppen von Schaltflächentypen:

1. Eine Gruppe von „Tool“-Schaltflächen, die die integrierten Zeichnungs-, Lösch- und Hervorhebungsschaltflächen enthalten. Hier werden benutzerdefinierte Stifte und Tools hinzugefügt.

Hinweis

Die Merkmalauswahl schließt sich gegenseitig aus.

2. Eine Gruppe von „Umschaltflächen“, die die integrierte Linealschaltfläche enthalten. Hier werden benutzerdefinierte Umschaltflächen hinzugefügt.

Hinweis

Features schließen sich nicht gegenseitig aus und können gleichzeitig mit anderen aktiven Tools verwendet werden.

Je nach Anwendung und erforderlicher Freihandfunktion können Sie eine der folgenden Schaltflächen (gebunden an Ihre benutzerdefinierten Freihandfeatures) zur InkToolbar hinzufügen:

• Benutzerdefinierter Stift – ein Stift, für den die Farbpaletten- und Stiftspitzeneigenschaften wie Form, Drehung und Größe von der Host-App definiert werden.
• Benutzerdefiniertes Werkzeug – ein nicht stiftbasiertes Werkzeug, das von der Hostanwendung definiert wird.
• Benutzerdefinierte Umschaltfläche – Legt den Status eines App-definierten Features auf ein oder aus fest. Wenn sie aktiviert ist, funktioniert das Feature in Verbindung mit dem aktiven Tool.

Hinweis

Sie können die Anzeigereihenfolge der integrierten Schaltflächen nicht ändern. Die Standardanzeigereihenfolge lautet: Kugelschreiber, Bleistift, Textmarker, Radierer und Lineal. Benutzerdefinierte Stifte werden dem letzten Standardstift hinzugefügt, benutzerdefinierte Toolschaltflächen werden zwischen der letzten Stiftschaltfläche und der Radiererschaltfläche hinzugefügt, und benutzerdefinierte Umschaltflächen werden nach der Linealschaltfläche hinzugefügt. (Benutzerdefinierte Schaltflächen werden in der angegebenen Reihenfolge hinzugefügt.)

Das InkToolbar-Steuerelement kann ein Element auf oberster Ebene sein, wird jedoch gewöhnlich über einen Befehl oder eine Schaltfläche für die Freihandeingabe verfügbar gemacht. Es wird empfohlen, das EE56-Glyphe aus der Schriftart Segoe MLD2 Assets als Symbol auf oberstem Niveau zu verwenden.

InkToolbar-Interaktion

Alle integrierten Stift- und Toolschaltflächen enthalten ein Flyoutmenü, in dem Tinteigenschaften sowie Form und Größe der Stiftspitze festgelegt werden können. Auf der Schaltfläche wird eine „Erweiterungsglyphe“ angezeigt, um das Vorhandensein des Flyouts anzugeben.

Das Flyout wird angezeigt, wenn die Schaltfläche eines aktiven Tools erneut ausgewählt wird. Wenn die Farbe oder Größe geändert wird, wird das Flyout automatisch geschlossen und die Freihandeingabe kann fortgesetzt werden. Benutzerdefinierte Stifte und Tools können das Standard-Flyout verwenden oder ein benutzerdefiniertes Flyout angeben.

Der Radierer verfügt auch über ein Flyout, das den Befehl Alle Ink löschen bereitstellt.

Informationen zur Anpassung und Erweiterbarkeit finden Sie im SimpleInk-Beispiel.

Recommendations

• Sie genießen die InkCanvas und die Freihand-Eingabe im Allgemeinen am besten mit einem aktiven Stift. Wir empfehlen jedoch, die Eingabe mit Maus und Touch (einschließlich passivem Stift) zu unterstützen, wenn Ihre App dies erfordert.
• Verwenden Sie ein InkToolbar-Steuerelement mit dem InkCanvas, um grundlegende Freihandfeatures und -einstellungen bereitzustellen. Sowohl InkCanvas als auch InkToolbar können programmgesteuert angepasst werden.
• Die InkToolbar und die Freihand-Eingabe erleben Sie am besten mit einem aktiven Stift. Freihandeingaben mit Maus und Touch können jedoch bei Bedarf von Ihrer Anwendung unterstützt werden.
• Wenn Freihandzeichnen per Toucheingabe unterstützt wird, empfehlen wir, das Symbol „ED5F“ aus der Schriftart „Segoe MLD2 Assets“ für die Umschaltfläche und einen Tooltip „Schreiben per Berührung“ zu verwenden.
• Für die Bereitstellung einer Strichauswahl wird empfohlen, das Symbol EF20 aus der Schriftart Segoe MLD2 Assets für die Toolschaltfläche mit einem Tooltipp "Auswahlwerkzeug" zu verwenden.
• Wenn Sie mehr als ein InkCanvas-Steuerelement verwenden, empfehlen wir die Verwendung eines einzigen InkToolbar, um die Freihandeingabe über mehrere Leinwände zu steuern.
• Um eine optimale Leistung zu erzielen, empfehlen wir, das Standard-Flyout zu ändern, anstatt ein benutzerdefiniertes Flyout sowohl für Standardtools als auch für benutzerdefinierte Tools zu erstellen.

Examples

Microsoft Edge

Microsoft Edge verwendet „InkCanvas” und „InkToolbar” für Webseitennotizen.

Windows Ink-Arbeitsbereich

Die InkCanvas- und InkToolbar-Steuerelemente werden auch für Ausschneiden und skizzieren im Windows Ink-Arbeitsbereich verwendet.

Erstellen eines InkCanvas und einer InkToolbar

• UWP-APIs:InkCanvas-Klasse, InkToolbar-Klasse, InkPresenter-Klasse, Windows.UI.Input.Inking
• Öffnen Sie die WinUI für UWP Gallery-App und sehen Sie sich die Inking-Steuerelemente in Aktion an. Die App WinUI 2 Gallery beinhaltet interaktive Beispiele für die meisten WinUI 2-Steuerelemente, -Features und -Funktionen. Holen Sie sich die App aus dem Microsoft Store oder holen Sie sich den Quellcode auf GitHub.

Das Hinzufügen eines InkCanvas zu Ihrer App erfordert nur eine Markupzeile:

<InkCanvas x:Name="myInkCanvas"/>

Hinweis

Ausführliche Informationen zur Anpassung von „InkCanvas” mit „InkPresenter” finden Sie im Artikel Zeichenstiftinteraktionen und Windows Ink in Windows-Apps.

Das InkToolbar-Steuerelement muss in Verbindung mit einem InkCanvas verwendet werden. Das Integrieren einer InkToolbar (mit allen integrierten Tools) in Ihre App erfordert eine zusätzliche Markupzeile:

<InkToolbar TargetInkCanvas="{x:Bind myInkCanvas}"/>

Dadurch wird die folgende InkToolbar angezeigt:

Holen Sie sich den Beispielcode

• Im SimpleInk-Beispiel werden 8 Szenarien zu den Anpassungs- und Erweiterbarkeitsfunktionen der InkCanvas- und InkToolbar-Steuerelemente erläutert. Jedes Szenario bietet eine grundlegende Anleitung für häufige digitale Freihandsituationen und die Implementierung von Steuerelementen.
• Komplexes Freihandbeispiel - Demonstriert komplexere Freihandszenarien.
• WinUI für UWP-Katalogbeispiel – Alle XAML-Steuerelemente in einem interaktiven Format anzeigen.

Verwandte Artikel

• Stiftinteraktionen und Windows Ink in Windows-Apps
• Erkennen von Windows Ink-Strichen als Text und Formen
• Windows Ink-Strichdaten speichern und abrufen