如何根据ComboBox的选择显示不同的用户控件？

Question

我有一个过滤器列表。用户可以通过单击“添加”或“删除”来决定使用多少过滤器 add/remove 1.（我已经实现了）。

每个过滤器最初都是一个组合框，其中包含过滤器选项，比如姓名和性别。选择名称时，它会在Combobox附近显示一个文本框，选择性别时，它显示2个无线电按钮male/female。

<ComboBox Name="FilterComboBox" ItemsSource="{Binding FilterOptions}"...>
<Button Command="{Binding RemoveFilterCommand}....">

也就是说Name对应一个textbox，Sex对应一个radiobutton组等等。

而不是在后端代码中设置文本框、单选按钮组等的可见性。有没有办法使用.xaml中的数据template/item选择器来实现它？谢谢

Answer 1

您可以使用 DataTriggers 来完成。

我创建了一个简单的 class Filter，它包含可能的过滤器类型（姓名、性别）的集合，并且有一个属性 SelectedType 指示选择了什么类型。

Filter.cs

public class Filter : INotifyPropertyChanged
{
    public List<string> Types { get; set; }

    private string _selectedType;
    public string SelectedType
    {
        get => _selectedType;
        set
        {
            _selectedType = value;
            OnPropertyChanged();
        }
    }

    public Filter()
    {
        Types = new List<string>
        {
            "Name",
            "Sex"
        };
    }

    public event PropertyChangedEventHandler PropertyChanged;
    private void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

其他一切都发生在 MainWindow.xaml

我在 Grid 的 Resources 中使用一个数组来保存过滤器的集合，它会在您的视图模型中的某处，但这只是一个示例。
我正在使用 ItemsControl 来保存过滤器，并且在 ItemsControl 的 ItemTemplate 属性.[=33 中定义了单个过滤器的模板=]

MainWindow.xaml

<Window
    x:Class="TempWpfApp02.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:TempWpfApp02"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="MainWindow"
    Width="800"
    Height="450"
    mc:Ignorable="d">
    <Grid>
        <Grid.Resources>
            <x:Array x:Key="filters" Type="{x:Type local:Filter}">
                <local:Filter />
            </x:Array>
        </Grid.Resources>

        <ItemsControl ItemsSource="{StaticResource filters}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <ComboBox ItemsSource="{Binding Types}" SelectedItem="{Binding SelectedType}" />

                        <TextBox>
                            <TextBox.Style>
                                <Style TargetType="TextBox">
                                    <Setter Property="Visibility" Value="Collapsed" />
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding SelectedType}" Value="Name">
                                            <Setter Property="Visibility" Value="Visible" />
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </TextBox.Style>
                        </TextBox>

                        <RadioButton Content="Female" GroupName="SexGroup">
                            <RadioButton.Style>
                                <Style TargetType="RadioButton">
                                    <Setter Property="Visibility" Value="Collapsed" />
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding SelectedType}" Value="Sex">
                                            <Setter Property="Visibility" Value="Visible" />
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </RadioButton.Style>
                        </RadioButton>

                        <RadioButton Content="Male" GroupName="SexGroup">
                            <RadioButton.Style>
                                <Style TargetType="RadioButton">
                                    <Setter Property="Visibility" Value="Collapsed" />
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding SelectedType}" Value="Sex">
                                            <Setter Property="Visibility" Value="Visible" />
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </RadioButton.Style>
                        </RadioButton>

                    </StackPanel>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>
</Window>

如何根据ComboBox的选择显示不同的用户控件？

how to display different user controls based on the selection of ComboBox?

wpf

datatemplate

Filter.cs

MainWindow.xaml