Introduzione al controllo AutocompleteBox di Silverlight VB.Net e C#

Riporto l'articolo scritto per il sito http://www.iprogrammatori.it/articoli/programmazione/art_introduzione-al-controllo-autocompletebo_1016.aspx

Introduzione

In questo articolo, vedremo il controllo AutocompleteBox, disponibile in Silverlight 3 o superiore.
Questo controllo è simile ad una casella di testo, al controllo Textbox, con la differenza che mentre si digitano i caratteri, vengono visualizzati a video le varie occorrenze per quel carattere che si sta digitando, il tutto come mostrato in figura 1.

Figura 1

Esempio pratico.

Dopo aver creato un progetto in Silverlight, nel linguaggio di vostro interesse, trascinate dalla barra degli strumenti il controllo AutocompleteBox, situato di norma nella sezione “Tutti i controlli di Silverlight” della barra degli strumenti.
Qui di seguito si riporta un esempio di codice XAML

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

<sdk:AutoCompleteBox Height="28" HorizontalAlignment="Left" Margin="106,124,0,0" Name="autoCompleteBoxNomi" VerticalAlignment="Top" Width="120" />

</Grid>

Nell’evento load della pagina, dobbiamo impostare la proprietà “ItemSource”, con i valori che vogliamo caricare nella lista del controllo, in questo modo, verranno visualizzati nel caso che il carattere che digitiamo corrisponde a quello della lista.
Qui di seguito si riporta un esempio di tale utilizzo.

VB.Net

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

Dim Nomi() As String = {"Emanuele", "Francesco", "Alex", "Francesca", "Maria", "Enrico", "Emma", "ennio"

}

autoCompleteBoxNomi.ItemsSource = Nomi

End Sub

C#

string[] Nomi = { "Emanuele", "Francesco", "Alex", "Francesca", "Maria", "Enrico", "Emma", "ennio"

};

autoCompleteBoxNomi.ItemsSource = Nomi;

Una delle tante proprietà interessanti di questo controllo è la proprietà “FilterMode” il quale permette di filtrare i dati in riferimenti a particolare modalità. Per esempio la modalità “StartsWithCaseSensitive” verranno visualizzati gli elementi che iniziano per quel determinato carattere facendo attenzione alle maiuscole e minuscole, quindi digitando il carattere “E” maiuscolo non verrà visualizzato a video il nome “ennio”.
Qui di seguito si riporta il codice XAML di tale utilizzo.

<sdk:AutoCompleteBox Height="28" HorizontalAlignment="Left" Margin="106,124,0,0" FilterMode="StartsWithCaseSensitive " Name="autoCompleteBoxNomi" VerticalAlignment="Top" Width="120" />

Questo filtro offre diverse possibilità come anche il filtro per gli elementi che contengono quel carattere o la possibilità di personalizzarlo.
Con la proprietà “MaxDropDownHeight” impostiamo l’altezza della lista dei valori disponibili.
Nell’esempio qui di seguito, la proprietà “MaxDropDownHeight” è impostata a 20, in questo modo verrà visualizzato solo il primo elemento, visto il limite delle dimensione.

<sdk:AutoCompleteBox Height="28" HorizontalAlignment="Left" Margin="106,124,0,0" MaxDropDownHeight="20" Name="autoCompleteBoxNomi" VerticalAlignment="Top" Width="120" />

La proprietà “MininumPopulateDelay” imposta il tempo di attesa prima che viene visualizzata a video la lista delle possibile scelte, è espressa in millisecondi, nell’esempio qui di seguito, imposta un ritardo pari a 10 secondi.

<sdk:AutoCompleteBox Height="28" HorizontalAlignment="Left" Margin="106,124,0,0" MinimumPopulateDelay="1000" Name="autoCompleteBoxNomi" VerticalAlignment="Top" Width="120" />

La prorpietà “MinimumPrefixLenght”, indica il numero dei caratteri prima di visualizzare la lista dei suggerimenti.
Nell’esempio qui di seguito, in riferimento alla lista dei nomi precedenti, se digitiamo il carattere “E” non visualizza nulla, ma se digitiamo “Em” verranno visualizzati tutti quei nomi che iniziano con Em.

<sdk:AutoCompleteBox Height="28" HorizontalAlignment="Left" Margin="106,124,0,0" MinimumPrefixLength="2" Name="autoCompleteBoxNomi" VerticalAlignment="Top" Width="120" />

Conclusioni.

L’articolo ha voluto fornire l’utilizzo base di questo nuovo controllo per Silverlight, un controllo che offre ampia possibilità di personalizzazione da parte del programmatore, un controllo molto utile ed interessante, soprattutto in quei contesti dove c’è da verificare determinati dati o rendere l’applicazione nei confronti degli utenti molto amichevole.