Stiftinteraktionen und Windows Ink in Windows-Apps

Surface Pen (erhältlich für den Kauf im Microsoft Store).

Überblick

Optimieren Sie Ihre Windows-App für Stifteingaben, um sowohl Standardfunktionen für Zeigergeräte als auch die beste Windows Ink-Erfahrung für Ihre Benutzer bereitzustellen.

Die Windows Ink-Plattform bietet zusammen mit einem Stiftgerät eine natürliche Möglichkeit, digitale handschriftliche Notizen, Zeichnungen und Anmerkungen zu erstellen. Die Plattform unterstützt die Erfassung von Digitalisierereingaben als Tinten-Daten, das Generieren von Tinten-Daten, das Verwalten von Tinten-Daten, das Darstellen von Tinten-Daten als Tintenstriche auf dem Ausgabegerät und das Umwandeln von Tinte in Text mittels Handschriftenerkennung.

Ihre App kann neben der Erfassung der grundlegenden Position und Bewegung des Stifts, während der Benutzer schreibt oder zeichnet, auch die verschiedenen Druckmengen während eines Strichs nachverfolgen und erfassen, die aufgebracht werden. Diese Informationen sowie die Einstellungen für die Form, Größe und Drehung der Stiftspitze, die Tintenfarbe und den Zweck (einfache Tinte, Löschen, Hervorheben und Auswählen) ermöglichen es Ihnen, Nutzererlebnisse bereitzustellen, die dem Schreiben oder Zeichnen auf Papier mit einem Stift, Bleistift oder Pinsel sehr ähnlich sind.

Die Tintenplattform ist sehr flexibel. Es wurde entwickelt, um je nach Ihren Anforderungen verschiedene Funktionalitätsebenen zu unterstützen.

Informationen zu Windows Ink-UX-Richtlinien finden Sie unter Inking-Bedienelemente.

Komponenten der Windows Ink-Plattform

Grundlegendes Inking mit InkCanvas

Wenn Sie grundlegende Funktionen für das Zeichnen hinzufügen möchten, platzieren Sie einfach ein InkCanvas-Steuerelement der UWP-Plattform auf der entsprechenden Seite in Ihrer App.

Standardmäßig unterstützt das InkCanvas Freihandeingaben nur von einem Stift. Die Eingabe wird entweder als Freihandstrich mithilfe von Standardeinstellungen für Farbe und Stärke (ein schwarzer Kugelschreiber mit einer Dicke von 2 Pixeln) gerendert oder als Strichradierer behandelt (wenn die Eingabe von einer Radiererspitze stammt oder die Stiftspitze mit einer Radierschaltfläche geändert wurde).

In diesem Beispiel überlagert ein InkCanvas ein Hintergrundbild.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <StackPanel x:Name="HeaderPanel" Orientation="Horizontal" Grid.Row="0">
        <TextBlock x:Name="Header"
                   Text="Basic ink sample"
                   Style="{ThemeResource HeaderTextBlockStyle}"
                   Margin="10,0,0,0" />            
    </StackPanel>
    <Grid Grid.Row="1">
        <Image Source="Assets\StoreLogo.png" />
        <InkCanvas x:Name="inkCanvas" />
    </Grid>
</Grid>

Diese Reihe von Bildern zeigt, wie die Stifteingabe von diesem InkCanvas-Steuerelement gerendert wird.

Das leere InkCanvas mit einem Hintergrundbild.	Das InkCanvas mit Freihandstrichen.	Das InkCanvas mit einem gelöschten Strich (beachten Sie, wie das Löschen auf den gesamten Strich und nicht auf einen Teil angewendet wird).

Die vom InkCanvas-Steuerelement unterstützte Freihandzeichnungsfunktion wird von einem Code-behind-Objekt genannt InkPresenter bereitgestellt.

Für die einfache Freihandeingabe müssen Sie sich nicht mit dem InkPresenter befassen. Um die Inking-Funktion für InkCanvas anzupassen und zu konfigurieren, müssen Sie jedoch auf das entsprechende InkPresenter-Objekt zugreifen.

