Windows Phone 8中包含多個ItemTemplates的ListBox

Question

我有一個ListBox，它是一個會話氣泡列表（如消息傳遞應用程序），每個氣泡可以來自用戶或來自系統。 因此，列表框中有兩個DataTemplates，它們在資源中定義。 如何有選擇地將這些應用於ListBox？

我嘗試過DataTemplateSelector（這是WP7的解決方案，但我找不到WP8中的類！），使用（WP8不支持DataType），最后是ItemTemplate屬性的IValueConvertor - 一切都無濟於事！

這樣做的方法是什么？ 我想必須有一種方法，因為這是一個相當簡單的要求？！

謝謝

Answer 1

DataTemplateSelector是基於XAML數據綁定中的Item類型更改ItemTemplates的推薦方法。 DataTemplateSelector不是內置於WP7，也不是WP8內置的。 你必須在網上找到一個你喜歡DataTemplateSelector的版本並使用它。 或者只是滾動自己，因為它是大約5-10行代碼。

關於WP7中的自定義DataTemplateSelectors和基於該文章的DataTemplateSelector基類的 wp7nl項目，WindowsPhoneGeek上有一篇很好的文章。

<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>

如果您正在尋找更快速和更臟的解決方案， Prism的DataTemplateSelector不需要C＃編碼，因為它使用DataTemplateSelector.Resources集合來處理類型映射 。 兩個DataTemplateSelector類都可以復制出來並在您的應用中使用。

   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>

還有更多的DataTemplateSelectors ，包括： Odyssey Phone ， UIMessage等。