ListBox with multiple ItemTemplates in Windows Phone 8

Question

I have a ListBox which is a list of conversation bubbles (like the messaging app), each of which can either be from the User or from the System. There are thus two DataTemplates for the listbox which are defined in resources. How do I selectively apply these to the ListBox?

I tried DataTemplateSelector (this is the solution for WP7, but I can't find the class in WP8!), using (DataType isn't supported on WP8), and finally an IValueConvertor on the ItemTemplate property - all to no avail!

What is the way to do this? I imagine there must be a way as it's a fairly simple requirement?!

Thanks

Answer 1

DataTemplateSelector is the recommended way to change ItemTemplates based on Item types in XAML databinding. DataTemplateSelector wasn't built-in to WP7 and isn't built-in for WP8. You'll have to find a version online you like of DataTemplateSelector and use that. Or just roll your own since it's about 5-10 lines of code.

There's a good article on WindowsPhoneGeek on custom DataTemplateSelectors in WP7 and wp7nl project based its DataTemplateSelector base class on that article.

<ListBox x:Name="listBox" HorizontalContentAlignment="Stretch">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <local:FoodTemplateSelector Content="{Binding}">
                <local:FoodTemplateSelector.Healthy>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal" Background="YellowGreen" Width="400" Margin="10">
                            <Image Source="{Binding IconUri}" Stretch="None"/>
                            <TextBlock Text="{Binding Name}" FontSize="40" Foreground="Black" Width="280"/>
                            <TextBlock Text="healty" />
                        </StackPanel>
                    </DataTemplate>
                    </local:FoodTemplateSelector.Healthy>
                <local:FoodTemplateSelector.UnHealthy>
                    <DataTemplate>
                        <Border BorderBrush="Red" BorderThickness="2"  Width="400" Margin="10">
                        <StackPanel Orientation="Horizontal">
                            <Image Source="{Binding IconUri}" Stretch="None"/>
                                <TextBlock Text="{Binding Name}" FontSize="40" Width="280"/>
                            <Image Source="Images/attention.png" Stretch="None" Margin="10,0,0,0"/>
                        </StackPanel>
                        </Border>
                    </DataTemplate>
                </local:FoodTemplateSelector.UnHealthy>
                <local:FoodTemplateSelector.NotDetermined>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal" Background="Gray" Width="400" Margin="10">
                            <Image Source="{Binding IconUri}" Stretch="None"/>
                            <TextBlock Text="{Binding Name}" FontSize="40" Width="280"/>
                            <Image Source="Images/question.png" Stretch="None" Margin="10,0,0,0"/>
                        </StackPanel>
                    </DataTemplate>
                </local:FoodTemplateSelector.NotDetermined>
            </local:FoodTemplateSelector>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

If you're looking for a more quick & dirty solution Prism's DataTemplateSelector doesn't require C# coding as it uses the DataTemplateSelector.Resources collection to handle type mapping. Both DataTemplateSelector classes can just be copied out and used in your app.

   1: <UserControl.Resources>
   2:     <DataTemplate x:Key="SelectorDataTemplate">
   3:         <prism:DataTemplateSelector Content="{Binding}"
   4:                                     HorizontalContentAlignment="Stretch"
   5:                                     IsTabStop="False">
   6:             <prism:DataTemplateSelector.Resources>
   7:                 <DataTemplate x:Key="DataType1">
   8:                     <StackPanel Orientation="Horizontal">
   9:                         <TextBlock Text="{Binding ID}"/>
  10:                         <toolkit:Separator />
  11:                         <TextBlock Text="{Binding Name}" />
  12:                     </StackPanel>
  13:                 </DataTemplate>
  14:  
  15:                 <DataTemplate x:Key="DataType2">
  16:                     <StackPanel Orientation="Horizontal">
  17:                         <TextBox Text="{Binding Index}" />
  18:                         <toolkit:Separator />
  19:                         <TextBox Text="{Binding Description}" />
  20:                     </StackPanel>
  21:                 </DataTemplate>
  22:  
  23:             </prism:DataTemplateSelector.Resources>
  24:         </prism:DataTemplateSelector>
  25:     </DataTemplate>
  26: </UserControl.Resources>

There are lots more DataTemplateSelectors out there, including: Odyssey Phone, UIMessage and others.