ListBox與Windows Phone 8中的多個ItemTemplates

Question

我有一個列表框，它是對話泡泡列表（如消息應用程序），每個對話框都可以來自用戶或來自系統。因此在資源中定義了用於列表框的兩個數據模板。我如何有選擇地將這些應用到ListBox？我試過DataTemplateSelector（這是WP7的解決方案，但我無法在WP8中找到該類！），使用（WP8不支持DataType），最後是ItemTemplate屬性上的IValueConvertor - 所有內容徒勞無功！

這樣做的方法是什麼？我想一定有辦法，因爲這是一個相當簡單的要求？！

感謝

Answer 1

DataTemplateSelector是基於XAML的數據綁定的項目類型來更改ItemTemplates的推薦方式。 DataTemplateSelector不是內置於WP7中，而是不內置於WP8。你必須在網上找到你喜歡DataTemplateSelector的版本並使用它。或者只是推出自己的代碼，因爲它大約有5-10行代碼。

在WindowsPhoneGeek上有一篇關於custom DataTemplateSelectors in WP7和wp7nl項目的文章，其文章基於DataTemplateSelector base class。

<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's DataTemplateSelector不需要C＃代碼，因爲它uses the DataTemplateSelector.Resources collection to handle type mapping。這兩個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等。