Silverlight il controllo TreeView VB.Net e C#

Riporto l'articolo scritto per il sito http://www.iprogrammatori.it/articoli/programmazione/art_silverlight-il-controllo-treeview-vbnet-_1141.aspx

Introduzione
In questo nuovo articolo sulla tecnologia Silverlight, versione 5 vedremo l’utilizzo del controllo Treeview, un controllo che permette la visualizzazione i dati in maniera ramificata, a livelli.

Stesura del codice
Si apre Visual Studio 2010, e si crea un nuovo progetto Silverlight con la versione 5.
Dalla barra degli strumenti, aggiungiamo un controllo Treeview, nella finestra delle proprietà (se non viene visualizzata facciamo f4 sul controllo selezionato) facciamo click sul pulsante della proprietà “Items”, verrà aperta una finestra nella quale possiamo aggiungere i vari nodi.
Tramite il pulsante “Add” situata sulla parte sinistra della finesta, sotto alla voce “Select Item”, viene aggiunto un nodo. Nella parte destra vengono visualizzate le proprietà del nodo selezionato, il tutto come mostrato in figura 1.

Figura 1

La proprietà “Header” permette di impostare il testo del nodo appena creato , nel nostro esempio è stato digitato del testo libero.
Nella finestra delle proprietà, possiamo effettuare anche il binding dei dati, o altre operazioni, un semplice utilizzo di proprietà può essere quello di impostare una determinata formattazione al nodo, come per esempio se il nodo è selezionato, tramite la proprietà “IsSelected” impostata a “True”, oppure possiamo espandere il nodo per visualizzare i sottonodi di appartenenza, il tutto impostando la proprietà “IsExpanded”, a true.
Se facciamo click sulla proprietà “Items”, possiamo aggiungere altri sottonodi, in tal caso verrà visualizzata una nuova finestra, in cui è possibile aggiungere altri elementi.
Aggiungiamo un nuovo elemento e nella proprietà “Header” impostiamo tale proprietà con il valore “Sotto Nodo”.
Confermate il tutto, tramite il pulsante “OK” delle varie finestre.
Il risultato sarà come quello illustrato in figura 2.

Figura 2

Il codice XAML, è come quello riportato qui di seguito.

<sdk:TreeView Height="259" HorizontalAlignment="Left" Margin="12,12,0,0" Name="treeView1" VerticalAlignment="Top" Width="227">

<sdk:TreeViewItem Header="Root">

<sdk:TreeViewItem Header="Sotto Nodo" />

</sdk:TreeViewItem>

</sdk:TreeView>

Possiamo aggiungere al singolo elemento, anche immagini ed altri controlli.
Qui il codice di tali operazioni

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

<sdk:TreeView Height="259" HorizontalAlignment="Left" Margin="12,12,0,0" Name="treeView1" VerticalAlignment="Top" Width="227">

<sdk:TreeViewItem Header="Root">

<sdk:TreeViewItem Header="Sotto Nodo" />

<sdk:TreeViewItem Header="Sotto Nodo con immagine" >

<StackPanel Orientation="Horizontal">

<Image Source="/SLTreeviewCS;component/Images/Foto.jpg" Height="50" Width="50" />

</StackPanel>

</sdk:TreeViewItem>

</sdk:TreeViewItem>

</sdk:TreeView>

</Grid>

Ora vedremo come utilizzare alcuni eventi.

Selezioniamo il controllo treeview, e nella finestra delle proprietà nella sezione eventi, facciamo doppio click sull’evento “SelectedItemChanged” che si verifica nel momento in cui cambia la selezione dell’elemento.
Come riportato qui di seguito.

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

<sdk:TreeView Height="198" HorizontalAlignment="Left" Margin="12,12,0,0" Name="treeView1" VerticalAlignment="Top" Width="248" SelectedItemChanged="treeView1_SelectedItemChanged">

<sdk:TreeViewItem Header="Root">

<sdk:TreeViewItem Header="Sotto Nodo" />

<sdk:TreeViewItem Header="Sotto Nodo con immagine" >

<StackPanel Orientation="Horizontal">

<Image Source="/SLTreeviewCS;component/Images/ Foto.jpg" Height="50" Width="50" />

</StackPanel>

</sdk:TreeViewItem>

</sdk:TreeViewItem>

</sdk:TreeView>

</Grid>

Passiamo in visualizzazione codice e scriviamo il codice per visualizzare a video un messaggio, che riporta il testo relativo al testo del nodo selezionato.

VB.Net

'si verifica quando cambia la selezione degli elementi

Private Sub TreeView1_SelectedItemChanged(sender As System.Object, e As System.Windows.RoutedPropertyChangedEventArgs(Of System.Object)) Handles TreeView1.SelectedItemChanged

Dim trwSeleziona As TreeView = TryCast(sender, TreeView)

Dim ElementoSelezionato As TreeViewItem = TryCast(trwSeleziona.SelectedItem, TreeViewItem)

If TypeOf (ElementoSelezionato) Is TreeViewItem Then

MessageBox.Show(ElementoSelezionato.Header.ToString())

End If

End Sub

C#

//si verifica quando cambia la selezione degli elementi

private void treeView1_SelectedItemChanged(object sender, RoutedPropertyChangedEventArgs<object> e)

{

TreeView trwSeleziona = sender as TreeView;

TreeViewItem ElementoSelezionato = trwSeleziona.SelectedValue as TreeViewItem;

if (ElementoSelezionato is TreeViewItem)

{

MessageBox.Show(ElementoSelezionato.Header.ToString());

}

}

Nella visualizzazione XAML, selezioniamo il nodo quello relativo all’immagine e nella finestra delle proprietà facciamo doppio click nell’evento “Selected“ anche all’evento “Collapsed “ e l’evento “Expanded
“ .
L’evento Selected viene eseguito nel momento in cui si seleziona il nodo, mentre l’evento “Collapsed” quando si nascondono i nodi, e l’evento Expanded quando si espande.

