Condividi tramite

Raccolta di input penna

Aggiornamento: novembre 2007

La raccolta di input penna è una delle funzionalità principali della piattaforma Windows Presentation Foundation. In questo argomento vengono illustrati i metodi per la raccolta di input penna in Windows Presentation Foundation (WPF).

Prerequisiti

Per utilizzare gli esempi seguenti è necessario innanzitutto installare Microsoft Visual Studio 2005 e Windows SDK. È inoltre necessario disporre di conoscenze relative alla scrittura di applicazioni per WPF. Per ulteriori informazioni sull'utilizzo di WPF, vedere Guida introduttiva a Windows Presentation Foundation.

Utilizzo dell'elemento InkCanvas

L'elemento InkCanvas rappresenta il modo più semplice per raccogliere input penna in WPF. L'elemento InkCanvas è simile all'oggetto InkOverlay disponibile in Tablet PC SDK 1.7e nelle versioni precedenti.

Utilizzare un elemento InkCanvas per ricevere e visualizzare input penna. In genere, l'input penna viene effettuato tramite uno stilo che interagisce con un digitalizzatore per produrre i tratti. È inoltre possibile utilizzare un mouse invece di uno stilo. I tratti creati sono rappresentati come oggetti Stroke e possono essere modificati sia a livello di codice sia tramite input dell'utente. L'elemento InkCanvas consente agli utenti di selezionare, modificare o eliminare un oggetto Stroke esistente.

Con XAML, è possibile configurare insiemi di input penna con la stessa facilità con cui si aggiunge un elemento InkCanvas alla struttura ad albero. Nell'esempio riportato di seguito viene aggiunto un oggetto InkCanvas a un progetto WPF predefinito creato in Microsoft Visual Studio 2005.

<Grid>
  <InkCanvas/>
</Grid>

L'elemento InkCanvas può anche contenere elementi figlio, rendendo possibile l'aggiunta di funzionalità di annotazione a penna a quasi tutti i tipi di elementi XAML. Ad esempio, per aggiungere funzionalità di input penna a un elemento di testo, è sufficiente trasformarlo in un elemento figlio di un oggetto InkCanvas.

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

L'aggiunta del supporto per contrassegnare un'immagine con input penna è altrettanto semplice.

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

Modalità InkCollection

L'oggetto InkCanvas fornisce supporto per varie modalità di input tramite la proprietà EditingMode.

Modifica di input penna

L'oggetto InkCanvas fornisce supporto per numerose operazioni di modifica di input penna. Ad esempio, InkCanvas supporta la cancellazione con la gomma della penna senza la necessità di codice supplementare per aggiungere tale funzionalità all'elemento.

Selezione

Per impostare la modalità di selezione è sufficiente impostare la proprietà InkCanvasEditingMode su Select. Nel codice seguente viene impostata la modalità di modifica in base al valore di 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

Utilizzare la proprietà DrawingAttributes per modificare l'aspetto dei tratti di input penna. Ad esempio, il membro Color di DrawingAttributes consente di impostare il colore dell'oggetto Stroke sottoposto a rendering. Nell'esempio riportato di seguito viene impostato il colore dei tratti selezionati su rosso.

' 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 proprietà DefaultDrawingAttributes consente di accedere a proprietà quali l'altezza, l'ampiezza e il colore dei tratti da creare in un oggetto InkCanvas. Una volta modificata la proprietà DefaultDrawingAttributes, tutti i futuri tratti immessi nell'oggetto InkCanvas verranno sottoposti a rendering con i nuovi valori della proprietà.

Oltre che per modificare la proprietà DefaultDrawingAttributes nel file code-behind, è possibile utilizzare la sintassi XAML per specificare le proprietà DefaultDrawingAttributes. Nel codice XAML riportato di seguito viene illustrato come impostare la proprietà Color. Per utilizzare questo codice, creare un nuovo progetto WPF denominato "HelloInkCanvas" in Visual Studio 2005. Sostituire il codice nel file Window1.xaml con il codice seguente.

<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>

Successivamente, aggiungere i seguenti gestori eventi di pulsanti al file code-behind, nella 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;
}

Dopo avere copiato il codice, premere F5 in Microsoft Visual Studio 2005 per eseguire il programma nel debugger.

Si noti il modo in cui l'oggetto StackPanel colloca i pulsanti nella parte superiore dell'oggetto InkCanvas. Se si tenta di inserire input penna sopra i pulsanti, l'oggetto InkCanvas raccoglie l'input penna e ne esegue il rendering sotto i pulsanti. Questa situazione si verifica poiché i pulsanti sono elementi di pari livello dell'oggetto InkCanvas al contrario dell'elemento figlio. Inoltre, poiché i pulsanti sono più in alto nell'ordine z, il rendering dell'input penna viene eseguito sotto di loro.

Vedere anche

Riferimenti

DrawingAttributes

DefaultDrawingAttributes()

System.Windows.Ink

  • Last updated on