WPF ListView GroupStyle GridViewHeaderRowPresenter doesn't hide original headers

Question

I have a listview that uses GroupStyles where the ColumnHeaders are shown in each group. This works fine.

I would however like to hide the original ListView ColumnHeader (seen at the top of image) and just show Headers within the groups.

How can I separate them so it only show in the groups?

The GroupStyle:

<Style x:Key="GroupingSerialStyle" TargetType="{x:Type GroupItem}" BasedOn="{StaticResource GroupingBase}">
    <Setter Property = "Template">
        <Setter.Value>
            <ControlTemplate>
                <Expander Background="{TemplateBinding Background}"  BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" IsExpanded="{Binding IsExpandedAll, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}, Mode=OneTime}" Margin="2">
                    <Expander.Header>
                        <StackPanel Orientation = "Horizontal">
                            <TextBlock Text=" # "/>
                            <TextBlock Text = "{Binding Name}" />
                        </StackPanel>
                    </Expander.Header>
                    <StackPanel Orientation="Vertical">
                        <GridViewHeaderRowPresenter Visibility = "Visible" Margin="15,0,0,0"
                DataContext="{Binding View, RelativeSource={RelativeSource FindAncestor,ListView,1}}"
                Columns="{Binding Columns}"       
                ColumnHeaderContainerStyle="{StaticResource GridViewColumnHeaderStyleABCD}"
                ColumnHeaderTemplate="{Binding ColumnHeaderTemplate}"
                ColumnHeaderTemplateSelector="{Binding ColumnHeaderTemplateSelector}"
                AllowsColumnReorder="{Binding AllowsColumnReorder}"
                ColumnHeaderContextMenu="{Binding ColumnHeaderContextMenu}"
                ColumnHeaderToolTip="{Binding ColumnHeaderToolTip}"
                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                        <ItemsPresenter Margin = "15,0,0,0" />
                    </StackPanel>
                </Expander>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Edit: Further the column headers shall presented with custom colors for each column.

WPFGermany WPFGermany · Accepted Answer · 2016-10-13T06:43:39

It can be solved through the ColumnHeaderContainerStyle. If you set an empty Template at GridView.ColumnHeaderContainerStyle and use your styled GridViewColumnHeaderStyleABCD for your GroupItem it should work.

I tried the following, that only displays column headers at the group items with customized Background.

<ListView BindingGroup="{Binding Name}" ItemsSource="{Binding Source={StaticResource TestItems}}">
    <!-- ### custom coloring column headers ### -->
    <ListView.Resources>
        <Style TargetType="GridViewColumnHeader">
            <Setter Property="Background" Value="{Binding Path=Column.(YourNamespace:BgHelper.CustomBackground), RelativeSource={RelativeSource Self}}" />
        </Style>
    </ListView.Resources>
    <ListView.View>
        <GridView>
            <GridView.ColumnHeaderContainerStyle>
                <Style TargetType="GridViewColumnHeader">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type GridViewColumnHeader}">
                                <!-- Empty: ListViews header shows nothing -->
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </GridView.ColumnHeaderContainerStyle>
            <!-- ### custom coloring column headers ### -->
            <GridViewColumn DisplayMemberBinding="{Binding Parameter0}" Header="Par0" YourNamespace:BgHelper.CustomBackground="Pink" />
            <GridViewColumn DisplayMemberBinding="{Binding Parameter1}" Header="Par1" YourNamespace:BgHelper.CustomBackground="Green" />
        </GridView>
    </ListView.View>
    <ListView.GroupStyle>
        <GroupStyle>
            <GroupStyle.HeaderTemplate>
                <DataTemplate>
                    <Expander Margin="2">
                        <Expander.Header>
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text=" # " />
                                <TextBlock Text="{Binding Name}" />
                            </StackPanel>
                        </Expander.Header>
                        <StackPanel Orientation="Vertical">
                            <GridViewHeaderRowPresenter Margin="15,0,0,0"
                                                    Columns="{Binding Columns}"
                                                    DataContext="{Binding View, RelativeSource={RelativeSource FindAncestor, ListView, 1}}"
                                                    SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                                    Visibility="Visible" />
                            <ItemsPresenter Margin="15,0,0,0" />
                        </StackPanel>
                    </Expander>
                </DataTemplate>
            </GroupStyle.HeaderTemplate>
        </GroupStyle>
    </ListView.GroupStyle>
</ListView>

To customize your column header colors you could use an AttachedProperty as follows:

namespace YourNamespace
{
    public class BgHelper
    {
        #region Fields

        public static DependencyProperty CustomBackgroundProperty =
            DependencyProperty.RegisterAttached("CustomBackground",
                                                typeof (SolidColorBrush),
                                                typeof (BgHelper),
                                                new FrameworkPropertyMetadata(new SolidColorBrush(Colors.Transparent)));

        #endregion

        #region Public Methods

        public static SolidColorBrush GetCustomBackground(DependencyObject element)
        {
            return (SolidColorBrush) element.GetValue(CustomBackgroundProperty);
        }

        public static void SetCustomBackground(DependencyObject element, SolidColorBrush value)
        {
            element.SetValue(CustomBackgroundProperty, value);
        }

        #endregion
    }
}

Then I extended my example above with setting the CustomBackground and using it at GridViewColumnHeader style. I marked the new/edited lines with comments.

WPF ListView GroupStyle GridViewHeaderRowPresenter doesn't hide original headers

2 Answers