Raccogli input penna

Articolo
10/18/2023

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 usare gli esempi seguenti, è prima necessario installare Visual Studio e Windows SDK. È anche necessario comprendere come scrivere applicazioni per WPF. Per altre informazioni su come iniziare a usare WPF, vedere Procedura dettagliata: Prima applicazione desktop WPF.

Usare l'elemento InkCanvas

L'elemento System.Windows.Controls.InkCanvas fornisce il modo più semplice per raccogliere input penna in WPF. Usare un InkCanvas elemento per ricevere e visualizzare l'input input penna. In genere, l'input penna viene effettuato tramite uno stilo che interagisce con un digitalizzatore per produrre i tratti. È anche possibile usare un mouse al posto dello stilo. I tratti creati sono rappresentati come Stroke oggetti e possono essere modificati sia a livello di codice che tramite input dell'utente. InkCanvas Consente agli utenti di selezionare, modificare o eliminare un oggetto esistenteStroke.

Usando XAML, puoi configurare facilmente la raccolta di input penna come l'aggiunta di un elemento InkCanvas all'albero. L'esempio seguente aggiunge un oggetto InkCanvas a un progetto WPF predefinito creato in Visual Studio:

<Grid>
  <InkCanvas/>
</Grid>

L'elemento InkCanvas può contenere anche elementi figlio, consentendo di aggiungere funzionalità di annotazione input penna a quasi qualsiasi tipo di elemento XAML. Ad esempio, per aggiungere funzionalità di input penna a un elemento di testo, è sufficiente impostarlo come figlio di :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

InkCanvas fornisce il supporto per varie modalità di input tramite la relativa EditingMode proprietà .

Modifica input penna

InkCanvas fornisce il supporto per molte operazioni di modifica dell'input penna. Ad esempio, InkCanvas supporta la cancellazione back-of-pen e non è necessario alcun codice aggiuntivo per aggiungere la funzionalità all'elemento .

Selezione

L'impostazione della modalità di selezione è semplice come impostare la InkCanvasEditingMode proprietà su Seleziona.

Il codice seguente imposta la modalità di modifica in base al valore di un oggetto CheckBox:

// Set the selection mode based on a checkbox
if ((bool)cbSelectionMode.IsChecked)
{
    theInkCanvas.EditingMode = InkCanvasEditingMode.Select;
}
else
{
    theInkCanvas.EditingMode = InkCanvasEditingMode.Ink;
}

' Set the selection mode based on a checkbox
If CBool(cbSelectionMode.IsChecked) Then
    theInkCanvas.EditingMode = InkCanvasEditingMode.Select
Else
    theInkCanvas.EditingMode = InkCanvasEditingMode.Ink
End If

DrawingAttributes

Utilizzare la DrawingAttributes proprietà per modificare l'aspetto dei tratti input penna. Ad esempio, il Color membro di DrawingAttributes imposta il colore dell'oggetto di cui è stato eseguito Strokeil rendering.

Nell'esempio seguente il colore dei tratti selezionati viene modificato in rosso:

// 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;
    }
}

' 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

DefaultDrawingAttributes

La DefaultDrawingAttributes proprietà fornisce l'accesso alle proprietà, ad esempio altezza, larghezza e colore dei tratti da creare in un oggetto InkCanvas. Dopo aver modificato , DefaultDrawingAttributestutti i tratti futuri immessi in InkCanvas vengono visualizzati con i nuovi valori delle proprietà.

Oltre a modificare nel DefaultDrawingAttributes file code-behind, puoi usare la sintassi XAML per specificare DefaultDrawingAttributes le proprietà.

Nell'esempio seguente viene illustrato come impostare la Color proprietà . Per usare questo codice, creare un nuovo progetto WPF denominato "HelloInkCanvas" in Visual Studio. Sostituire il codice nel file MainWindow.xaml con il codice seguente:

<Window x:Class="HelloInkCanvas.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://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>

Aggiungere quindi i gestori eventi del pulsante seguenti al file code-behind all'interno della classe MainWindow:

// 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 aver copiato questo codice, premere F5 in Visual Studio per eseguire il programma nel debugger.

Si noti che posiziona i StackPanel pulsanti sopra .InkCanvas Se si tenta di eseguire l'input penna sopra la parte superiore dei pulsanti, raccoglie InkCanvas ed esegue il rendering dell'input penna dietro i pulsanti. Ciò è dovuto al fatto che i pulsanti sono elementi di pari livello rispetto InkCanvas ai figli. Il rendering dell'input penna viene eseguito dietro i pulsanti anche perché si trovano più in alto nel z order.

Condividi tramite