Tutorial Silverlight Combobox VB.Net e C#

Si riporta l'articolo scritto per il sito http://www.iprogrammatori.it/articoli/programmazione/art_alla-scoperta-del-controllo-combobox-di-_1180.aspx

Introduzione

In questo articolo vedremo di conoscere il controllo casella combinata, propriamente chiamata combobox, che ci permette di visualizzare dei dati.
Vedremo alcuni aspetti di questo controllo e la sua flessibilità offerta dalla tecnologia Silverlight.
I vari frammenti di codice sono per il linguaggio di programmazione VB.Net e C#.

Stesura di codice

Si crea un nuovo progetto tramite Silverlight 4, usando il linguaggio di proprio interesse.
Trasciniamo  nella nostra form il controllo ComboBox, nella finestra delle proprietà che troviamo sulla destra, facciamo click sul pulsante relativo alla proprietà “Items”, nella finestra che viene aperta, facciamo click sul pulsante “Aggiungi” che troviamo in alto a sinistra.
Nella parte destra, impostiamo la proprietà “Content” con il testo “Valore A”, aggiungiamo un altro valore, sempre facendo click sul pulsante “Aggiungi”, questa volta la proprietà “Content” impostiamo il testo “Valore B”.
I pulsanti situati sotto il pulsante “Aggiungi” permettono di spostare l’ordine delle voci oppure eliminarle”.
A questo punto confermate il tutto tramite il pulsante “Ok” e avviate il progetto.
Qui di seguito si riporta il codice XAML.

<ComboBox Height="23" HorizontalAlignment="Left" Margin="22,39,0,0" Name="ComboBox1" VerticalAlignment="Top" Width="158">

            <ComboBoxItem Content="Valore A" />

            <ComboBoxItem Content="Valore B" />

        </ComboBox>

Tramite la finestra delle proprietà del singolo elemento, o tramite il codice XAML, possiamo modificare lo stile del singolo valore, per esempio grandezza e colore, il tutto come riportato qui di seguito.

   <ComboBox Height="23" HorizontalAlignment="Left" Margin="22,39,0,0" Name="ComboBox1" VerticalAlignment="Top" Width="158">

            <ComboBoxItem Content="Valore A" Foreground="Red" FontSize="20" FontWeight="Bold" />

            <ComboBoxItem Content="Valore B" />

        </ComboBox>

Ogni singola voce, può avere una determinata formattazione anche differente tra le varie voci.
Vediamo come caricare dinamicamente le voci, tramite codice VB.Net e C#
Qui di seguito riportiamo un frammento di codice, in cui si utilizza il metodo “Add” della proprietà “Items”.

VB.Net

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

        ComboBox1.Items.Add("Valore caricato dinamicamente")

    End Sub

C#

private void LayoutRoot_Loaded(object sender, RoutedEventArgs e)

        {

            ComboBox1.Items.Add("Valore caricato dinamicamente");

        }

Se invece vogliamo inserire un elemento nuovo in una certa posizione del nostro controllo combobox, utilizziamo il metodo “Insert” della proprietà “items” che tramite due valori, impostiamo rispettivamente l’indice di dove va inserito, ed il testo da inserire.
Qui di seguito si riporta un esempio.

VB.Net

'Inserisco dopo due elementi

        ComboBox1.Items.Insert(2, "Testo")

C#

//Inserisco dopo due elementi

            ComboBox1.Items.Insert(2, "Testo");

Vediamo come a run time, ossia in esecuzione di codice, si può eliminare la voce.
Nell’esempio qui di seguito, tramite l’evento click di un pulsante (aggiungiamo un controllo button) viene eliminato l’elemento selezionato.

VB.Net

Private Sub BtnElimina_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles BtnElimina.Click

      

        'elimino il valore selezionato

        ComboBox1.Items.RemoveAt(ComboBox1.Items.IndexOf(ComboBox1.SelectedItem))

    End Sub

C#

private void BtnElimina_Click(object sender, RoutedEventArgs e)

        {

            //elimino il valore selezionato

            ComboBox1.Items.RemoveAt(ComboBox1.Items.IndexOf(ComboBox1.SelectedItem));

        }

Se invece vogliamo eliminare tutti gli elementi, tramite il metodo “Clear” della proprietà “Items” possiamo eliminare  tutto il contenuto della Combobox.
Qui di seguito un esempio di codice.

VB.Net

'Elimino tutti i valori

        ComboBox1.Items.Clear()

C#

//Elimino tutti i valori

            ComboBox1.Items.Clear();

Possiamo inserire anche dei controlli, per esempio, nel seguente frammento di codice, abbiamo applicato un controllo checkbox, un controllo image ed un controllo TextBlock, in questo modo il risultato sarà come in figura 1.

Figura 1

Codice XAML

<ComboBox Height="23" HorizontalAlignment="Left" Margin="22,39,0,0" Name="ComboBox1" VerticalAlignment="Top" Width="158">

            <CheckBox Name="chkElemento">

            <StackPanel Orientation="Horizontal">

                <Image Source="/SLComboBox;component/Images/Tree.jpg" Height="30"></Image>

                <TextBlock Text="Alberi"></TextBlock>

            </StackPanel>

                </CheckBox>

        </ComboBox>

La proprietà “ItemsSource” ci permette di inserire un insieme di dati, come per esempio, una lista, un array, o altro, stesso metodo di quello utilizzato per il controllo datagrid, listbox, ecc.
Qui di seguito si riporta un esempio di tale utilizzo.

VB.Net

Dim Elementi() As String = {"Testo A", "Testo B", "Testo C"}

        ComboBox1.ItemsSource = Elementi

C#