Grundlegende Anpassung mit InkPresenter

Ein InkPresenter-Objekt wird mit jedem InkCanvas-Steuerelement instanziiert.

Zusammen mit allen Standard-Freihandverhaltensweisen des entsprechenden InkCanvas-Steuerelements bietet das InkPresenter einen umfassenden Satz von APIs für zusätzliche Strichanpassungen und eine feiner abgestimmte Verwaltung der Stifteingabe (Standard und geändert). Dazu gehören die Eigenschaften der Striche, die unterstützten Eingabegerätetypen und ob die Eingabe vom Objekt verarbeitet wird oder zur Verarbeitung an die App übergeben wird.

Standardmäßig wird Freihandeingabe nur für Stifteingaben unterstützt. Hier konfigurieren wir den InkPresenter so, dass Eingabedaten von Stift und Maus als Freihandstriche interpretiert werden. Außerdem legen wir einige anfängliche Freihandstrichattribute fest, die zum Rendern von Strichen in den InkCanvas verwendet werden.

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

public MainPage()
{
    this.InitializeComponent();

    // Set supported inking device types.
    inkCanvas.InkPresenter.InputDeviceTypes =
        Windows.UI.Core.CoreInputDeviceTypes.Mouse |
        Windows.UI.Core.CoreInputDeviceTypes.Pen;

    // Set initial ink stroke attributes.
    InkDrawingAttributes drawingAttributes = new InkDrawingAttributes();
    drawingAttributes.Color = Windows.UI.Colors.Black;
    drawingAttributes.IgnorePressure = false;
    drawingAttributes.FitToCurve = true;
    inkCanvas.InkPresenter.UpdateDefaultDrawingAttributes(drawingAttributes);
}

Freihandstrichattribute können dynamisch festgelegt werden, um Benutzereinstellungen oder App-Anforderungen zu berücksichtigen.

Hier lassen wir einen Nutzer aus einer Liste von Tintenfarben auswählen.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <StackPanel x:Name="HeaderPanel" Orientation="Horizontal" Grid.Row="0">
        <TextBlock x:Name="Header"
                   Text="Basic ink customization sample"
                   VerticalAlignment="Center"
                   Style="{ThemeResource HeaderTextBlockStyle}"
                   Margin="10,0,0,0" />
        <TextBlock Text="Color:"
                   Style="{StaticResource SubheaderTextBlockStyle}"
                   VerticalAlignment="Center"
                   Margin="50,0,10,0"/>
        <ComboBox x:Name="PenColor"
                  VerticalAlignment="Center"
                  SelectedIndex="0"
                  SelectionChanged="OnPenColorChanged">
            <ComboBoxItem Content="Black"/>
            <ComboBoxItem Content="Red"/>
        </ComboBox>
    </StackPanel>
    <Grid Grid.Row="1">
        <Image Source="Assets\StoreLogo.png" />
        <InkCanvas x:Name="inkCanvas" />
    </Grid>
</Grid>

Anschließend behandeln wir Änderungen an der ausgewählten Farbe und aktualisieren die Freihandstrichattribute entsprechend.

// Update ink stroke color for new strokes.
private void OnPenColorChanged(object sender, SelectionChangedEventArgs e)
{
    if (inkCanvas != null)
    {
        InkDrawingAttributes drawingAttributes =
            inkCanvas.InkPresenter.CopyDefaultDrawingAttributes();

        string value = ((ComboBoxItem)PenColor.SelectedItem).Content.ToString();

        switch (value)
        {
            case "Black":
                drawingAttributes.Color = Windows.UI.Colors.Black;
                break;
            case "Red":
                drawingAttributes.Color = Windows.UI.Colors.Red;
                break;
            default:
                drawingAttributes.Color = Windows.UI.Colors.Black;
                break;
        };

        inkCanvas.InkPresenter.UpdateDefaultDrawingAttributes(drawingAttributes);
    }
}

Diese Bilder zeigen, wie die Stifteingabe vom InkPresenter verarbeitet und angepasst wird.