Qui di seguito si riporta il codice XAML

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

<sdk:TreeView Height="198" HorizontalAlignment="Left" Margin="12,12,0,0" Name="treeView1" VerticalAlignment="Top" Width="248" SelectedItemChanged="treeView1_SelectedItemChanged">

<sdk:TreeViewItem Header="Root">

<sdk:TreeViewItem Header="Sotto Nodo" />

<sdk:TreeViewItem Header="Sotto Nodo con immagine" Selected="TreeViewItem_Selected" Collapsed="TreeViewItem_Collapsed" Expanded="TreeViewItem_Expanded">

<StackPanel Orientation="Horizontal">

<Image Source="/SLTreeviewCS;component/Images/Foto.jpg" Height="50" Width="50" />

</StackPanel>

</sdk:TreeViewItem>

</sdk:TreeViewItem>

</sdk:TreeView>

</Grid>

Qui di seguito vediamo il codice per i vari eventi.
Per l’evento Selected, ossia quando si seleziona quel determinato nodo.

VB.Net

' Si verifica quando viene selezionato un determinato nodo Private Sub TreeViewItem1_Selected(sender As System.Object, e As System.Windows.RoutedEventArgs) Handles TreeViewItem1.Selected

Dim elemento As TreeViewItem = TryCast(sender, TreeViewItem)

MessageBox.Show(elemento.Header.ToString())

End Sub

C#

//Si verifica quando viene selezionato un determinato nodo

private void TreeViewItem_Selected(object sender, RoutedEventArgs e)

{

TreeViewItem elemento = sender as TreeViewItem;

MessageBox.Show(elemento.Header.ToString());

}

Vediamo il codice da scrivere per l’evento “Collpased” ossia quando vengono nascosti i sottonodi.

VB.Net

'Si verifica quando racchiudo il nodo

Private Sub TreeViewItem1_Collapsed(sender As System.Object, e As System.Windows.RoutedEventArgs) Handles TreeViewItem1.Collapsed

MessageBox.Show("Racchiude")

End Sub

C#

//Si verifica quando racchiudo il nodo

private void TreeViewItem_Collapsed(object sender, RoutedEventArgs e)

{

MessageBox.Show("Racchiude");

}

Ora scriviamo il codice per quanto concerne l’evento che espande i vari sottonodi.

VB.Net

'espando un determinato nodo

Private Sub TreeViewItem1_Expanded(sender As System.Object, e As System.Windows.RoutedEventArgs) Handles TreeViewItem1.Expanded

MessageBox.Show("Espande")

End Sub

C#

//espando un determinato nodo

private void TreeViewItem_Expanded(object sender, RoutedEventArgs e)

{

MessageBox.Show("Espande");

}

Caricamento dinamico dei nodi
Aggiungiamo alla nostra pagina, un nuovo controllo treeview, in modo che verrà riempito da codice.
Terminata tale operazione, passiamo in visualizzazione codice e scriviamo una funzione che carica il controllo.
Qui di seguito si riporta il codice completo di tale funzione

VB.Net

Private Sub CaricaDati()

'Nodo principale

Dim nodo As New TreeViewItem()

'imposto il testo

nodo.Header = "root"

'lo aggiungo al controllo

TreeView2.Items.Add(nodo)

'creo il sottonodo

Dim SottoNodo As New TreeViewItem

'imposto il testo

SottoNodo.Header = "SottoNodo1"

'imposto un nuovo oggetto e le varie proprietà, come selezionato ed esteso

nodo = New TreeViewItem

nodo.Header = "Root SottoNodo"

nodo.IsExpanded = True

nodo.IsSelected = True

'aggiungo il sottonodo al nodo

nodo.Items.Add(SottoNodo)

TreeView2.Items.Add(nodo)

End Sub

C#

private void CaricaDati()

{

//Nodo principale

TreeViewItem nodo = new TreeViewItem();

//imposto il testo

nodo.Header = "root";

//lo aggiungo al controllo

treeView2.Items.Add(nodo);

//creo il sottonodo

TreeViewItem SottoNodo = new TreeViewItem();

//imposto il testo

SottoNodo.Header = "SottoNodo1";

//imposto un nuovo oggetto e le varie proprietà, come selezionato ed esteso

nodo = new TreeViewItem();

nodo.Header = "Root SottoNodo";

nodo.IsExpanded = true;

nodo.IsSelected = true;

//aggiungo il sottonodo al nodo

nodo.Items.Add(SottoNodo);

treeView2.Items.Add(nodo);

}

Come si vede dal codice si è creato un nodo, il quale viene valorizzata la proprietà header, successivamente viene creato un sottonodo, impostando alcune proprietà come header, selezionato e con espansione.

Ora non ci resta che richiamare tale funzione, dall'event Loader della pagina, si invoca tale metodo.

Qui di seguito si riporta il codice delle suddette operazioni.

VB.Net

Private Sub LayoutRoot_Loaded(sender As System.Object, e As System.Windows.RoutedEventArgs) Handles LayoutRoot.Loaded

CaricaDati()

End Sub

C#

private void LayoutRoot_Loaded(object sender, RoutedEventArgs e)

{

CaricaDati();

}

Conclusioni
Si è visto come utilizzare in maniera introduttiva il controllo Treeview, nell'articolo, non è stato descritto in maniera dettagliata le varie righe di codice, in quanto i commenti e le semplici righe di codice, lasciano al lettore di comprendere il codice scritto. L'utilizzo di questo controllo è molto semplice, inoltre la tecnologia Silverlight offre al programmatore semplicità nello scrivere il codice.