Recopilación de entradas manuscritas
La plataforma Windows Presentation Foundation recopila las entradas de lápiz digitales como parte básica de su funcionalidad. En este tema se tratan los métodos para la recopilación de entradas de lápiz en Windows Presentation Foundation (WPF).
Requisitos previos
Para utilizar los ejemplos siguientes, debe instalar primero Microsoft Visual Studio 2005 y Windows SDK. También debe comprender la escritura de aplicaciones para WPF. Para obtener más información acerca de cómo empezar con WPF, vea Tutorial: Introducción a WPF.
Utilizar el elemento InkCanvas
El elemento InkCanvas proporciona la manera más fácil de recopilar entradas de lápiz en WPF. El elemento InkCanvas es similar al objeto InkOverlay de Tablet PC SDK 1.7 y de versiones anteriores.
Utilice un elemento InkCanvas para recibir y mostrar la entrada de entradas de lápiz. Normalmente, la entrada de entradas de lápiz se efectúa mediante un lápiz óptico, que interactúa con un digitalizador para generar los trazos de las entradas de lápiz. También puede utilizarse un mouse en lugar de un lápiz óptico. Los trazos creados se representan como objetos Stroke y se pueden manipular, tanto mediante programación como por acciones del usuario. InkCanvas permite al usuario seleccionar, modificar o eliminar un objeto Stroke existente.
XAML puede utilizarse para configurar la recopilación de entradas de lápiz con la misma facilidad que se agrega un elemento InkCanvas al árbol. En el ejemplo siguiente se agrega un elemento InkCanvas a un proyecto de WPF predeterminado creado en Microsoft Visual Studio 2005.
<Grid>
<InkCanvas/>
</Grid>
El elemento InkCanvas también puede contener elementos secundarios que permiten agregar funciones de entrada de lápiz a casi todos los tipos de elementos XAML. Por ejemplo, para agregar funciones de escritura a mano a un elemento de texto, basta con convertirlo en un elemento secundario de InkCanvas.
<InkCanvas>
<TextBlock>Show text here.</TextBlock>
</InkCanvas>
Agregar compatibilidad para marcar una imagen con una entrada de lápiz resulta igual de sencillo.
<InkCanvas>
<Image Source="myPicture.jpg"/>
</InkCanvas>
Modos de InkCollection
InkCanvas proporciona compatibilidad con varios modos de entrada mediante su propiedad EditingMode.
Manipular las entradas de lápiz
InkCanvas admite numerosas operaciones de edición de entradas de lápiz. Por ejemplo, InkCanvas admite el borrado inmediato sin que se requiera ningún código adicional para agregar la funcionalidad al elemento.
Selection
Configurar el modo de selección es tan sencillo como establecer la propiedad InkCanvasEditingMode en Select. El código siguiente configura el modo de edición según el valor de CheckBox:
' 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
Utilice la propiedad DrawingAttributes para cambiar la apariencia de los trazos de las entradas de lápiz. Por ejemplo, el miembro Color de DrawingAttributes establece el color de Stroke representado. En el ejemplo siguiente se cambia el color de los trazos seleccionados a rojo.
' 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
La propiedad DefaultDrawingAttributes proporciona acceso a propiedades tales como el alto, ancho y color de los trazos que se van a crear en un elemento InkCanvas. Cuando se cambia DefaultDrawingAttributes, todos los trazos futuros que se escriben en InkCanvas se representan con los nuevos valores de la propiedad.
Además de modificar la propiedad DefaultDrawingAttributes en el archivo de código subyacente, puede utilizar la sintaxis XAML para especificar las propiedades DefaultDrawingAttributes. En el ejemplo de código XAML siguiente se muestra cómo establecer la propiedad Color. Para usar este código, cree un nuevo proyecto WPF llamado "HelloInkCanvas" en Visual Studio 2005. Reemplace el código del archivo Window1.xaml con el código siguiente.
<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>
<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>
A continuación, agregue los controladores de eventos de botón siguientes al archivo de código subyacente, dentro de la clase Window1.
' 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;
}
Después de copiar el código, presione F5 en Microsoft Visual Studio 2005 para ejecutar el programa en el depurador.
Observe cómo StackPanel coloca los botones encima de InkCanvas. Si intenta realizar entradas de lápiz sobre la parte superior de los botones, InkCanvas las recolecciona y representa detrás de los botones. Esto se debe a que los botones están en el mismo nivel que InkCanvas, no son elementos secundarios. Además, los botones ocupan niveles superiores en el orden z, por lo que la entrada de lápiz se representa detrás de ellos.
Vea también
Referencia
DefaultDrawingAttributes()