根据列表框选择更改 ContentTemplate

问题描述

我在 StackPanel 中有一个列表框和一个边框，类似于以下内容:

I have a Listbox and a Border in a StackPanel similar to the following:

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

在列表框中选择一个项目时，我想相应地更改 ContentPresenter 中的内容，例如选择 People 将更改模板以显示一系列与人相关的输入字段，而选择 Animals 将显示一系列与 Animals 等相关的字段 - 其行为类似于 TabControl.

When selecting an item in the listbox I would like to change the content in the ContentPresenter accordingly e.g. selecting People would change the template to display a series of input fields related to people where as selecting Animals would display a series of fields related to Animals etc. - the behavior of this would be akin to a TabControl.

我想我可以使用 DataTrigger 来实现这一点，它会更改 Border 中的 DataTemplate，但我不确定如何实现这一点.

I think I can achieve this with a DataTrigger which changes the DataTemplate in the Border but I'm not sure how to achieve this.

有什么指点吗?

谢谢

推荐答案

您可以使用 DataTrigger 切换 ContentTemplate，如下所示.
请注意，我将一个 ObservableCollection 绑定到一个简单的对象 (Thing)，并具有一个名为 Name 的属性，并且我是否使用 ViewModel 将 ContentControl 的内容绑定到 ListBox 中的 SelectedItem.

You can toggle the ContentTemplate using a DataTrigger as follows.
Note, that I am binding an ObservableCollection to a simple object (Thing) with one property called Name, and am I binding the Content of the ContentControl to the SelectedItem in the ListBox using a 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 类:

Here is the Thing class:

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

这篇关于根据列表框选择更改 ContentTemplate的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！