Um Funktionen bereitzustellen, die über Freihand-Eingaben und -Löschungen hinausgehen, z. B. die Strichauswahl, muss Ihre App bestimmte Eingaben für den InkPresenter identifizieren, die ungesehen an Ihre App weitergegeben werden, damit sie von ihr verarbeitet werden können.

Pass-Through-Eingabe für die erweiterte Verarbeitung

Der InkPresenter verarbeitet standardmäßig alle Eingaben entweder als Tintenstrich oder als Radierstrich, einschließlich der Eingaben, die durch eine sekundäre Hardwarefunktion wie eine Stift-Fass-Taste, eine rechte Maustaste oder Ähnliches geändert wurden. Benutzer erwarten jedoch in der Regel einige zusätzliche Funktionen oder ein geändertes Verhalten mit diesen sekundären Angeboten.

In einigen Fällen müssen Sie möglicherweise auch zusätzliche Funktionen für Stifte ohne sekundäre Funktionen bereitstellen (Funktionalität, die normalerweise nicht der Stiftspitze zugeordnet ist), andere Typen von Eingabegeräten oder einige Arten von geändertem Verhalten basierend auf einer Benutzerauswahl innerhalb der Benutzeroberfläche Ihrer App.

Um dies zu unterstützen, kann InkPresenter so konfiguriert werden, dass bestimmte Eingaben unverarbeitet bleiben. Diese unverarbeitete Eingabe wird dann zur Verarbeitung an Ihre App übergeben.

Beispiel: Verwenden von nicht verarbeiteten Eingaben zum Implementieren der Strichauswahl

Die Windows Ink-Plattform bietet keine integrierte Unterstützung für Aktionen, die geänderte Eingaben erfordern, z. B. Strichauswahl. Um Features wie diese zu unterstützen, müssen Sie eine benutzerdefinierte Lösung in Ihren Apps bereitstellen.

Im folgenden Codebeispiel (der gesamte Code befindet sich in den Dateien "MainPage.xaml" und "MainPage.xaml.cs") wird erläutert, wie Sie die Strichauswahl aktivieren, wenn die Eingabe mit einer Stift-Drucktaste (oder einer rechten Maustaste) geändert wird.

1. Zunächst richten wir die Benutzeroberfläche in "MainPage.xaml" ein.

   Hier fügen wir eine Leinwand (unterhalb des InkCanvas) hinzu, um den Auswahlstrich zu zeichnen. Wenn Sie einen separaten Layer verwenden, um den Auswahlstrich zu zeichnen, bleibt der InkCanvas und dessen Inhalt unberührt.

   

     <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
       <Grid.RowDefinitions>
         <RowDefinition Height="Auto"/>
         <RowDefinition Height="*"/>
       </Grid.RowDefinitions>
       <StackPanel x:Name="HeaderPanel" Orientation="Horizontal" Grid.Row="0">
         <TextBlock x:Name="Header"
           Text="Advanced ink customization sample"
           VerticalAlignment="Center"
           Style="{ThemeResource HeaderTextBlockStyle}"
           Margin="10,0,0,0" />
       </StackPanel>
       <Grid Grid.Row="1">
         <!-- Canvas for displaying selection UI. -->
         <Canvas x:Name="selectionCanvas"/>
         <!-- Inking area -->
         <InkCanvas x:Name="inkCanvas"/>
       </Grid>
     </Grid>
   

2. In MainPage.xaml.cs deklarieren wir einige globale Variablen, um Verweise auf Aspekte der Auswahl-UI beizubehalten. Insbesondere der Auswahl-Lassostrich und das umgebende Rechteck, das die markierten Striche hervorhebung.

     // Stroke selection tool.
     private Polyline lasso;
     // Stroke selection area.
     private Rect boundingRect;
   

