列表框分组问题 [英] ListBox Grouping issue

问题描述

我正在尝试根据以下模型对我的收藏进行分组:

I am trying to Group my collection which is based on my following model:

public class Person
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public Role PersonRole { get; set; }
}

public class Role
{
    public int Id { get; set; }
    public string RoleName { get; set; }
}

我的PersonCollection，

My PersonCollection,

public ObservableCollection<Person> PersonList;

该集合中填充了三个Person对象，其中两个具有相同的角色.

The collection is populated with three Person object, two with identical roles.

我想按照我的所有人的RoleName分组.我有以下XAML:

I want to group all my persons as per their RoleName. I have the following XAML:

<Grid.Resources>

        <CollectionViewSource x:Key="cvs" Source="{Binding PersonList}">
            <CollectionViewSource.GroupDescriptions>
                <PropertyGroupDescription PropertyName="PersonRole.RoleName"/>
            </CollectionViewSource.GroupDescriptions>
        </CollectionViewSource>

    </Grid.Resources>

<ListBox ItemsSource="{Binding Source={StaticResource cvs}}">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding FirstName}"/>
            </DataTemplate>
        </ListBox.ItemTemplate>
        <ListBox.GroupStyle>
            <GroupStyle>
                <GroupStyle.HeaderTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding PersonRole.RoleName}" FontWeight="Bold" Background="ForestGreen" Margin="0,5,0,0"/>
                    </DataTemplate>
                </GroupStyle.HeaderTemplate>
            </GroupStyle>
        </ListBox.GroupStyle>
    </ListBox>

但是，呈现的UI不在列表框中显示分组的RoleName.另外，我想水平显示分组，水平显示组，而垂直分组.提前感谢您的帮助.

However the rendered UI is not displaying the grouped RoleName in the list box. Also I would like to show the grouping horizontally where the groups appear horizontally while the grouped items appear vertically. Appreciate any help in advance.

这是我看到的输出:

Here's the output I am seeing:

推荐答案

由于您已经在CollectionViewSource中提供了GroupDescriptons，所以groupStyle仅从那里选择属性名称.

Since you have already provided GroupDescriptons at your CollectionViewSource, groupStyle will pick the property name from there only.

您需要做的是与CollectionViewGroup类的Name属性绑定，以访问应用了分组的​​属性的值.在组样式中，绑定是针对CollectionViewGroup类，而不是针对您的Model类.

All you need is to bind with Name property of CollectionViewGroup class to access the value of the property on which grouping is applied. In group style, binding is against CollectionViewGroup class and not against your Model class.

因此，这是您要执行的操作:

So, this is how you will do it:

<TextBlock Text="{Binding Name}" FontWeight="Bold"
           Background="ForestGreen" Margin="0,5,0,0"/>

关于水平对齐组，可以将组"的ItemsPanelTemplate设置为VirtualizingStackPanel，而将Orientation设置为Horizontal，这会使您的组水平对齐.

And regarding to align groups horizontally, you can set ItemsPanelTemplate of Group to be VirtualizingStackPanel with Orientation set to Horizontal which makes your groups to be aligned horizontally.

<ListBox.GroupStyle>
   <GroupStyle>
      <GroupStyle.Panel>
         <ItemsPanelTemplate>
           <VirtualizingStackPanel Orientation="Horizontal"/>
         </ItemsPanelTemplate>
      </GroupStyle.Panel>
      <GroupStyle.HeaderTemplate>
        <DataTemplate>
           <TextBlock Text="{Binding Name}" FontWeight="Bold"
                      Background="ForestGreen" Margin="0,5,0,0"/>
         </DataTemplate>
      </GroupStyle.HeaderTemplate>
   </GroupStyle>
</ListBox.GroupStyle>

这篇关于列表框分组问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！