垂直分组 - WPF DataGrid或ListView

Question

How can I have the below view by using WPF or creating a custom control?

As I need to use data templates and the cell values might be object instances, I cannot use WinForms to use the old structure. (Not to mention that even if I could I wouldn't!)

Grouping level can be one (like the picture) or more. Four steps is satisfactory here.

Any other solutions would be appreciated.

Answer 1

Here you go

I defined an ItemsControl bound to Items (your data) and defined a group style to show data as your expectation.

    <ItemsControl ItemsSource="{Binding Items}">
        <ItemsControl.GroupStyle>
            <GroupStyle>
                <GroupStyle.ContainerStyle>
                    <Style TargetType="{x:Type GroupItem}">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="{x:Type GroupItem}">
                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="auto" />
                                            <ColumnDefinition />
                                        </Grid.ColumnDefinitions>
                                        <Border BorderBrush="Black" BorderThickness=".5" Padding="4">
                                            <TextBlock Text="{Binding Name}" VerticalAlignment="Center" />
                                        </Border>
                                        <ItemsPresenter Grid.Column="1" />
                                    </Grid>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </GroupStyle.ContainerStyle>
            </GroupStyle>
        </ItemsControl.GroupStyle>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Border BorderBrush="Black" BorderThickness=".5" Padding="4">
                    <TextBlock Text="{Binding Data}" />
                </Border>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

here is the code to prepare the groups

        Items = new ObservableCollection<Item>();
        Items.Add(new Item() { Key = "abcd", Data = 1 });
        Items.Add(new Item() { Key = "abcd", Data = 2 });
        Items.Add(new Item() { Key = "qwer", Data = 1 });
        Items.Add(new Item() { Key = "qwer", Data = 2 });

        CollectionView view = (CollectionView)CollectionViewSource.GetDefaultView(Items);
        PropertyGroupDescription groupDescription = new PropertyGroupDescription("Key");
        view.GroupDescriptions.Add(groupDescription);

after this leave everything to WPF and enjoy the power of styling and binding

Multilevel Grouping

to achieve miltilevel grouping you simply need to add the PropertyGroupDescription to view.GroupDescriptions

eg

groupDescription = new PropertyGroupDescription("Key2");
view.GroupDescriptions.Add(groupDescription);

there is no limit of sub group you can create, all you need is a key to group.