Completely remove Grid lines in WPF

Question

I have a WPF Grid with Rectangles in each column. All columns has equal width (1*) and all Rectangles has black background. In designer mode, there are thin lines between the rectangles (the Grid column lines) what is fine, but my problem is, these lines are still visible during run-time:

Example

My code is:

<Grid ShowGridLines="False">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*"/>
        <ColumnDefinition Width="1*"/>
        <ColumnDefinition Width="1*"/>
        <ColumnDefinition Width="1*"/>
        <ColumnDefinition Width="1*"/>
        <ColumnDefinition Width="1*"/>
    </Grid.ColumnDefinitions>
    <Rectangle Fill="Black" />
    <Rectangle Grid.Column="1" Fill="Black" />
    <Rectangle Grid.Column="2" Fill="Black" />
    <Rectangle Grid.Column="3" Fill="Black" />
    <Rectangle Grid.Column="4" Fill="Black" />
    <Rectangle Grid.Column="5" Fill="Black" />
</Grid>

Any help would be appreciated!

this might help - but it's from 2013 so fairly old: https://social.msdn.microsoft.com/Forums/vstudio/en-US/7e2997c8-41e8-47c0-9261-9b73c1fb08a4/how-to-hide-the-grid-lines-in-wpf?forum=wpf — jazb, Oct 16 '18 at 07:51

Peregrine · Accepted Answer · 2018-10-16T08:29:42.140

This issue is because you have a grid with 6 columns, but the width of your grid isn't an exact multiple of 6 pixels. This results in width of each rectangle being a fractional value. For the pixels at the edge of each rectangle, the WPF rendering engine will interpolate between the black rectangle and the window background, giving the grey stripes.

<Window x:Class="WpfApp2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWi ndow"
        SizeToContent="WidthAndHeight"
        UseLayoutRounding="False">
    <Grid ShowGridLines="False"
          Width="701"
          Height="300">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Rectangle Grid.Column="0"
                   Fill="Black" />
        <Rectangle Grid.Column="1"
                   Fill="Black" />
        <Rectangle Grid.Column="2"
                   Fill="Black" />
        <Rectangle Grid.Column="3"
                   Fill="Black" />
        <Rectangle Grid.Column="4"
                   Fill="Black" />
        <Rectangle Grid.Column="5"
                   Fill="Black" />
    </Grid>
</Window>

You can see this using a tool such as WPF Snoop

The fix is either

Set the grid width to an exact multiple of 6
Set UseLayoutRounding to True

The latter option will result in some of the rectangles having different widths (by one pixel), but all will be a whole number of pixels.

Thank you very much for your help. I used another fix btw: RenderOptions.SetEdgeMode(rectangle, EdgeMode.Aliased); — s3rius, Oct 16 '18 at 09:23

score 0 · Answer 2 · answered Apr 14 '20 at 19:09

it is easier if you set a ResourceDictionary with these values

<Style
     x:Key="callthiskey"
    TargetType="{x:Type DataGrid}">

    <Setter Property="IsReadOnly" Value="True"/>
    <Setter Property="AutoGenerateColumns" Value="False"/>
    <Setter Property="GridLinesVisibility" Value="None"/>

</Style>

After you set the Resource dictionary you can call it from your User Control like this

<DataGrid Style="{StaticResource callthiskey}">

this will completely remove your lines

the other way is to just set the settings of the grid like this

GridLinesVisibility="none"

Completely remove Grid lines in WPF

2 Answers2