3. Als Nächstes konfigurieren wir den InkPresenter so, dass Eingabedaten von Stift und Maus als Freihandstriche interpretiert und einige anfängliche Freihandstrichattribute festgelegt werden, die zum Rendern von Strichen in den InkCanvas verwendet werden.

   Vor allem verwenden wir die InputProcessingConfiguration-Eigenschaft von InkPresenter , um anzugeben, dass alle geänderten Eingaben von der App verarbeitet werden sollen. Geänderte Eingaben werden angegeben, indem der InputProcessingConfiguration.RightDragAction der Wert InkInputRightDragAction.LeaveUnprocessed zugewiesen wird. Wenn dieser Wert festgelegt ist, leitet der InkPresenter an die InkUnprocessedInput-Klasse eine Reihe von Zeigerereignissen weiter, die Sie behandeln können.

   Wir weisen Listener für die nicht verarbeiteten PointerPressed-, PointerMoved- und PointerReleased-Ereignisse zu, die vom InkPresenter übergeben werden. Alle Auswahlfunktionen werden in den Handlern für diese Ereignisse implementiert.

   Schließlich weisen wir Listener für die Ereignisse StrokeStarted und StrokesErased des InkPresenter zu. Wir verwenden die Handler für diese Ereignisse, um die Auswahloberfläche zu bereinigen, wenn ein neuer Strich gestartet wird oder ein vorhandener Strich gelöscht wird.

   

     public MainPage()
     {
       this.InitializeComponent();
   
       // Set supported inking device types.
       inkCanvas.InkPresenter.InputDeviceTypes =
         Windows.UI.Core.CoreInputDeviceTypes.Mouse |
         Windows.UI.Core.CoreInputDeviceTypes.Pen;
   
       // Set initial ink stroke attributes.
       InkDrawingAttributes drawingAttributes = new InkDrawingAttributes();
       drawingAttributes.Color = Windows.UI.Colors.Black;
       drawingAttributes.IgnorePressure = false;
       drawingAttributes.FitToCurve = true;
       inkCanvas.InkPresenter.UpdateDefaultDrawingAttributes(drawingAttributes);
   
       // By default, the InkPresenter processes input modified by
       // a secondary affordance (pen barrel button, right mouse
       // button, or similar) as ink.
       // To pass through modified input to the app for custom processing
       // on the app UI thread instead of the background ink thread, set
       // InputProcessingConfiguration.RightDragAction to LeaveUnprocessed.
       inkCanvas.InkPresenter.InputProcessingConfiguration.RightDragAction =
           InkInputRightDragAction.LeaveUnprocessed;
   
       // Listen for unprocessed pointer events from modified input.
       // The input is used to provide selection functionality.
       inkCanvas.InkPresenter.UnprocessedInput.PointerPressed +=
           UnprocessedInput_PointerPressed;
       inkCanvas.InkPresenter.UnprocessedInput.PointerMoved +=
           UnprocessedInput_PointerMoved;
       inkCanvas.InkPresenter.UnprocessedInput.PointerReleased +=
           UnprocessedInput_PointerReleased;
   
       // Listen for new ink or erase strokes to clean up selection UI.
       inkCanvas.InkPresenter.StrokeInput.StrokeStarted +=
           StrokeInput_StrokeStarted;
       inkCanvas.InkPresenter.StrokesErased +=
           InkPresenter_StrokesErased;
     }
   

