Introduzione
Il controllo listbox, permette di visualizzare una serie di valori, e poterne selezionare uno della lista- Una lista contenente testo e/o immagini
Vedremo come applicare ad una listbox del testo, anche in fase di esecuzione, inoltre come aggiungere per ogni riga immagini e testo. L’articolo fornirà le basi per muoversi in maniera autonoma nell’uso di questo controllo il tutto con il linguaggio di programmazione Visual Basic Net e C#.
Aggiunta del controlo al file xaml con alcuni elementi
Qui di seguito si riporta del codice xaml contenente alcuni elementi.
<ListBox SelectionChanged="lstLista_SelectionChanged" x:Name="lstLista">
<ListBoxItem IsSelected="True" Content="Pasta" />
<ListBoxItem Content="Pizza" />
<ListBoxItem Content="Gelati" />
<ListBoxItem Content="Acqua" />
<ListBoxItem Content="Carne" />
</ListBox>
La proprietà x:name imposta il nome, mentre SelectionChanged, riguarda l’evento che viene scatenato nel caso si seleziona un elemento diverso da quello in cui è selezionato.
All’interno degli elementi
si trova l’elemento
il quale permette di visualizzare del testo nella lista.
La proprietà IsSelectd impostata a True, imposta l’elemento selezionato quando viene avviato il progetto, mentre la proprietà Content, visualizza il testo nel controllo listbox.
Stesura del codice
A questo punto scriviamo del codice, per l’evento SelectionChanged, in particolare, visualizzeremo a video il testo selezionato.
Qui di seguito si riporta il codice in .Net per visualizzare a video il testo selezionato.
Codice VB.Net
If lstLista Is Nothing Then Return
Dim item As New ListBoxItem()
item = lstLista.SelectedItem
MessageBox.Show(item.Content.ToString())
Codice C#
if (lstLista == null) return;
ListBoxItem Item = lstLista.SelectedItem as ListBoxItem;
MessageBox.Show(Item.Content.ToString());
Esaminiamo più in dettaglio il codice.
La prima riga, verifica che l’oggetto lista non è null per poter continuare, ciò si verifica all’avvio del nostro progetto.
La riga successiva, crea un oggetto di tipo listboxitem, il quale viene valorizzato, impostandogli il valore presente nella proprietà SelectedItem del controllo Listbox.
Con la proprietà Content, si ottiene il testo dell’elemento selezionato.
Aggiunta di nuovi elementi
Aggiungiamo nel nostro progetto un pulsante, in maniera che al click di tale controllo, possiamo aggiungere elementi al nostro controllo listbox, creato in precedenza.
Di seguito si riporta il codice XAML.
<Button
x:Name="btnAggiungi" Content="Aggiungi" Width="100" Height="30" Click="btnAggiungi_Click">
</Button
>
Passando in visualizzazione codice, scriviamo il codice .Net (Vb.Net e C#) che permette di aggiungere nuovi elementi alla nostra lista.
Qui di seguito si riporta il codice .net, per entrambi i linguaggi.
Codice VB.Net
Dim Elemento As New ListBoxItem()
Elemento.Content = "Cornetti"
lstLista.Items.Add(Elemento)
lstLista.SelectedIndex = 2
Codice C#
ListBoxItem Elemento = new ListBoxItem();
Elemento.Content = "Cornetti";
lstLista.Items.Add(Elemento);
lstLista.SelectedIndex = 2;
Esaminiamo il codice, anche se non è tanta difficile comprendere il suo funzionamento.
Nella prima riga, viene creato un oggetto di tipo listboxitem, che sarà l’elemento da aggiungere al controllo listbox.
Nella riga successiva, impostiamo la proprietà Content con del testo.
Mentre la terza riga, utilizzando il metodo add della proprietà items, che accetta un valore di tipo oggetto, aggiungiamo al controllo l’elemento creato.
La riga di codice in cui viene impostata la proprietà SelectedIndex con il valore 2, indica che il secondo dell’elemento della lista (ricordarsi di avere almeno tre elementi) viene selezionato.
Creazione di una listbox con immagini e testo.
Mentre precedentemente è stata creata un controllo contenente solo del testo, in questa parte vediamo come visualizzare tra gli elementi della lista, anche un immagine e del testo.
Di seguito si riporta il codice XAML, che contiene immagine e testo
<ListBox x:Name="lstListaImmagini" SelectionChanged="lstListaImmagini_SelectionChanged">
<StackPanel Orientation="Horizontal">
<Image Stretch="None" Source="CF.jpg"></Image>
<TextBlock Text="Elemento 1" ></TextBlock>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Image Stretch="None" Source="CF.jpg"></Image>
<TextBlock Text="Elemento 2" ></TextBlock>
</StackPanel>
</ListBox>
Come si vede dal codice dopo il tag <listbox> è stato aggiunto un oggetto di tipo StackPanel, il quale ognuno di essi rappresenta un elemento della lista.
Al suo interno, abbiamo due oggetto, uno di tipo image, mentre l’altro di tipo TextBlock.
Per il controllo image, abbiamo impostato la proprietà stretch a none, in modo che l’immagine viene visualizzata con le dimensioni reali, mentre la proprietà source, indica il nome del file (nel nostro caso si trova nella stessa cartella dove si trova il file XAP) immagine che verrà visualizzata.
Per l’oggetto TextBlock, invece impostiamo la proprietà Text, con del testo.
Per il controllo Listbox, abbiamo impostato oltre alla proprietà name, anche l’evento SelectionChanged, che si verifica nel momento in cui cambia la selezione dell’elemento della lista, in questo evento, visualizziamo a video il testo dell’elemento selezionato.
Rilevare il testo nella listbox con immagini
Il codice riportato qui di seguito riguarda la gestione dell’evento SelectionChange, questo codice (per il linguaggio Visual Basic Net e C#) rileva il testo dell’elemento selezionato.
Si riporta il codice .net per entrambi i linguaggi
Codice VB.Net
Dim stpPannello As New StackPanel
stpPannello = lstListaImmagini.SelectedItem
Dim txbTextBlock As New TextBlock
txbTextBlock = CType(stpPannello.Children(1), TextBlock)
MessageBox.Show(txbTextBlock.Text)
Codice C#
StackPanel stpPannello = lstListaImmagini.SelectedItem as StackPanel;
TextBlock txbTextBlock = stpPannello.Children[1] as TextBlock;
MessageBox.Show(txbTextBlock.Text);
Esaminiamo il frammento di codice appena visto.
Nella prima riga di codice, viene creato un oggetto StackPanel, che sarà l’elemento selezionato.
Successivamente, tramite la proprietà SelectItem, valorizziamo l’oggetto stackPanel precedentemente creato.
Successivamente, si crea un oggetto di tipo TextBlock, il quale viene valorizzato con l’oggetto restituito dalla proprietà Children dell’oggetto StackPanel.
Considerando che gli array partano da 0, il secondo elemento (appunto il textblock, inserito nel file xaml) avrà come indice 1 per la proprietà Children, nel quale si trovano tutti i controlli che ne fanno parte.
La proprietà Text, restituisce il testo dell’elemento selezionato, che appunto in indice 1 è un controllo di tipo textblock.
Riportiamo tutto il codice XAML
Questo è il codice completo relativo al file XAML
<StackPanel>
<ListBox SelectionChanged="lstLista_SelectionChanged" x:Name="lstLista">
<ListBoxItem IsSelected="True" Content="Pasta" />
<ListBoxItem Content="Pizza" />
<ListBoxItem Content="Gelati" />
<ListBoxItem Content="Acqua" />
<ListBoxItem Content="Carne" />
</ListBox>
<Button x:Name="btnAggiungi" Content="Aggiungi" Width="100" Height="30" Click="btnAggiungi_Click"></Button>
<ListBox x:Name="lstListaImmagini" SelectionChanged="lstListaImmagini_SelectionChanged">
<StackPanel Orientation="Horizontal">
<Image Stretch="None" Source="CF.jpg"></Image>
<TextBlock Text="Elemento 1" ></TextBlock>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Image Stretch="None" Source="CF.jpg"></Image>
<TextBlock Text="Elemento 2" ></TextBlock>
</StackPanel>
</ListBox>
</StackPanel>
Conclusioni
Il controllo listbox, può tornare molto utile, per presentare una lista di valori, che a volte non è detto che sia solo testo. La tecnologia Silverlight 2.0 permette una grande varietà di manipolazioni, permettendo di rendere le nostre applicazioni web, graficamente molto più accattivanti e con un nuovo modo di interagire con l’utente in maniera più professionale e reale.
Tramite la parola Download, potete scaricare il file di progetto per entrambi i linguaggi utilizzato in questo articolo.
Download