改變基於列表框選擇的ContentTemplate

Question

我有一個列表框和在一個StackPanel邊框類似於以下：

<StackPanel Orientation="Horizontal"> 
     <ListBox> 
      <ListBoxItem Content="People"/> 
      <ListBoxItem Content="Animals"/> 
      <ListBoxItem Content="Cars"/> 
     </ListBox> 
     <Border Width="200> 
      <ContentPresenter/> 
     </Border> 
</StackPanel> 

當在列表框選擇一個項目，我想更改ContentPresenter內容相應地例如選擇People將更改模板以顯示與人相關的一系列輸入字段，因爲選擇Animals會顯示一系列與動物等相關的字段 - 此行爲類似於TabControl。

我想我可以用一個DataTrigger來實現這個，它改變了邊框中的DataTemplate，但我不知道如何實現這一點。

任何指針？

謝謝

Answer 1

您可以使用DataTrigger切換ContentTemplate，如下所示。
請注意，我將ObservableCollection綁定到一個名爲Name的屬性的簡單對象（Thing），並且我使用ViewModel將ContentControl的Content內容綁定到ListBox中的SelectedItem。

<Grid> 
    <Grid.Resources> 
     <local:MultiValueConverter x:Key="con" /> 

     <DataTemplate x:Key="PeopleTemplate"> 
      <StackPanel Orientation="Horizontal"> 
       <Label Margin="0,0,5,0" Content="People Name" HorizontalAlignment="Left" Grid.Column="0" /> 
       <TextBox Grid.Column="1" Width="100" Height="25"></TextBox> 
       <Button Content="OK" Grid.Column="2" /> 
      </StackPanel> 
     </DataTemplate> 

     <DataTemplate x:Key="AnimalsTemplate"> 
      <StackPanel Orientation="Horizontal"> 
       <Label Margin="0,0,5,0" Content="Animal Name" HorizontalAlignment="Left" Grid.Column="0" /> 
       <TextBox Grid.Column="1" Width="100" Height="25"></TextBox> 
       <Button Content="OK" Grid.Column="2" /> 
      </StackPanel> 
     </DataTemplate> 

     <DataTemplate x:Key="CarsTemplate"> 
      <StackPanel Orientation="Horizontal"> 
       <Label Margin="0,0,5,0" Content="Car Name" HorizontalAlignment="Left" Grid.Column="0" /> 
       <TextBox Grid.Column="1" Width="100" Height="25"></TextBox> 
       <Button Content="OK" Grid.Column="2" /> 
      </StackPanel> 
     </DataTemplate> 
    </Grid.Resources> 

    <Grid.RowDefinitions> 
     <RowDefinition Height="*"/> 
    </Grid.RowDefinitions> 

    <StackPanel Grid.Row="0" Orientation="Horizontal"> 
     <ListBox ItemsSource="{Binding Things}" SelectedItem="{Binding SelectedThing}"> 
      <ListBox.ItemTemplate> 
       <DataTemplate> 
       <StackPanel Margin="0" Orientation="Horizontal"> 
        <TextBlock Padding="5" Text="{Binding Name}" Margin="0"></TextBlock> 
       </StackPanel> 
       </DataTemplate> 
      </ListBox.ItemTemplate> 
     </ListBox> 
     <Border Width="200"> 
      <ContentControl Content="{Binding SelectedThing}"> 
        <ContentControl.ContentTemplate> 
        <DataTemplate> 
         <ContentControl Name="cc" 
          Content="{Binding}" 
          ContentTemplate="{StaticResource PeopleTemplate}" /> 
         <DataTemplate.Triggers> 
          <DataTrigger Binding="{Binding Path=Name}" Value="People"> 
           <Setter TargetName="cc" 
            Property="ContentTemplate" 
            Value="{StaticResource PeopleTemplate}" /> 
          </DataTrigger> 
          <DataTrigger Binding="{Binding Path=Name}" Value="Animals"> 
           <Setter TargetName="cc" 
            Property="ContentTemplate" 
            Value="{StaticResource AnimalsTemplate}" /> 
          </DataTrigger> 
          <DataTrigger Binding="{Binding Path=Name}" Value="Cars"> 
           <Setter TargetName="cc" 
            Property="ContentTemplate" 
            Value="{StaticResource CarsTemplate}" /> 
          </DataTrigger> 
         </DataTemplate.Triggers> 
        </DataTemplate> 
       </ContentControl.ContentTemplate> 
      </ContentControl> 
     </Border> 
    </StackPanel>   
<Grid> 

這裏是Thing類：

public class Thing 
{ 
    public Thing(String name) 
    { 
    this.Name = name; 
    } 

    public String Name { get; set; } 

    public static ObservableCollection<Thing> GetThingList() 
    { 
    return new ObservableCollection<Thing>(new Thing[3] { 
      new Thing("People"), 
      new Thing("Animals"), 
      new Thing("Cars") 
     }); 
    } 
}