4. Anschließend definieren wir Handler für die nicht verarbeiteten PointerPressed-, PointerMoved- und PointerReleased-Ereignisse, die vom InkPresenter übergeben werden.

   Alle Auswahlfunktionen werden in diesen Handlern implementiert, einschließlich des Lassostrichs und des begrenzenden Rechtecks.

   

     // Handle unprocessed pointer events from modified input.
     // The input is used to provide selection functionality.
     // Selection UI is drawn on a canvas under the InkCanvas.
     private void UnprocessedInput_PointerPressed(
       InkUnprocessedInput sender, PointerEventArgs args)
     {
       // Initialize a selection lasso.
       lasso = new Polyline()
       {
           Stroke = new SolidColorBrush(Windows.UI.Colors.Blue),
           StrokeThickness = 1,
           StrokeDashArray = new DoubleCollection() { 5, 2 },
           };
   
           lasso.Points.Add(args.CurrentPoint.RawPosition);
   
           selectionCanvas.Children.Add(lasso);
       }
   
       private void UnprocessedInput_PointerMoved(
         InkUnprocessedInput sender, PointerEventArgs args)
       {
         // Add a point to the lasso Polyline object.
         lasso.Points.Add(args.CurrentPoint.RawPosition);
       }
   
       private void UnprocessedInput_PointerReleased(
         InkUnprocessedInput sender, PointerEventArgs args)
       {
         // Add the final point to the Polyline object and
         // select strokes within the lasso area.
         // Draw a bounding box on the selection canvas
         // around the selected ink strokes.
         lasso.Points.Add(args.CurrentPoint.RawPosition);
   
         boundingRect =
           inkCanvas.InkPresenter.StrokeContainer.SelectWithPolyLine(
             lasso.Points);
   
         DrawBoundingRect();
       }
   

5. Um den PointerReleased-Ereignishandler abzuschließen, löschen wir die Auswahlebene aller Inhalte (Lasso-Striche) und zeichnen dann ein einzelnes Begrenzungsrechteck um die Freihandzeichnungen, die vom Lassobereich umfasst sind.

   

     // Draw a bounding rectangle, on the selection canvas, encompassing
     // all ink strokes within the lasso area.
     private void DrawBoundingRect()
     {
       // Clear all existing content from the selection canvas.
       selectionCanvas.Children.Clear();
   
       // Draw a bounding rectangle only if there are ink strokes
       // within the lasso area.
       if (!((boundingRect.Width == 0) ||
         (boundingRect.Height == 0) ||
         boundingRect.IsEmpty))
         {
           var rectangle = new Rectangle()
           {
             Stroke = new SolidColorBrush(Windows.UI.Colors.Blue),
               StrokeThickness = 1,
               StrokeDashArray = new DoubleCollection() { 5, 2 },
               Width = boundingRect.Width,
               Height = boundingRect.Height
           };
   
           Canvas.SetLeft(rectangle, boundingRect.X);
           Canvas.SetTop(rectangle, boundingRect.Y);
   
           selectionCanvas.Children.Add(rectangle);
         }
       }
   

6. Schließlich definieren wir Handler für die Ereignisse StrokeStarted und StrokesErased InkPresenter.

   Beide Befehle rufen einfach die gleiche Bereinigungsfunktion auf, um die aktuelle Auswahl zu löschen, sobald ein neuer Strich erkannt wird.

     // Handle new ink or erase strokes to clean up selection UI.
     private void StrokeInput_StrokeStarted(
       InkStrokeInput sender, Windows.UI.Core.PointerEventArgs args)
     {
       ClearSelection();
     }
   
     private void InkPresenter_StrokesErased(
       InkPresenter sender, InkStrokesErasedEventArgs args)
     {
       ClearSelection();
     }
   

7. Hier ist die Funktion zum Entfernen aller Auswahl-UI aus dem Auswahlbereich, wenn ein neuer Strich gestartet wird oder ein vorhandener Strich gelöscht wird.

     // Clean up selection UI.
     private void ClearSelection()
     {
       var strokes = inkCanvas.InkPresenter.StrokeContainer.GetStrokes();
       foreach (var stroke in strokes)
       {
         stroke.Selected = false;
       }
       ClearDrawnBoundingRect();
      }
   
     private void ClearDrawnBoundingRect()
     {
       if (selectionCanvas.Children.Any())
       {
         selectionCanvas.Children.Clear();
         boundingRect = Rect.Empty;
       }
     }
   

Benutzerdefiniertes Freihandrendering

Standardmäßig wird die Stifteingabe in einem Hintergrundthread mit geringer Latenz verarbeitet und während des Zeichnens "in Echtzeit" oder "nass" gerendert. Wenn der Strich abgeschlossen ist (Stift oder Finger angehoben oder Maustaste losgelassen), wird der Strich im UI-Thread verarbeitet und "trocken" auf der InkCanvas-Ebene (oberhalb des Anwendungsinhalts und ersetzt die nasse Eingabe) gerendert.

