Assigning border to every Grid row

Question

Currently I am setting the background on each Grid row individually:

<Grid>
    <Grid.RowDefinitions><RowDefinition /><RowDefinition /></Grid.RowDefinitions>
    <Grid.ColumnDefinitions><ColumnDefinition /><ColumnDefinition /><ColumnDefinition /><ColumnDefinition /><ColumnDefinition /><ColumnDefinition /></Grid.ColumnDefinitions>

    <Border Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="6" Height="24" BorderBrush="#FF252A30" CornerRadius="10" BorderThickness="1">
        <Border.Background>
            <LinearGradientBrush EndPoint="1.036,0.367" StartPoint="-0.194,0.362">
                <GradientStop Color="#AAE098" Offset="0.1"/>
                <GradientStop Color="#D5E9D4" Offset="0.9"/>
            </LinearGradientBrush>
        </Border.Background>
    </Border>

    <Border Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="6" Height="24" BorderBrush="#FF252A30" CornerRadius="10" BorderThickness="1">
        <Border.Background>
            <LinearGradientBrush EndPoint="1.036,0.367" StartPoint="-0.194,0.362">
                <GradientStop Color="#AAE098" Offset="0.1"/>
                <GradientStop Color="#D5E9D4" Offset="0.9"/>
            </LinearGradientBrush>
        </Border.Background>
    </Border>
</Grid>

Surely there must be some way to set this Border once for all rows. How is that done?

Thanks!

Answer 1

Or you could use this grid I just made. It will automatically add a border to every cell in the grid. This is the result:

C#:

using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

namespace GridWithBorder
{
   public class BorderGrid : Grid
   {
       protected override void OnRender(DrawingContext dc)
       {
           double leftOffset = 0;
           double topOffset = 0;
           Pen pen = new Pen(Brushes.Black, 3);
           pen.Freeze();

           foreach (RowDefinition row in this.RowDefinitions)
           {
               dc.DrawLine(pen, new Point(0, topOffset), new Point(this.ActualWidth, topOffset));
               topOffset += row.ActualHeight;
           }
            // draw last line at the bottom
        dc.DrawLine(pen, new Point(0, topOffset), new Point(this.ActualWidth, topOffset));

           //foreach (ColumnDefinition column in this.ColumnDefinitions)
           //{
           //   dc.DrawLine(pen, new Point(leftOffset, 0), new Point(leftOffset, this.ActualHeight));
           //   leftOffset += column.ActualWidth;
           //}
           // draw last line on the right
           //dc.DrawLine(pen, new Point(leftOffset, 0), new Point(leftOffset, this.ActualHeight));

           base.OnRender(dc);
       }
   }
}

XAML:

<Window x:Class="GridWithBorder.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:GridWithBorder"
        Title="MainWindow" Height="350" Width="525">
    <local:BorderGrid>
        <local:BorderGrid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
        </local:BorderGrid.RowDefinitions>
        <local:BorderGrid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </local:BorderGrid.ColumnDefinitions>
        <Rectangle Grid.Row="0" Grid.Column="0" Fill="Red" Margin="5" />
        <Rectangle Grid.Row="0" Grid.Column="1" Fill="Blue" Margin="5" />
        <Rectangle Grid.Row="0" Grid.Column="2" Fill="Orange" Margin="5" />
        <Rectangle Grid.Row="0" Grid.Column="3" Fill="Red" Margin="5" />
        <Rectangle Grid.Row="1" Grid.Column="0" Fill="Yellow" Margin="5" />
        <Rectangle Grid.Row="1" Grid.Column="1" Fill="Green" Margin="5" />
        <Rectangle Grid.Row="1" Grid.Column="2" Fill="Purple" Margin="5" />
        <Rectangle Grid.Row="1" Grid.Column="3" Fill="Green" Margin="5" />
        <Rectangle Grid.Row="2" Grid.Column="0" Fill="Orange" Margin="5" />
        <Rectangle Grid.Row="2" Grid.Column="1" Fill="Red" Margin="5" />
        <Rectangle Grid.Row="2" Grid.Column="2" Fill="Blue" Margin="5" />
        <Rectangle Grid.Row="2" Grid.Column="3" Fill="Red" Margin="5" />
    </local:BorderGrid>
</Window>

Answer 2

You could pull that border out into a reusable resource, but I suspect what you're really trying to do is create a GridView.

Answer 3

You can just set the Background property on your Grid. If there is commonality between the border which you are applying to the different rows, you can create a default style (and if desired, limit the scope of this style to the Grid itself):

XAML

<Grid>
    <Grid.Resources>
        <Style TargetType="{x:Type Border}">
            <!-- All rows -->
            <Setter Property="BorderBrush" Value="Black" />
            <Setter Property="BorderThickness" Value="2" />
            <Setter Property="CornerRadius" Value="5" />
        </Style>
    </Grid.Resources>

    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>

    <Border Grid.Row="0">
        <TextBlock Text="This row has a black border (default)." />
    </Border>

    <Border BorderBrush="Red" Grid.Row="1">
        <TextBlock Text="This row has a red border." />
    </Border>

    <Border BorderBrush="Green" BorderThickness="4" Grid.Row="2">
        <TextBlock Text="This has a thick green border." />
    </Border>

</Grid>

With a default Style, no additional property needs to be set on your row's Border to achieve a default look (row one above). If a certain row needs to tweak the look and feel, then just provide additional properties on the Border to override the ones set in the default Style (rows two and three above). If this technique is something you are applying across multiple views in your application, then you can extract this style into a separate ResourceDictionary and simply merge it where appropriate.

Hope this helps!