XAML White stripes in GridView

Question

So I actually have 2 problems here. The first one are the white stripes that are in my GridView which I have no Idea on how to get rid of. Then the second problem is that the ColumnHeader doesn't really stretch in width.

Here is an Image:

And here is my code:

<UserControl x:Class="PROShine.TeamView"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:local="clr-namespace:PROShine"
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300">
<UserControl.Resources>
    <Style x:Name="ListviewStyle" TargetType="ListView">
        <Setter Property="Background" Value="#FF0d0d0d" />
        <Setter Property="Foreground" Value="White" />
        <Setter Property="BorderBrush" Value="#FF1e1e1e" />
        <Setter Property="BorderThickness" Value="1,1,1,1" />
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    </Style>
    <Style x:Name="GridViewStyle" TargetType="GridViewColumnHeader">
        <Setter Property="Background" Value="#FF111111" />
        <Setter Property="Foreground" Value="White" />
        <Setter Property="BorderBrush" Value="#FF1e1e1e" />
        <Setter Property="BorderThickness" Value="1,0,1,0" />
        <Setter Property="Margin" Value="0,0,0,0" />
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="true">
                <Setter Property="BorderBrush" Value="#FF171717"/>
                <Setter Property="Visibility" Value="Visible"/>
                <Setter Property="Background"  Value="Transparent"/>
            </Trigger>
            <Trigger Property="IsPressed" Value="true">
                <Setter Property="BorderBrush" Value="#FF171717"/>
                <Setter Property="BorderBrush" Value="#FF171717"/>
                <Setter Property="Visibility" Value="Visible"/>
                <Setter Property="Visibility" Value="Hidden"/>
                <Setter Property="Margin" Value="1,1,0,0"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</UserControl.Resources>

<Grid>
    <ListView Name="PokemonsListView">
        <ListView.View>
            <GridView>
                <GridViewColumn Header="Id" DisplayMemberBinding="{Binding Id}"/>
                <GridViewColumn Header="Name" DisplayMemberBinding="{Binding Name}"/>
                <GridViewColumn Header="Level" DisplayMemberBinding="{Binding Experience.CurrentLevel}"/>
                <GridViewColumn Header="Status" DisplayMemberBinding="{Binding Status}"/>
                <GridViewColumn Header="HP" DisplayMemberBinding="{Binding Health}"/>
                <GridViewColumn Header="Remaining Exp" DisplayMemberBinding="{Binding Experience.RemainingExperience}"/>
                <GridViewColumn Header="Item" DisplayMemberBinding="{Binding ItemHeld}"/>
            </GridView>
        </ListView.View>
    </ListView>
</Grid>

I already tried to set Margin to 0, The Width to auto on most components but that didn't help. Also, Changing the ForeColor for every component didn't showed me where the stripes where coming from...

I have seen some other StackOverflow questions about this but they had or huge codes that I didn't understand or knew how they worked.

Can anyone explain to me where these stripes are coming from. And maybe provide a code so I can see how you would do it.

The white stripes are column header separators. They are coming from the `ControlTemplate` for `GridViewColumnHeader`. If you would like to remove them, you need to override the `ControlTemplate`. Refer to this [answer](http://stackoverflow.com/a/14334080/587690). Regarding auto-sizing of columns, refer to this [answer](http://stackoverflow.com/a/560665/587690) — Suresh, Aug 10 '16 at 05:50
Ah so thats what the templates are for. Thanks your answer made alot of sense to me :) — Bitsec, Aug 10 '16 at 13:54

score 0 · Accepted Answer · answered Aug 10 '16 at 20:56

This was I ended up using. I got it from MSDN and edited a bit myself

    <Style x:Key="GridViewColumnHeaderGripper" TargetType="Thumb">
        <Setter Property="Width" Value="18"/>
        <Setter Property="Background" Value="{StaticResource SeperatorBrush}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Thumb}">
                    <Border Padding="{TemplateBinding Padding}" Background="Transparent">
                        <Rectangle HorizontalAlignment="Center" Width="1" Fill="{TemplateBinding Background}"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

The Rectangle part is what is making the stripes. Now If you want to keep functionality of those Don't go to the comment of sthotakura but set the Fill to Transparent. This way the stripes will disappear but you will still keep the grippers/seperators.

XAML White stripes in GridView

1 Answers1