string[]Elementi  = {"Testo A", "Testo B", "Testo C"};

            ComboBox1.ItemsSource = Elementi;

Vediamo come impostare nel nostro controllo ComboBox il databinding in un classe.
Tramite la proprietà “DisplayMemberPath”
 Possiamo impostare il valore da visualizzare nella nostra casella, quindi abbinato a dei dati, ad un determinato campo o proprietà nel caso sia una classe, mentre la proprietà “SelectedValuePath“ conterrà il valore per l’elemento che andremo a visualizzare o selezionare.
In pratica la proprietà "DisplaymemberPath" visualizza il testo che andremo a far vedere all’utente, mentre la proprietà "SelectedValuePath" il valore per ogni singola voce.
Qui di seguito si riporta l’esempio XAML della nostra combobox.

    <ComboBox Height="23" HorizontalAlignment="Left" Margin="22,39,0,0" Name="ComboBox1" DisplayMemberPath="Nome"  SelectedValuePath="Cognome" VerticalAlignment="Top" Width="158" SelectionChanged="ComboBox1_SelectionChanged">

          

        </ComboBox>

Come vedete le proprietà sono state valorizzati con due valori, che nel nostro caso, sono le proprietà di una classe che vedremo tra poco. Inoltre è stato impostato l’evento “SelectionChanged” che si scatena quando selezioniamo un elemento nella nostra combobox.
Ora passiamo in visualizzazione codice e scriviamo la classe  che utilizzeremo per valorizzare la nostra casella combinata.

VB.Net

Public Class Persona

    Public Property Nome As String

    Public Property Cognome As String

    Public Property Citta As String

End Class

C#

  public   class Persona

    {

        public string Nome { get; set; }

        public string Cognome { get; set; }

        public string Citta { get; set; }

    }

Qui di seguito il codice per valorizzare la casella combinata.

VB.Net

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

        'lista della classe persona

        Dim persone As New List(Of Persona)

        'Creo un oggetto persona in modo che viene aggiunto alla lista

        Dim persona As New Persona

        persona.Citta = "Roma"

        persona.Cognome = "Mattei"

        persona.Nome = "Emanuele"

        'aggiungo alla lista persona

        persone.Add(persona)

        'creo un altro oggetto

        persona = New Persona()

        persona.Citta = "Firenze"

        persona.Cognome = "Maffei"

        persona.Nome = "EMa"

        'aggiungo alla lista

        persone.Add(persona)

        ComboBox1.ItemsSource = persone

    End Sub

C#

private void LayoutRoot_Loaded(object sender, RoutedEventArgs e)

        {

            //lista della classe persona

            List<Persona> persone = new List<Persona>();

            //Creo un oggetto persona in modo che viene aggiunto alla lista

            Persona persona = new Persona();

            persona.Cognome = "Mattei";

            persona.Citta = "Roma";

            persona.Nome = "Emanuele";

            //aggiungo alla lista persona

            persone.Add(persona);

            //creo un altro oggetto

            persona = new Persona();

            persona.Citta = "Firenze";

            persona.Cognome = "Maffei";

            persona.Nome = "EMa";

            //aggiungo alla lista;

            persone.Add(persona);

            ComboBox1.ItemsSource = persone;

        }

Qui di seguito il codice, che visualizza a video il valore dell’elemento selezionato (nel nostro caso il cognome) .

VB.Net

  Private Sub ComboBox1_SelectionChanged(ByVal sender As System.Object, ByVal e As System.Windows.Controls.SelectionChangedEventArgs) Handles ComboBox1.SelectionChanged

        MessageBox.Show(ComboBox1.SelectedValue.ToString())

    End Sub

C#

private void ComboBox1_SelectionChanged(object sender, SelectionChangedEventArgs e)

        {

            MessageBox.Show(ComboBox1.SelectedValue.ToString());

        }

A questo punto non ci resta che avviare e la nostra casella combinata, visualizzare i nomi impostati nella proprietà “Nome” mentre se selezioniamo un elemento dalla lista, verrà visualizzato il rispettivo valore, che nel nostro caso è impostato per la proprietà cognome.
Siamo giunti quasi alla conclusione del nostro articolo, in questa parte vediamo come applicare nel nostro controllo combobox, altri controlli, come il texblock per visualizzare le varie proprietà (nome, cognome e città).
Dobbiamo solo modificare la parte XAML, inserendo due sottonodi come un “ItemTemplate” ed un “DataTemplate” il tutt come mostrato qui di seguito.

<ComboBox Height="23" HorizontalAlignment="Left" Margin="22,39,0,0" Name="ComboBox1"    VerticalAlignment="Top" Width="158"  >

            <ComboBox.ItemTemplate>

                <DataTemplate>

                    <StackPanel Margin="0,3,0,3">

                        <StackPanel Orientation="Horizontal">

                            <TextBlock Width="150"

                           Text="{Binding Path=Nome}"

                           VerticalAlignment="Center" FontSize="12"  />

                            <TextBlock Text="{Binding Path=Cognome}"

                           HorizontalAlignment="Right"

                           VerticalAlignment="Center"

                           FontSize="12"  />

                        </StackPanel>

                        <TextBlock Text="{Binding Path=Citta}"

                       Foreground="Blue"

                       FontSize="10"  />

                    </StackPanel>

                </DataTemplate>

            </ComboBox.ItemTemplate>

        </ComboBox>

In questo modo, avviando il nostro progetto, verranno visualizzate i tre campi nella casella combinata.

Conclusione

L’articolo ha voluto fornire al lettore una panoramica su questo controllo, le potenzialità offerte dal controllo, come si è visto nell’articolo, sono altissime, per coloro che sviluppano applicazioni web o Windows application, troveranno il controllo simile a quello delle applicazioni web o windows form.