Asignación de frontera para cada fila de la cuadrícula

Question

Actualmente estoy fijando el fondo de cada fila de la cuadrícula de forma individual:

<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> 

Seguramente debe haber alguna manera de establecer esta frontera de una vez por todas filas. ¿Cómo se hace eso?

Gracias!

Answer 1

Podrías sacar ese borde de un recurso reutilizable, pero sospecho que lo que realmente intentas hacer es crear un GridView.

Answer 2

Puede simplemente establecer la propiedad Background en su Grid. Si hay coincidencia entre la frontera que está solicitando a las diferentes filas, puede crear un estilo por defecto (y si se desea, limitar el alcance de este estilo a la Grid sí mismo):

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> 

Con un valor predeterminado Style, no es necesario establecer ninguna propiedad adicional en el fila Border para obtener un aspecto predeterminado (fila uno arriba). Si una determinada fila necesita ajustar la apariencia, simplemente proporcione propiedades adicionales en el Border para anular las establecidas en el valor predeterminado Style (filas dos y tres anteriores). Si esta técnica es algo que está aplicando a través de múltiples vistas en su aplicación, entonces puede extraer este estilo en un ResourceDictionary separado y simplemente combinarlo donde corresponda.

Espero que esto ayude!

Answer 3

O podría usar esta grilla que acabo de hacer. Automáticamente agregará un borde a cada celda en la grilla. Este es el resultado:

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>