Erfassen von Freihandeingaben
Aktualisiert: November 2007
Zu den Kernfunktionen der Windows Presentation Foundation-Plattform gehört das Erfassen digitaler Freihandeingaben. In diesem Thema werden Methoden zum Erfassen von Freihandeingaben in Windows Presentation Foundation (WPF) erläutert.
Vorbereitungsmaßnahmen
Um die folgenden Beispiele verwenden zu können, müssen Sie zunächst Microsoft Visual Studio 2005 und das Windows SDK installieren. Sie sollten ebenfalls wissen, wie Anwendungen für den WPF geschrieben werden. Weitere Informationen zu den ersten Schritten mit dem WPF finden Sie unter Erste Schritte mit Windows Presentation Foundation.
Verwenden des InkCanvas-Elements
Das InkCanvas-Element bietet die einfachste Möglichkeit, Freihandeingaben in WPF zu erfassen. Das InkCanvas-Element ähnelt dem InkOverlay-Objekt des Tablet PC SDK 1.7 und früherer Versionen.
Verwenden Sie ein InkCanvas-Element, um Freihandeingaben zu empfangen und anzuzeigen. Freihandeingaben erfolgen im Allgemeinen mithilfe eines Tablettstifts, der durch Interaktion mit einem Digitizer Freihandstriche erzeugt. Außerdem kann eine Maus anstelle eines Tablettstifts verwendet werden. Die erzeugten Striche werden durch Stroke-Objekte repräsentiert, die sowohl programmgesteuert als auch durch Benutzereingaben bearbeitet werden können. Mithilfe von InkCanvas können Benutzer einen vorhandenen Stroke auswählen, ändern oder löschen.
Mit XAML kann die Erfassung von Freihandeingaben genauso einfach eingerichtet werden, wie ein InkCanvas-Element der Struktur hinzugefügt werden kann. Im folgenden Beispiel wird ein InkCanvas einem WPF-Standardprojekt hinzugefügt, das in Microsoft Visual Studio 2005 erstellt wurde.
<Grid>
<InkCanvas/>
</Grid>
Das InkCanvas-Element kann außerdem untergeordnete Elemente enthalten. Dadurch können beinahe jedem XAML-Elementtyp Funktionen für Freihandanmerkungen hinzugefügt werden. So können Sie beispielsweise einem Textelement Freihandfunktionen hinzufügen, indem Sie es zu einem untergeordneten Element eines InkCanvas machen.
<InkCanvas>
<TextBlock>Show text here.</TextBlock>
</InkCanvas>
Ebenso einfach können Sie die Möglichkeit zum Markieren eines Bildes per Freihandeingabe zur Verfügung stellen.
<InkCanvas>
<Image Source="myPicture.jpg"/>
</InkCanvas>
InkCollection-Modi
InkCanvas unterstützt über die EditingMode-Eigenschaft zahlreiche Eingabemodi.
Bearbeiten von Freihandeingaben
InkCanvas unterstützt viele Freihandbearbeitungsvorgänge. Beispielsweise unterstützt InkCanvas das Löschen mithilfe des oberen Stiftendes, ohne dass zusätzlicher Code benötigt wird, um dem Element diese Funktionalität hinzuzufügen.
Auswahl
Der Auswahlmodus wird einfach eingestellt, indem die InkCanvasEditingMode-Eigenschaft auf Select festgelegt wird. Im folgenden Code wird der Bearbeitungsmodus auf der Grundlage des Werts von CheckBox festgelegt:
' Set the selection mode based on a checkbox
If CBool(cbSelectionMode.IsChecked) Then
theInkCanvas.EditingMode = InkCanvasEditingMode.Select
Else
theInkCanvas.EditingMode = InkCanvasEditingMode.Ink
End If
// Set the selection mode based on a checkbox
if ((bool)cbSelectionMode.IsChecked)
{
theInkCanvas.EditingMode = InkCanvasEditingMode.Select;
}
else
{
theInkCanvas.EditingMode = InkCanvasEditingMode.Ink;
}
DrawingAttributes
Verwenden Sie die DrawingAttributes-Eigenschaft, um die Darstellung von Freihandstrichen zu ändern. Zum Beispiel legt der Color-Member von DrawingAttributes die Farbe vom gerenderten Stroke fest. Im folgenden Beispiel wird die Farbe der ausgewählten Striche zu Rot geändert.
' 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
// 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;
}
}
DefaultDrawingAttributes
Über die DefaultDrawingAttributes-Eigenschaft kann auf Eigenschaften wie Höhe, Breite und Farbe der in einem InkCanvas zu erzeugenden Striche zugegriffen werden. Sobald Sie die DefaultDrawingAttributes geändert haben, werden alle danach in InkCanvas eingegebenen Striche mit den neuen Eigenschaftenwerten gerendert.
Zusätzlich zum Bearbeiten der DefaultDrawingAttributes in den Code-Behind-Dateien können Sie XAML-Syntax verwenden, um DefaultDrawingAttributes-Eigenschaften festzulegen. Im folgenden XAML-Code wird das Festlegen der Color-Eigenschaft veranschaulicht. Erstellen Sie zum Verwenden dieses Codes in Visual Studio 2005 ein neues WPF-Projekt mit dem Namen "HelloInkCanvas". Ersetzen Sie den Code in der Datei Window1.xaml durch den folgenden Code.
<Window x:Class="Window1"
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://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>
<Window x:Class="HelloInkCanvas.Window1"
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://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 im nächsten Schritt der Code-Behind-Datei folgende Schaltflächen-Ereignishandler innerhalb der Window1-Klasse hinzu.
' Set the EditingMode to ink input.
Private Sub Ink(ByVal sender As Object, ByVal e As RoutedEventArgs)
inkCanvas1.EditingMode = InkCanvasEditingMode.Ink
' Set the DefaultDrawingAttributes for a red pen.
inkCanvas1.DefaultDrawingAttributes.Color = Colors.Red
inkCanvas1.DefaultDrawingAttributes.IsHighlighter = False
inkCanvas1.DefaultDrawingAttributes.Height = 2
End Sub 'Ink
' Set the EditingMode to highlighter input.
Private Sub Highlight(ByVal sender As Object, ByVal e As RoutedEventArgs)
inkCanvas1.EditingMode = InkCanvasEditingMode.Ink
' Set the DefaultDrawingAttributes for a highlighter pen.
inkCanvas1.DefaultDrawingAttributes.Color = Colors.Yellow
inkCanvas1.DefaultDrawingAttributes.IsHighlighter = True
inkCanvas1.DefaultDrawingAttributes.Height = 25
End Sub 'Highlight
' Set the EditingMode to erase by stroke.
Private Sub EraseStroke(ByVal sender As Object, ByVal e As RoutedEventArgs)
inkCanvas1.EditingMode = InkCanvasEditingMode.EraseByStroke
End Sub 'EraseStroke
' Set the EditingMode to selection.
Private Sub [Select](ByVal sender As Object, ByVal e As RoutedEventArgs)
inkCanvas1.EditingMode = InkCanvasEditingMode.Select
End Sub 'Select
// 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 F5 in Microsoft Visual Studio 2005, um das Programm im Debugger auszuführen.
Beachten Sie, wie StackPanel die Schaltflächen oben auf InkCanvas platziert. Wenn Sie versuchen, Freihandeingaben über die Schaltflächen hinweg vorzunehmen, erfasst und rendert InkCanvas diese hinter den Schaltflächen. Das liegt daran, dass die Schaltflächen, im Gegensatz zu untergeordneten Elementen, nebengeordnete Elemente von InkCanvas sind. Außerdem befinden sich die Schaltflächen an einer höheren Position in der z-Reihenfolge. Daher werden die Freihandeingaben hinter ihnen gerendert.
Siehe auch
Referenz
DefaultDrawingAttributes()