WPF Datagrid Grouping by two columns - Layout

Question

I want to group my datagrid by two columns. The name and the surname. It basicly works, but it messes up my the whole layout.

My Code:

Xaml:

<DataGrid x:Name="dgErfasst" RowEditEnding="dgMitarbeiter_RowEditEnding" AutoGenerateColumns="False" Margin="0,23,8,53" CanUserAddRows="False" CanUserDeleteRows="False" CanUserResizeRows="False" HeadersVisibility="Column" Background="White" SelectionMode="Single">

    <DataGrid.Columns>
        <DataGridTextColumn IsReadOnly="true" Width="auto" Header="ID" Binding="{Binding id}"/>
        <DataGridTextColumn Width="*" Header="Bezeichnung" Binding="{Binding bezeichnung}"/>
        <DataGridTextColumn Width="*" Header="Typ" Binding="{Binding typ}"/>
        <DataGridTextColumn Width="*" Header="Nettopreis" Binding="{Binding nettopreis}"/>
    </DataGrid.Columns>

    <DataGrid.GroupStyle>
        <GroupStyle>
            <GroupStyle.ContainerStyle>
                <Style TargetType="{x:Type GroupItem}">
                    <Setter Property="Margin" Value="0,0,0,5"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type GroupItem}">
                                <StackPanel Background="#FF706F6F" DataContext="{Binding Items}">
                                    <DockPanel HorizontalAlignment="Stretch" Margin="0 5px 0 5px">
                                        <TextBlock Foreground="White" FontWeight="Bold" Margin="0 0 20px 0" TextWrapping="NoWrap">
                                            <TextBlock.Text>
                                                <MultiBinding StringFormat="{}{0} {1}">
                                                    <Binding Path="vorname" />
                                                    <Binding Path="nachname" />
                                                </MultiBinding>
                                            </TextBlock.Text>
                                        </TextBlock>                     
                                    </DockPanel>
                                    <ItemsPresenter />
                                </StackPanel>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </GroupStyle.ContainerStyle>
        </GroupStyle>
    </DataGrid.GroupStyle>
</DataGrid>

CS:

dgErfasst.ItemsSource = mainController.loadErfasst();

CollectionView cv = (CollectionView)CollectionViewSource.GetDefaultView(dgErfasst.ItemsSource);
cv.GroupDescriptions.Clear();
PropertyGroupDescription pgd = new PropertyGroupDescription("vorname"); //name
cv.GroupDescriptions.Add(pgd);
pgd = new PropertyGroupDescription("nachname"); //surname
cv.GroupDescriptions.Add(pgd);

If I only add one groupdescription the layout is mostly perfect. But with the second groupdescription ("nachname") it gets messy:

Any ideas how i can fix the layout? Maybe a different way of grouping? Thanks

Answer 1

If by 'messy' you mean the duplicate set of results for Max Musterfrau and you really only want a group to be a unique collection of Name + Surname (so Max Musterfrau, Max Smith and Johnny Smith are all single, seperate groups)... you can add a new property to your ViewModel that returns the full, unique name as a single property. Then add a single PropertyGroupDescription just for that property.

public string FullName { get { return vorname + " " + nachname; } }

And...

CollectionView cv = (CollectionView)CollectionViewSource.GetDefaultView(dgErfasst.ItemsSource);
cv.GroupDescriptions.Clear();
PropertyGroupDescription pgd = new PropertyGroupDescription("FullName");     //name
cv.GroupDescriptions.Add(pgd);