Changing ContentTemplate basé sur la sélection ListBox

Question

J'ai un Listbox et une bordure dans un StackPanel semblable au suivant:

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

Lorsque vous sélectionnez un élément dans la liste, je voudrais changer le contenu dans le ContentPresenter en conséquence par exemple La sélection de Personnes changerait le modèle pour afficher une série de champs de saisie liés aux personnes où, en sélectionnant Animaux, afficherait une série de champs liés aux Animaux, etc. - le comportement de ceci s'apparenterait à un TabControl.

Je pense que je peux y parvenir avec un DataTrigger qui modifie le DataTemplate dans la bordure, mais je ne suis pas sûr de la façon d'y parvenir.

Des pointeurs?

Merci

Answer 1

Vous pouvez activer ou désactiver l'ContentTemplate en utilisant un DataTrigger comme suit.
Notez que je lie un ObservableCollection à un objet simple (Thing) avec une propriété nommée Name et que je lie le contenu de ContentControl à SelectedItem dans le ListBox en utilisant un 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> 

Voici la classe chose:

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