André Carlucci

Skeptic .net development

Como renderizar itens diferentes em ListBoxes utilizando um DataTemplateSelector

DataTemplateSelector é uma classe conhecida de quem trabalha com WPF e Xaml. Ela permite que você possa escrever alguma lógica para escolher qual data template um objeto vai usar quando fizer binding do mesmo em um ListBox. Como a lógica é aplicada para cada objeto da lista, você pode ter um list box com itens completamente diferentes uns dos outros. Vamos a um exemplo:

Primeiramente, escreva uma classe abstrata chamada DataTemplateSelector:

Esta classe já está disponível no Wp7Tools, basta instalá-lo em seu projeto via nuget:

Agora vamos estender essa classe para customizá-la. Neste caso, faremos um item do listbox ser renderizado como círculo ou como retângulo, de acordo com uma propriedade de cada item:

E aqui vai nossa Forma:

Chegou a hora de criar nosso ListBox:

[xml]
<ListBox x:Name=”MyList”>
<ListBox.ItemTemplate>
<DataTemplate>
<PhoneApp1:FormaTemplateSelector Content=”{Binding}”>
<PhoneApp1:FormaTemplateSelector.Circulo>
<DataTemplate>
<Ellipse Width=”100″ Height=”100″
Fill=”Blue” Margin=”0,0,0,24″ />
</DataTemplate>
</PhoneApp1:FormaTemplateSelector.Circulo>
<PhoneApp1:FormaTemplateSelector.Retangulo>
<DataTemplate>
<Rectangle Width=”100″ Height=”100″
Fill=”red” Margin=”0,0,0,24″ />
</DataTemplate>
</PhoneApp1:FormaTemplateSelector.Retangulo>
</PhoneApp1:FormaTemplateSelector>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
[/xml]

Pronto, agora popule o ListBox e rode o emulador:

Veja que cada item recebe automaticamente seu devido DataTemplate. Bastante flexibilidade, não?
Lembre-se que isso funciona em qualquer ambiente Xaml, sendo o Silverlight, WPF, Windows Phone ou mesmo no Windows 8.