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!
If you want to keep the gap between the items, you can add an empty item between every row and stretch it to entire width of the container (using grid-column property) then add a border to it.
<Grid> <Border BorderBrush="Black" BorderThickness="2"> <Grid Height="166" HorizontalAlignment="Left" Margin="12,12,0,0" Name="grid1" VerticalAlignment="Top" Width="479" Background="#FFF2F2F2" /> </Border> ... and so on ...
Gets or sets a value that indicates the total number of rows that child content spans within a Grid.
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>
You could pull that border out into a reusable resource, but I suspect what you're really trying to do is create a GridView.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With