GridViewColumnHeader not spanning whole ListView width

Question

I am having trouble with the layout of a ListView / GridView combination in my WPF project. The columnheaders are just not spanning the whole width of the parent ListView. I tried to find documentation everywhere but didn't find any clues about the underlying containers / control templates.

I guess the standard control template of the header contains something that I am not taking care of, I just cannot wrap my head around it.

The (simplified) ListView has a few pixel space to the left and to the right of the row containing the headers, where the background of the parent ListView is visible:

https://i.stack.imgur.com/Y1WNR.jpg

Question: How can I make the columnheaders span the whole width of the ListView and make the few pixels space disappear?

My XAML:

<ListView Padding="0"
          BorderThickness="0"
          Background="Red">

    <ListView.ItemContainerStyle>
        <Style TargetType="{x:Type ListViewItem}">
            <Setter Property="Background" Value="LightGray" />
            <Setter Property="Margin" Value="0" />
            <Setter Property="Padding" Value="0" />
            <Setter Property="BorderThickness" Value="0" />
        </Style>
    </ListView.ItemContainerStyle>

    <ListView.View>
        <GridView>
            <GridView.ColumnHeaderContainerStyle>
                <Style TargetType="{x:Type GridViewColumnHeader}">
                    <Setter Property="Foreground" Value="White" />
                    <Setter Property="Background" Value="Black" />
                    <Setter Property="BorderThickness" Value="0" />
                    <Setter Property="Margin" Value="0" />
                    <Setter Property="Padding" Value="0" />
                    <Setter Property="HorizontalAlignment" Value="Stretch" />
                </Style>
            </GridView.ColumnHeaderContainerStyle>

            <GridViewColumn Header="1" Width="40"/>
            <GridViewColumn Header="2" Width="40"/>
            <GridViewColumn Header="3" Width="40"/>

        </GridView>
    </ListView.View>

    <ListViewItem> 1 </ListViewItem>
    <ListViewItem> 2 </ListViewItem>
</ListView>

The only way so far to achieve the look I am going for is to change the background of the listview to the same color as the headers - there has to be a better way, though. Any help is appreciated!

Answer 1

This column does not support "*" as width argument so you cannot easily say - fill the rest...

What you should do is hook up on SizeChanged event of the ListView and there do the calculations. So for instance, in your case, if we wanted first two columns to take 40 each and the third column to take the rest you would do it like so:

private void ListView_SizeChanged(object sender, SizeChangedEventArgs e)
{
    ListView listView = sender as ListView;
    GridView gView = listView.View as GridView;

    var workingWidth = listView.ActualWidth - SystemParameters.VerticalScrollBarWidth;

    gView.Columns[0].Width = 40;
    gView.Columns[1].Width = 40;
    gView.Columns[2].Width = workingWidth - 80;
}

EDIT

For the gaps(to the left and to the right) in the header row you want to alter the ColumnHeaderContainerStyle like so:

<GridView.ColumnHeaderContainerStyle>
    <Style TargetType="{x:Type GridViewColumnHeader}">
        <Setter Property="Foreground" Value="White" />
        <Setter Property="Background" Value="Black" />
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="Margin" Value="-2,0,-2,0" />
        <Setter Property="Padding" Value="0" />
        <Setter Property="HorizontalAlignment" Value="Stretch" />
    </Style>
</GridView.ColumnHeaderContainerStyle>

So make sure you just reduce the margin by -2 on each side.