How to set row border and background color in WPF Grid

Question

How can we set border and background color in the WPF grid control ,
i am creating rows and column dynamically and adding then to grid,
can we set color and border from the code behind?

Solution 1

The Background color can just be set for the entire Grid by using the Background property:

<Grid Background="Red" />

Or if you want it set for individual cells, you need to add an element to the cell that has its Background property set.

As for Borders, a Grid only contains the ShowGridLines property, which can be used to show thin dotted lines that cannot be styled.

Per MSDN:

Only dotted lines are available because this property is intended as a design tool to debug layout problems and is not intended for use in production quality code. If you want lines inside a Grid, style the elements within the Grid to have borders.

So in order to add borders to your Grid, you have to add Border elements or controls that contain a Border to the Grid cells, and style those elements.

But there is an alternative. This blog post outlines how you can extend the Grid class to create a custom Grid that has properties for Grid lines. I've used it successfully in the past when I wanted to render grid lines, but didn't want to fill every cell with an object.

<my:CustomGrid ShowCustomGridLines="True"
               GridLineBrush="Blue"
               GridLineThickness="1">

Solution 2

Here is a bit of a hack that seems to work well. If you place a background element in the rows / columns along with the elements you normally would place there, it will act as a background. You'll just need to mind the ordering of the elements in the XAML (the elements appear in increasing Z-Order), or set the Panel.Zorder accordingly.

<Window x:Class="gridBackground.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
        <Border Background="Red" />
        <Border Grid.Row="2" Grid.Column="1"  Background="Red" />        
        <Border  Grid.Row="1" Background="LightBlue" />       
        <Border Grid.Row="2" Background="Orange" />
        <Border Grid.Row="0" Grid.Column="1" Background="Orange" />
        <TextBlock Grid.ColumnSpan="2" Grid.Row="1" Text="Here is some more text" HorizontalAlignment="Center"  VerticalAlignment="Center"/>
        <TextBlock Grid.ColumnSpan="2" Text="Here is some text" HorizontalAlignment="Center"  VerticalAlignment="Center"/>
        <TextBlock Grid.ColumnSpan="2" Grid.Row="2" Text="Here is even more text" HorizontalAlignment="Center"  VerticalAlignment="Center"/>
    </Grid>
</Window>

It looks like this: