Erfassen von Freihandeingaben

Artikel
05/04/2023

Als einen ihrer zentralen Funktionsbestandteile erfasst die Windows Presentation Foundation-Plattform Freihandeingaben. In diesem Thema werden Methoden für die Erfassung von Freihandeingaben in Windows Presentation Foundation (WPF) behandelt.

Voraussetzungen

Um die folgenden Beispiele zu verwenden, müssen Sie zunächst Visual Studio und das Windows SDK installieren. Sie sollten außerdem mit dem Schreiben von Anwendungen für WPF vertraut sein. Weitere Informationen zu den Ersten Schritten mit WPF finden Sie unter Exemplarische Vorgehensweise: Meine erste WPF-Desktopanwendung.

Verwenden des InkCanvas-Elements

Das System.Windows.Controls.InkCanvas-Element bietet die einfachste Möglichkeit, Freihandeingaben in WPF zu erfassen. Verwenden Sie ein InkCanvas-Element, um Freihandeingaben zu empfangen und anzuzeigen. Freihandeingaben erfolgen im Allgemeinen mithilfe eines Tablettstifts, der über ein Digitalisierungsgerät Freihandstriche erzeugt. Anstelle eines Tablettstifts kann auch eine Maus verwendet werden. Die erzeugten Striche werden als Stroke-Objekte dargestellt und können sowohl programmgesteuert als auch durch Benutzereingaben bearbeitet werden. Mit InkCanvas können Benutzer ein vorhandenes Stroke-Element auswählen, ändern oder löschen.

Mit XAML gestaltet sich das Erfassen von Freihandeingaben genauso einfach wie das Hinzufügen eines InkCanvas-Elements zur Struktur. Im folgenden Beispiel wird einem in Visual Studio erstellten WPF-Standardprojekt ein InkCanvas-Element hinzugefügt:

<Grid>
  <InkCanvas/>
</Grid>

Das InkCanvas-Element kann auch untergeordnete Elemente enthalten, wodurch Sie Funktionen zur Freihandanmerkung nahezu jeder Art von XAML-Element hinzufügen können. So können Sie beispielsweise einem Textelement Freihandfunktionen hinzufügen, indem Sie es einfach einem InkCanvas-Element unterordnen:

<InkCanvas>
  <TextBlock>Show text here.</TextBlock>
</InkCanvas>

Ebenso einfach ist es, Unterstützung zum Markieren eines Bilds über Freihandeingabe hinzuzufügen:

<InkCanvas>
  <Image Source="myPicture.jpg"/>
</InkCanvas>

InkCollection-Modi

InkCanvas bietet durch die EditingMode-Eigenschaft Unterstützung für verschiedene Eingabemodi.

Bearbeiten von Freihandeingaben

InkCanvas bietet Unterstützung für viele Freihandeingabevorgänge. So unterstützt InkCanvas beispielsweise das Löschen mit dem Stiftende, ohne dass zusätzlicher Code zur Aktivierung dieser Funktion erforderlich ist.

Auswahl

Das Festlegen des Auswahlmodus ist so einfach wie das Festlegen der InkCanvasEditingMode-Eigenschaft auf Select (Auswählen).

Der folgende Code legt den Bearbeitungsmodus basierend auf dem Wert von CheckBox fest:

// Set the selection mode based on a checkbox
if ((bool)cbSelectionMode.IsChecked)
{
    theInkCanvas.EditingMode = InkCanvasEditingMode.Select;
}
else
{
    theInkCanvas.EditingMode = InkCanvasEditingMode.Ink;
}

' Set the selection mode based on a checkbox
If CBool(cbSelectionMode.IsChecked) Then
    theInkCanvas.EditingMode = InkCanvasEditingMode.Select
Else
    theInkCanvas.EditingMode = InkCanvasEditingMode.Ink
End If

DrawingAttributes

Verwenden Sie die DrawingAttributes-Eigenschaft, um das Aussehen von Freihandeingaben zu ändern. Beispielsweise legt der Color-Member von DrawingAttributes die Farbe des gerenderten Stroke-Elements fest.

Im folgenden Beispiel wird die Farbe der ausgewählten Striche in Rot geändert:

// Get the selected strokes from the InkCanvas
StrokeCollection selection = theInkCanvas.GetSelectedStrokes();

// Check to see if any strokes are actually selected
if (selection.Count > 0)
{
    // Change the color of each stroke in the collection to red
    foreach (System.Windows.Ink.Stroke stroke in selection)
    {
        stroke.DrawingAttributes.Color = System.Windows.Media.Colors.Red;
    }
}

' Get the selected strokes from the InkCanvas
Dim selection As StrokeCollection = theInkCanvas.GetSelectedStrokes()

