Select 一个组合框值基于另一个组合框值

Question

我是 WPF 应用程序开发的新手。我想在街区的基础上获得楼层。我有一个方块组合框和另一个地板组合框。当我 select 一个组合框中的任何块时，另一个组合框应显示 select 块的楼层。这是组合框布局：

<ComboBox Grid.Row="0" Grid.Column="0" Width="100"
          Margin="0,0,0,10" Height="35"
          Loaded="FrameworkElement_OnLoaded"
          SelectedValuePath ="Id"
          SelectedValue ="{Binding SelectedBlockId, Mode=TwoWay}"
          DisplayMemberPath="Name"
          SelectionChanged="Selector_OnSelectionChanged" ItemsSource="{Binding Blocks}"  />

<ComboBox Grid.Row="0" Grid.Column="3" Width="100"
          Margin="0,0,0,10" Height="35"
          Loaded="FrameworkElement_OnLoaded"
          SelectedValuePath ="Id"
          SelectedValue ="{Binding SelectedFloorId, Mode=TwoWay}"
          DisplayMemberPath="Name"
          SelectionChanged="Selector_OnSelectionChanged" ItemsSource="{Binding Floors}"  />

Answer 1

这里有一个稍微不同的例子。

Xaml...

<!-- language: xaml -->
<Label Name="FavoriteFoodLbl" Grid.Column="0" Grid.Row="13">Favorite Food</Label>
<ComboBox Name="FavoriteFoodCombo" Grid.Column="1" Grid.Row="13" ItemsSource="{Binding Foods}" SelectedItem="{Binding FavoriteFood, UpdateSourceTrigger=PropertyChanged}" />

<Label Name="FavoriteFlavourLbl" Grid.Column="2" Grid.Row="13">Favorite Flavour</Label>
<ComboBox Name="FavoriteFlavourCombo" Grid.Column="3" Grid.Row="13" ItemsSource="{Binding Flavours}"  />

查看model/code-behind代码...

    public event PropertyChangedEventHandler PropertyChanged;

    public ObservableCollection<string> Foods { get; set; } = new ObservableCollection<string>() { "Pizza", "Ice Cream", "Soup" };

    private string _favoriteFood;
    public string FavoriteFood
    {
        get { return _favoriteFood; }
        set
        {
            _favoriteFood = value;
            switch (_favoriteFood)
            {
                case "Pizza":
                    _flavours = new ObservableCollection<string>(PizzaToppings);
                    break;
                case "Ice Cream":
                    _flavours = new ObservableCollection<string>(IceCreamFlavours);
                    break;
                case "Soup":
                    _flavours = new ObservableCollection<string>(SoupFlavours);
                    break;
                default:
                    _flavours = new ObservableCollection<string>();
                    break;
            }
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("FavoriteFood"));
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Flavours"));
        }
    }

    public List<string> PizzaToppings { get; set; } = new List<string>() { "Margarita", "Pepperoni", "Meat Feast" };
    public List<string> IceCreamFlavours { get; set; } = new List<string>() { "Vanilla", "Strawberry", "Chocolate" };
    public List<string> SoupFlavours { get; set; } = new List<string>() { "Tomato", "Leek and Potato", "Chicken" };

    private ObservableCollection<string> _flavours = null;
    public ObservableCollection<string> Flavours
    {
        get
        {
            return _flavours;
        }
        set
        {
            _flavours = value;
            RaisePropertyChanged();
        }
    }
    public string FavoriteFlavour { get; set; }

将 case 语句更改为适当的内容。这有帮助吗？

Answer 2

您需要做的是在 Block 和 Floor 模型之间建立主从关系，并将它们正确绑定到您的视图（组合框）。

所以假设您的 Floor 和 Block 有两个属性 ID 和 Description，您的模型应该如下所示：

public class Floor
{
    public int Id { get; set; }
    public string Description { get; set; }
}

public class Block
{
    public int Id { get; set; }
    public int Description { get; set; }
    // notice Floors collection inside each block
    public IList<Floor> Floors { get; set; }

    public Block()
    {
        Floors = new List<Floor>();
    }
}

您的 ViewModel 将包含两个 ObservableCollection 和一个属性来存储当前选定的块。注意 SelectedBlock 属性 setter：当属性更新时，Floors 集合将使用新值重新创建。

public const string BlocksPropertyName = "Blocks";
private ObservableCollection<Block> _blocks = null;
public ObservableCollection<Block> Blocks
{
    get
    {
        return _blocks;
    }
    set
    { 
        _blocks = value;
        RaisePropertyChanged(BlocksPropertyName);
    }
}

public const string SelectedBlockPropertyName = "SelectedBlock";
private Block _selectedBlock = null;
public Block SelectedBlock
{
    get
    {
        return _selectedBlock;
    }
    set
    {
        _selectedBlock = value;
        RaisePropertyChanged(SelectedBlockPropertyName);

        if (_selectedBlock != null)
        {
            Floors = new ObservableCollection<Floor>(_selectedBlock.Floors);
        }
    }
}

public const string FloorsPropertyName = "Floors";
private ObservableCollection<Floor> _floors = null;
public ObservableCollection<Floor> Floors
{
    get
    {
        return _floors;
    }
    set
    {
        _floors = value;
        RaisePropertyChanged(FloorsPropertyName);
    }
}

在您的 XAML 中，您只需将两个组合框绑定到相应的集合：

<ComboBox ItemsSource="{Binding Blocks}"
          SelectedItem="{Binding SelectedBlock}" />

<ComboBox ItemsSource="{Binding Floors}" />

Answer 3

有关如何使用 MVVM 模式在 WPF 中实现级联组合框的示例，请参阅以下博客post：https://blog.magnusmontin.net/2013/06/17/cascading-comboboxes-in-wpf-using-mvvm/

您基本上可以将示例代码中的国家和城市类型替换为您的街区和楼层类型。

Select 一个组合框值基于另一个组合框值

Select one combo box value on the basis of another combo box value

wpf

prism

mvvm