Изменение ContentTemplate на основе выбора ListBox

Question

У меня есть Listbox и границы в StackPanel, подобный следующему:

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

При выборе элемента в ListBox Я хотел бы изменить содержание в ContentPresenter соответствующим образом, например, выбрав «Люди», измените шаблон, чтобы отобразить серию полей ввода, связанных с людьми, которые, выбрав «Животные», будут отображать серию полей, связанных с животными и т. д. - поведение этого будет похоже на TabControl.

Я думаю, что могу достичь этого с помощью DataTrigger, который изменяет DataTemplate в Границе, но я не уверен, как этого добиться.

Любые указатели?

Благодаря

Answer 1

Вы можете переключать ContentTemplate используя DataTrigger следующим образом.
Обратите внимание, что я привязываю ObservableCollection к простому объекту (Thing) с одним свойством Name, и привязываю содержимое ContentControl к SelectedItem в ListBox с помощью ViewModel.

<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") 
     }); 
    } 
}