' Check to see if any strokes are actually selected
If selection.Count > 0 Then
    ' Change the color of each stroke in the collection to red
    Dim stroke As System.Windows.Ink.Stroke
    For Each stroke In  selection
        stroke.DrawingAttributes.Color = System.Windows.Media.Colors.Red
    Next stroke
End If

DefaultDrawingAttributes

Die DefaultDrawingAttributes-Eigenschaft ermöglicht Zugriff auf Eigenschaften wie Höhe, Breite und Farbe der zu erstellenden Striche in einem InkCanvas-Element. Sobald Sie DefaultDrawingAttributes ändern, werden alle zukünftigen Striche, die in InkCanvas eingegeben werden, mit den neuen Eigenschaftswerten gerendert.

Zusätzlich zum Ändern von DefaultDrawingAttributes in der CodeBehind-Datei können Sie XAML-Syntax zum Angeben von DefaultDrawingAttributes-Eigenschaften verwenden.

Im nächsten Beispiel wird gezeigt, wie die Color-Eigenschaft festgelegt wird. Zum Verwenden dieses Codes erstellen Sie in Visual Studio ein neues WPF-Projekt mit dem Namen „HelloInkCanvas“. Ersetzen Sie den Code in der Datei MainWindow.xaml durch den folgenden Code:

<Window x:Class="HelloInkCanvas.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Ink="clr-namespace:System.Windows.Ink;assembly=PresentationCore"
    Title="Hello, InkCanvas!" Height="300" Width="300"
    >
  <Grid>
    <InkCanvas Name="inkCanvas1" Background="Ivory">
      <InkCanvas.DefaultDrawingAttributes>
        <Ink:DrawingAttributes xmlns:ink="system-windows-ink" Color="Red" Width="5" />
      </InkCanvas.DefaultDrawingAttributes>
    </InkCanvas>

    <!-- This stack panel of buttons is a sibling to InkCanvas (not a child) but overlapping it, 
         higher in z-order, so that ink is collected and rendered behind -->
    <StackPanel Name="buttonBar" VerticalAlignment="Top" Height="26" Orientation="Horizontal" Margin="5">
      <Button Click="Ink">Ink</Button>
      <Button Click="Highlight">Highlight</Button>
      <Button Click="EraseStroke">EraseStroke</Button>
      <Button Click="Select">Select</Button>
    </StackPanel>
  </Grid>
</Window>

Fügen Sie anschließend der CodeBehind-Datei die folgenden Ereignishandler für Schaltflächen innerhalb der MainWindow-Klasse hinzu:

// Set the EditingMode to ink input.
private void Ink(object sender, RoutedEventArgs e)
{
    inkCanvas1.EditingMode = InkCanvasEditingMode.Ink;

    // Set the DefaultDrawingAttributes for a red pen.
    inkCanvas1.DefaultDrawingAttributes.Color = Colors.Red;
    inkCanvas1.DefaultDrawingAttributes.IsHighlighter = false;
    inkCanvas1.DefaultDrawingAttributes.Height = 2;
}

// Set the EditingMode to highlighter input.
private void Highlight(object sender, RoutedEventArgs e)
{
    inkCanvas1.EditingMode = InkCanvasEditingMode.Ink;

    // Set the DefaultDrawingAttributes for a highlighter pen.
    inkCanvas1.DefaultDrawingAttributes.Color = Colors.Yellow;
    inkCanvas1.DefaultDrawingAttributes.IsHighlighter = true;
    inkCanvas1.DefaultDrawingAttributes.Height = 25;
}

// Set the EditingMode to erase by stroke.
private void EraseStroke(object sender, RoutedEventArgs e)
{
    inkCanvas1.EditingMode = InkCanvasEditingMode.EraseByStroke;
}

// Set the EditingMode to selection.
private void Select(object sender, RoutedEventArgs e)
{
    inkCanvas1.EditingMode = InkCanvasEditingMode.Select;
}

Nachdem Sie diesen Code kopiert haben, drücken Sie in Visual Studio F5, um das Programm im Debugger auszuführen.

Beachten Sie, dass StackPanel die Schaltflächen über InkCanvas platziert. Sollten Sie während der Freihandeingabe über die Schaltflächen kommen, erfasst und rendert InkCanvas Ihre Eingaben hinter den Schaltflächen. Das liegt daran, dass die Schaltflächen gleichgeordnete Elemente von InkCanvas sind und keine untergeordneten Elemente. Außerdem sind die Schaltflächen in der Z-Reihenfolge weiter oben, weshalb die Freihandeingaben dahinter gerendert werden.

Freigeben über