Sie können diese Standardeinstellung außer Kraft setzen und das Freihand-Erlebnis vollständig steuern, indem Sie die feuchten Freihandstriche individuell anpassen. Obwohl das Standardverhalten in der Regel für die meisten Anwendungen ausreicht, gibt es einige Fälle, in denen möglicherweise eine benutzerdefinierte Trocknung erforderlich ist, dazu gehören:

• Effizientere Verwaltung von großen oder komplexen Sammlungen von Freihandstrichen
• Effizientere Verschiebungs- und Zoomunterstützung auf großen Freihand-Zeichenflächen
• Überlagern von Tinte und anderen Objekten, wie Formen oder Text, ohne die Z-Reihenfolge zu verändern
• Synchrones Trocknen und Konvertieren von Tinte in eine DirectX-Form (z. B. eine gerade Linie oder Form, die gerastert und in Anwendungsinhalte integriert wird, statt als separate InkCanvas-Ebene).

Anstelle des standardmäßigen InkCanvas-Steuerelements erfordert das benutzerdefinierte Trocknen ein IInkD2DRenderer-Objekt, um die Freihandeingabe zu verwalten und im Direct2D-Gerätekontext Ihrer universellen Windows-App darzustellen.

Durch das Aufrufen von ActivateCustomDrying (bevor das InkCanvas geladen wird), erstellt eine App ein InkSynchronizer-Objekt, um festzulegen, wie ein Freihandstrich trocken in einer SurfaceImageSource oder VirtualSurfaceImageSource gerendert wird.

Sowohl SurfaceImageSource als auch VirtualSurfaceImageSource bieten eine gemeinsam genutzte DirectX-Oberfläche für Ihre App, um in den Inhalt Ihrer Anwendung zu zeichnen und zu verfassen, obwohl VSIS eine virtuelle Oberfläche bereitstellt, die größer als der Bildschirm für das ausführende Verschieben und Zoomen ist. Da visuelle Aktualisierungen dieser Oberflächen mit dem XAML-UI-Thread synchronisiert werden, kann bei der Darstellung von Tinte auf diese Oberflächen die nasse Tinte gleichzeitig aus dem InkCanvas entfernt werden.

Sie können auch benutzerdefinierte trockene Freihandtinte auf ein SwapChainPanel-Element anwenden. Die Synchronisierung mit dem UI-Thread ist jedoch nicht gewährleistet, und es kann zu einer Verzögerung zwischen dem Rendern der Tinte in Ihrem SwapChainPanel und dem Entfernen der Tinte vom InkCanvas kommen.

Ein vollständiges Beispiel für diese Funktionalität finden Sie im Beispiel für komplexe Freihandeingaben.

Weitere Artikel in diesem Abschnitt

Verwandte Artikel

• Erste Schritte: Unterstützen von Freihandeingaben in Ihrer Windows-App
• Behandeln von Zeigereingaben
• Identifizieren von Eingabegeräten
• Ink Serialized Format (ISF)-Spezifikation.

APIs

• Windows.Devices.Input
• Windows.UI.Input.Inking
• Windows.UI.Input.Inking.Core

Beispiele

• Einsteiger-Tutorial: Freihandeingaben in Ihrer Windows-App unterstützen
• Einfaches Tintenbeispiel (C#/C++)
• Komplexe Tintenprobe (C++)
• Tintenprobe (JavaScript)
• Farbbuchbeispiel
• Beispiel für Familiennotizen
• Einfaches Eingabebeispiel
• Beispiel für eine Eingabe mit geringer Latenz
• Beispiel für den Benutzerinteraktionsmodus
• Beispiel für Fokussierungsvisualisierung

Archivbeispiele

• Eingabe: Beispiel für Gerätefunktionen
• Eingabe: Beispiel für XAML-Benutzereingabeereignisse
• Beispiel für XAML-Bildlauf, -Verschiebung und -Zoom
• Eingabe: Gesten und Manipulationen mit GestureRecognizer