Collecte d'encre
La collecte d'encre numérique fait partie des principales fonctionnalités de la plateforme Windows Presentation Foundation. Cette rubrique présente des méthodes de collecte d'encre dans Windows Presentation Foundation (WPF).
Composants requis
Pour utiliser les exemples suivants, vous devez d'abord installer Microsoft Visual Studio 2005 et Windows SDK. Vous devez également comprendre comment écrire des applications pour WPF. Pour plus d'informations sur la mise en route de WPF, consultez Procédure pas à pas : mise en route de WPF.
Utilisation de l'élément InkCanvas
L'élément InkCanvas offre la manière la plus simple de collecter de l'encre dans WPF. L'élément InkCanvas est semblable à l'objet InkOverlay du Tablet PC SDK 1.7 et des versions antérieures.
Utilisez un élément InkCanvas pour recevoir et afficher l'entrée d'encre. Généralement, vous entrez de l'encre à l'aide d'un stylet qui interagit avec un digitaliseur pour produire des traits d'encre. En outre, une souris peut être utilisée à la place du stylet. Les traits créés sont représentés comme objets Stroke et ils peuvent être manipulés aussi bien par programme que par l'entrée d'utilisateur. InkCanvas permet aux utilisateurs de sélectionner, modifier ou supprimer un Stroke existant.
En utilisant XAML, il est aussi facile d'installer la collecte d'encre que d'ajouter un élément InkCanvas à votre arborescence. L'exemple suivant ajoute un InkCanvas à un projet WPF par défaut créé dans Microsoft Visual Studio 2005.
<Grid>
<InkCanvas/>
</Grid>
L'élément InkCanvas peut également contenir des éléments enfants, ce qui permet d'ajouter des fonctions d'annotation manuscrite à quasiment tout type d'élément XAML. Par exemple, pour ajouter des fonctions d'encrage à un élément de type texte, définissez-le simplement en tant qu'enfant d'un InkCanvas.
<InkCanvas>
<TextBlock>Show text here.</TextBlock>
</InkCanvas>
Il est tout aussi simple d'ajouter une prise en charge pour baliser une image avec de l'encre.
<InkCanvas>
<Image Source="myPicture.jpg"/>
</InkCanvas>
Modes InkCollection
Le InkCanvas offre une prise en charge pour différents modes d'entrée via sa propriété EditingMode.
Manipulation d'encre
Le InkCanvas offre une prise en charge pour de nombreuses opérations de modification de l'encre. Par exemple, InkCanvas prend en charge la gomme du stylet sans nécessiter de code supplémentaire pour ajouter les fonctionnalités à l'élément.
Selection
La définition du mode de sélection est aussi simple que l'affectation de la valeur Select à la propriété InkCanvasEditingMode. Le code suivant définit le mode de modification d'après la valeur d'un 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
Utilisez la propriété DrawingAttributes pour modifier l'apparence des traits d'encre. Par exemple, le membre Color de DrawingAttributes définit la couleur du Stroke rendu. L'exemple suivant fait passer la couleur des traits sélectionnés en rouge.
' 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 propriété DefaultDrawingAttributes donne accès aux propriétés telles que la hauteur, la largeur et la couleur des traits à créer dans un InkCanvas. Une fois que vous modifiez DefaultDrawingAttributes, tous les futurs traits entrés dans le InkCanvas sont restitués avec les nouvelles valeurs de propriété.
En plus de modifier DefaultDrawingAttributes dans le fichier code-behind, vous pouvez utiliser la syntaxe XAML pour spécifier des propriétés DefaultDrawingAttributes. Le code XAML suivant montre comment définir la propriété Color. Pour utiliser ce code, créez un nouveau projet WPF intitulé « HelloInkCanvas » dans Visual Studio 2005. Remplacez le code du fichier Window1.xaml par le code suivant.
<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>
Ensuite, ajoutez les gestionnaires d'événements de bouton suivants au fichier code-behind, dans la classe 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;
}
Après avoir copié ce code, appuyez sur F5 dans Microsoft Visual Studio 2005 pour exécuter le programme dans le débogueur.
Notez la façon dont le StackPanel place les boutons sur le InkCanvas. Si vous essayez de mettre de l'encre en haut des boutons, le InkCanvas collecte et restitue l'encre derrière les boutons. En effet, les boutons sont des frères du InkCanvas, par opposition aux enfants. De même, les boutons sont plus haut dans l'ordre de plan ; l'encre est donc restituée derrière eux.
Voir aussi
Référence
DefaultDrawingAttributes()