Grouped WPF ListView Styling issue with margin

Question

There is a tiny margin on the left side in the style when using the grouping functionality of the ListView in WPF.

Sample of ListView with grouping problem (margin):

ListView, group by name

Sample of ListView without grouping (want same style of item in grouped list):

ListView, without grouping

Question:

How to remove the margin/padding? The (selected) item in the grouped list should fill the same space as in the ungrouped list.

Update:

            <ListView Margin="20,0,0,0" ItemsSource="{Binding ItemsView}" SelectedItem="{Binding SelectedItem}" IsSynchronizedWithCurrentItem="True"  SelectionMode="Single" BorderThickness="0" Background="Transparent">
                <ListView.GroupStyle>
                    <GroupStyle>
                        <GroupStyle.HeaderTemplate>
                            <DataTemplate DataType="data:Item">
                                <DockPanel HorizontalAlignment="Stretch">
                                    <TextBlock Text="{Binding Name}" FontWeight="Bold" Margin="0,5,5,5" />
                                    <Separator  />
                                </DockPanel>
                            </DataTemplate>
                        </GroupStyle.HeaderTemplate>
                    </GroupStyle>
                </ListView.GroupStyle>
                <ListView.ItemTemplate>
                    <DataTemplate DataType="data:Item">
                        <TextBlock Margin="10,10,10,10" Text="{Binding Name}" />
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>

Try defining a Style for the ItemsControl.GroupStyle Property. — Sheridan
Already did... margin (Set Margin="0") but is still there for the grouped item. What exactly needs to be set? — Beachwalker
It could be Padding... the best way to find out is to colour the Background of the various internal controls differently. That way, you'll be able to see which control is taking up the space and act accordingly. — Sheridan
@Sheridan Padding of what control? this didn't help, I have no idea which object to style. It is not a part of the DataItemTemplate and not a part GroupStyle.HeaderTemplate. — Beachwalker

Roel van Westerop Roel van Westerop · Accepted Answer · 2014-08-12T07:08:20

When grouping is used in a CollectionViewSource (I'm assuming you are using one), the, Groups will be visualized by a GroupItem. The default style of a GroupItem looks like this (obtained with StyleSnooper):

<Style TargetType="{x:Type GroupItem}" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
    <Setter Property="Control.Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type GroupItem}">
                <StackPanel>
                    <ContentPresenter Content="{TemplateBinding ContentControl.Content}" ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}" ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}" />
                    <ItemsPresenter Margin="5,0,0,0" />
                </StackPanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

As you can see, there is a Margin on the ItemsPresenter. A solution is to create your own style for the GroupItem, and remove the Margin on the ItemsPresenter, and set the GroupStyle.ContainerStyle to use this style.

Grouped WPF ListView Styling issue with margin

1 Answers