Personalizzazione di una ComboBox con DataTemplate

Windows Presentation Foundation contiene numerosi controlli volti a caricare informazioni e ad interagire con l'utente che rispecchiano nello stile e nelle funzionalità gli elementi Win32. La libertà è comunque massima così come la personalizzazione nell'interfaccia. Tipica è l'esigenza di una ComboBox che deve essere arricchita non limitandosi al semplice testo, ma mostrando anche immagini per ogni elemento.
L'uso di una ComboBox è piuttosto semplice, così come il suo popolamento mediante una collezione di ComboBoxItem:

ComboBox SelectedIndex="0">
ComboBoxItem> Yellow /ComboBoxItem>
ComboBoxItem> Green /ComboBoxItem>
/ComboBox>

Solitamente però, si utilizzano le funzionalità di binding per caricare automaticamente i dati, anche in formato XML:

Canvas>
Canvas.Resources>
XmlDataProvider x:Key="colors" XPath="/items/item">
x:XData>
items xmlns="">
item color="Red" />
item color="Yellow" />
item color="Blue" />
item color="Green" />
/items>
/x:XData>
/XmlDataProvider>
/Canvas.Resources>
ComboBox SelectedIndex="0" ItemsSource="{Binding Source={StaticResource colors}}"
DisplayMemberPath="@color" />
/Canvas>

Con la proprietà ItemsSource indichiamo qual è la sorgente da utilizzare, mentre con DisplayMemberPath specifichiamo qual è il path (in questo caso l'attributo) da mostrare come testo per ogni item. Possiamo però personalizzare e decidere in dettaglio l'aspetto di ogni item inserendo qualsiasi Visual presente in WPF: controlli, immagini e perfino video. Per fare ciò con la proprietà ItemTemplate possiamo indicare, definendo come risorsa o inline per la solo ComboBox, un DataTemplate da utizzare per ogni item.

ComboBox SelectedIndex="0" IsEditable="true" TextSearch.TextPath="@color"
ItemsSource="{Binding Source={StaticResource colors}}">
ComboBox.ItemTemplate>
DataTemplate>
StackPanel Margin="2" Orientation="Horizontal">
Rectangle Width="25" Height="25" Fill="{Binding XPath=@color}" />
TextBlock FontSize="15" Text="{Binding XPath=@color}" />
/StackPanel>
/DataTemplate>
/ComboBox.ItemTemplate>
/ComboBox>

All'interno di un template lo scope di binding è relativo al singolo item che stiamo caricando, perciò ci è concesso fare riferimento direttamente agli attributi dell'elemento item della sorgente. Nell'esempio disegniamo un rettangolo e una scritta relativi al colore corrente. Una menzione particolare la meritano le proprietà IsEditable e TextSearch.TextPath. La prima indica che la ComboBox è editabile e l'utente può immettere del testo di ricerca. La seconda è una attached property sull'oggetto TextSearch e ci permette di indicare qual è la proprietà sulla quale fare lookup per ogni ricerca che l'utente effettua. E' importante impostare questo path perché personalizzando il layout degli item il motore non è in grado di sapere qual è il testo rappresentativo dell'elemento. Il risultato di questa personalizzazione è il seguente, dove digitando "G" viene automaticamente suggerita la voce "Green".