WPF Grid white stripes

Question

I have a Grid with a lot of buttons inside. These buttons are supposed to be seamlessly connecting. In most of the cases, this is actually working, but sometimes there's a white stripe between the columns / rows of the grid:

I'm adding the buttons to the grid via the code behind like this (I'm sorry for non-minimal code, but I really don't know what might be relevant here):

public partial class MainWindow
{
    private int _xCount;
    private int _yCount;

    public MainWindow ()
    {
        InitializeComponent ();

        SetSize (40, 40);
    }

    public void SetSize (int x, int y)
    {
        _xCount = x;
        _yCount = y;

        Grid.ColumnDefinitions.Clear ();
        Grid.RowDefinitions.Clear ();

        for (var i = 0; i < x; i++)
            Grid.ColumnDefinitions.Add (new ColumnDefinition {Width = new GridLength (100, GridUnitType.Star)});
        for (var i = 0; i < y; i++)
            Grid.RowDefinitions.Add (new RowDefinition {Height = new GridLength (100, GridUnitType.Star)});

        for (var xI = 0; xI < x; xI++)
            for (var yI = 0; yI < y; yI++)
            {
                var button = new Button
                {
                    BorderThickness = new Thickness (1),
                    BorderBrush     = Brushes.Gray,
                    Foreground      = Brushes.DarkGray,
                    Content         = "",
                    Background      = Brushes.DarkGray
                };

                Grid.Children.Add (button);
                Grid.SetColumn (button, xI);
                Grid.SetRow (button, yI);
            }

        SetButtonSizes ();
    }

    private void SetButtonSizes ()
    {
        var gridWidth  = Grid.Width;
        var gridHeight = Grid.Height;

        var buttonWidth  = gridWidth / _xCount;
        var buttonHeight = gridHeight / _yCount;

        foreach (var button in Grid.Children)
        {
            ((Button) button).Width  = buttonWidth;
            ((Button) button).Height = buttonHeight;
        }
    }

    protected override void OnRenderSizeChanged (SizeChangedInfo sizeInfo)
    {
        base.OnRenderSizeChanged (sizeInfo);
        SetButtonSizes ();
    }
}

The WPF is pretty trivial and looks like that:

<Window x:Class="Minesweeper.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="MainWindow"
        Height="1000"
        Width="1000">
    <Grid Name="Grid" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</Window>

I already tried Pixel Snapping, which didn't make any difference.

Try to set [UseLayoutRounding](https://msdn.microsoft.com/en-us/library/system.windows.frameworkelement.uselayoutrounding(v=vs.110).aspx) (on the Grid). Also, do not set the Width and Height of the Buttons. Let the Grid resize them. However, your code could probably be a lot simpler with a UniformGrid instead of a Grid. — Clemens, Jun 14 '18 at 11:38
@Clemens this did the trick, thank you! If you write an answer, I can close this topic. — MetaColon, Jun 14 '18 at 11:47
You mean how the code would look like with a UniformGrid? :-) Which is what you should actually use. — Clemens, Jun 14 '18 at 11:48
@Clemens I'm actually quite happy with the `Grid` solution and the `UniformGrid` would be rather off-topic. But if you want to, go on. — MetaColon, Jun 14 '18 at 11:52

score 5 · Accepted Answer · answered Jun 14 '18 at 11:57

You should set UseLayoutRounding to true on the Grid and not programmatically resize the Buttons.

However, you could greatly simplify your code by using a UniformGrid

<Window ...>
    <UniformGrid x:Name="grid"/>
</Window>

and add Buttons like this:

public MainWindow()
{
    InitializeComponent();
    SetSize(40, 40);
}

private void SetSize(int x, int y)
{
    grid.Children.Clear();
    grid.Columns = x;

    for (int i = 0; i < x * y; i++)
    {
        grid.Children.Add(new Button
        {
            BorderThickness = new Thickness(1),
            BorderBrush = Brushes.Gray,
            Background = Brushes.DarkGray,
            Foreground = Brushes.DarkGray,
            Content = ""
        });
    }
}

Brilliant! I search for two years for this answer. Thank you. — Val, Aug 29 '19 at 07:43

WPF Grid white stripes

1 Answers1