Partager via


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

DrawingAttributes

DefaultDrawingAttributes()

System.Windows.Ink