我应该如何对MVVM WPF中的组合框项目进行分组

本文关键字：项目 组合 MVVM WPF 我应该 | 更新日期: 2023-09-27 18:30:12

在我的主视图模型中，我有人员列表

class MainViewModel
{
    publc List<People> PeopleList
    {
        get;
        set;
    }
}

每个人都有的旅行模式

Class People
{
   public List<TravelMode> TravelModes
    {
     get;
      set;  
    }
    public string Name{get;set;}
}
Class TravelMode
{
  public string VehicleName{get;set;}  
}

这是XAML代码

<ComboBox ItemsSource="{Binding Path= PeopleList, Mode=TwoWay}   DisplayMemberPath="VehicleName"  >

现在组合框显示所有车辆数据像这个

Car
Bike
Bus
Train

是否可以将组合框项目分组，如下所述。仅仅通过xaml中的数据绑定就可以去掉任何代码？

John
-------Car
-------Bike
Jerry
-------Bus
-------Train

我该怎么做？

我应该如何对MVVM WPF中的组合框项目进行分组

试试这个。但这实际上完全使用了树景。因为当你在组合框内使用组合框时，当你放下组合框时很难检测到你是在改变travelNode还是在改变人。MainViewModel.cs:

public class MainViewModel
{
    public List<People> PeopleList { get; set; }
    public MainViewModel() { GenerateList(); }
    public void GenerateList()
    {
        PeopleList = new List<People>();
        TravelNode car = new TravelNode { VehicleName = "Car" };
        TravelNode bus = new TravelNode { VehicleName = "Bus" };
        TravelNode bike = new TravelNode { VehicleName = "Bike" };
        TravelNode train = new TravelNode { VehicleName = "Train" };
        People john = new People();
        john.Name = "John";
        john.TravelNodes = new List<TravelNode>();
        john.TravelNodes.Add(car); john.TravelNodes.Add(bike);
        People jerry=new People();
        jerry.Name="Jerry";
        jerry.TravelNodes=new List<TravelNode>();
        jerry.TravelNodes.Add(bus); jerry.TravelNodes.Add(train);
        PeopleList.Add(john); PeopleList.Add(jerry);
    }
}
public class People
{
    public List<TravelNode> TravelNodes { get; set; }
    public string Name { get; set; }
}
public class TravelNode
{
    public string VehicleName { get; set; }
}

主窗口.xaml.cs

public partial class MainWindow : Window
{
    MainViewModel viewmodel = new MainViewModel();
    public MainWindow()
    {
        InitializeComponent();
        this.DataContext = viewmodel;
    }
}

主窗口.xaml

<Window x:Class="treeViewTest.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
<Grid>
    <TreeView ItemsSource="{Binding PeopleList}">
        <TreeView.ItemTemplate>
            <DataTemplate>
                <TreeViewItem ItemsSource="{Binding TravelNodes}" Header="{Binding Name}">
                    <TreeViewItem.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Vertical">
                                <TextBlock Text="{Binding VehicleName}"></TextBlock>
                            </StackPanel>
                        </DataTemplate>
                    </TreeViewItem.ItemTemplate>
                </TreeViewItem>
            </DataTemplate>
        </TreeView.ItemTemplate>
    </TreeView>
</Grid>

如果选择并不重要，但您只想在组合框中的组合框中显示人员和travelNodes，那么您将更改MainWindow.xaml如下

<Window x:Class="treeViewTest.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
<StackPanel>
    <ComboBox ItemsSource="{Binding PeopleList}" SelectedIndex="0">
        <ComboBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Vertical">
                    <TextBlock Text="{Binding Name}">    
                    </TextBlock>
                    <ComboBox ItemsSource="{Binding TravelNodes}" >
                        <ComboBox.ItemTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding VehicleName}"/>
                            </DataTemplate>
                        </ComboBox.ItemTemplate>
                    </ComboBox>
                </StackPanel>
            </DataTemplate>
        </ComboBox.ItemTemplate>
    </ComboBox>
</StackPanel>

相关文章：