Silverlight utilizzare l’oggetto InkPresenter per disegnare in VB.Net e C#

Riporto l'articolo scritto per il sito http://www.iprogrammatori.it/articoli/programmazione/art_utilizzare-l’oggetto-inkpresenter-per-di_962.aspx

Introduzione.
L’oggetto InkPresenter, ci permette di effettuare dei disegni a video, utilizzando il puntatore del mouse come penna.
In questo articolo vedremo come creare una semplice applicazione Silverlight 4, per effettuare dei disegni, e tramite un pulsante cancellare il contenuto che si è creato nella pagina.

Figura 1

Progettazione e stesura di codice
Creare un nuovo progetto Silverlight 4, nel progetto che viene creato, passare in visualizzazione codice XAML, e digitate a mano il tag inpresenter, all’interno utilizzeremo gli eventi della gestione del mouse per effettuare il disegno.
Qui di seguito si riporta il codice XAML riguardante il controllo inkpresenter e button.

<Grid x:Name="LayoutRoot" Background="White">

<InkPresenter Name="inkPresenter" Background="Azure" MouseLeftButtonDown="inkPresenter_MouseLeftButtonDown" MouseLeftButtonUp="inkPresenter_MouseLeftButtonUp"

MouseMove="inkPresenter_MouseMove">

<Button Canvas.Left="16" Canvas.Top="25" Content="Pulisci" Height="23" Name="btnPulisci" Width="75" Click="btnPulisci_Click"/>

</InkPresenter>

</Grid>

Ma vediamo in dettaglio il codice XAML appena riportato.
Con la proprietà background viene impostato il colore dello sfondo, mentre i relativi gestori di evento, e precisamente mouseleftbuttondown, mouseleftbuttonup e mousemove viene gestito il momento in cui si preme il pulsante del mouse, si rilascia e si sposta il mouse.
L’evento click del pulsante avrà il compito di pulire la pagina da quello che abbiamo disegnato.

Passiamo in visualizzazione codice.
Si crea un oggetto di tipo stroke, a livello di classe, in modo che possiamo gestire i tratti della penna.
Si riporta il codice delle sudette operazioni.

VB.Net

Dim stroke As Stroke

Public Sub New()

InitializeComponent()

End Sub

C#

public MainPage()

{

InitializeComponent();

}

Stroke stroke;

Qui di seguito si riporta il codice degli eventi del mouse e dell’evento click del pulsante.

VB.Net

Private Sub inkPresenter_MouseLeftButtonDown(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseButtonEventArgs)

stroke = New Stroke()

inkPresenter.Strokes.Add(stroke)

End Sub

Private Sub inkPresenter_MouseLeftButtonUp(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseButtonEventArgs)

stroke = Nothing

End Sub

Private Sub inkPresenter_MouseMove(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseEventArgs)

If Not stroke Is Nothing Then

stroke.StylusPoints.Add(e.StylusDevice.GetStylusPoints(inkPresenter))

End If

End Sub

Private Sub btnPulisci_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)

inkPresenter.Strokes.Clear()

End Sub

C#

private void inkPresenter_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

stroke = new Stroke();

inkPresenter.Strokes.Add(stroke);

}

private void inkPresenter_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)

{

stroke = null;

}

private void inkPresenter_MouseMove(object sender, MouseEventArgs e)

{

if (stroke != null)

{

stroke.StylusPoints.Add(e.StylusDevice.GetStylusPoints(inkPresenter));

}

}

private void btnPulisci_Click(object sender, RoutedEventArgs e)

{

inkPresenter.Strokes.Clear();

}

Il codice appena visto, permette di gestire il mouse in modo che l’utente può utilizzare il puntante del mouse come penna per disegnare sulla pagina Silverlight.
L’evento mouseLeftButtonDown, imposta l’oggetto inpresenter con l’oggetto stroke, in questo modo, nel momento in cui si tiene premuto il pulsante sinistro, si possono tracciare le varie linee.
Il codice presente nell’evento MouseLeftButtonUp, fa in modo che al momento che si rilascia il pulsante sinistro, non c’è possibilità di disegnare mentre viene spostato il mouse.
Mentre l’evento MouseMove, tramite le coordinate del mouse, traccia i segni nell’area prestabilita, permettendo in questo modo di effettuare dei disegni a video.
Infine l’evento click del mouse, si trova il codice per pulire tutto ciò che si è disegnato, questo avviene tramite il metodo clear dell'oggetto inkpresentert.

Conclusioni
L’articolo ha voluto fornire le basi per creare applicazioni in Silverlight per fornire all’utente la possibilità di effettuare dei disegni a video. Le potenzialità offerte dalla tecnologia e dalle classi stroke, inpresenter ed altre permetteno al programmatore di realizzare applicazioni complesse.