Silverlight il controllo Treeview VB.Net e C#

Articolo introduttivo al controllo Treeview di Silverlight 5 tramite l'utilizzo del linguaggio di programmazione VB.Net e C#.

di Emanuele Mattei il 31/01/2012

Sviluppatore Microsoft .Net, Collaboratore di IProgrammatori

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

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.

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

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.

Silverlight il controllo Treeview VB.Net e C#

Introduzione

Stesura del codice

Caricamento dinamico dei nodi

Conclusioni

Job Manager

OFFRO LAVORO

CERCO LAVORO

Ultimi articoli

Ultime dal Forum