Назначение границы каждой строке сетки - PullRequest
Новая
       34

Назначение границы каждой строке сетки

9 голосов
/ 17 декабря 2011

В настоящее время я устанавливаю фон для каждой строки сетки индивидуально: 

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

Конечно, должен быть какой-то способ установить эту границу один раз для всех строк.Как это сделать?

Спасибо!

Ответы [ 3 ]

18 голосов
/ 17 декабря 2011

Или вы можете использовать эту сетку, которую я только что сделал.Это автоматически добавит границу к каждой ячейке в сетке.Это результат:

enter image description here

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>
3 голосов
/ 17 декабря 2011

Вы можете вытянуть эту границу в ресурс многократного использования, но я подозреваю, что вы действительно пытаетесь сделать это - создать GridView .

2 голосов
/ 17 декабря 2011

Вы можете просто установить свойство Background на Grid.Если есть граница между границей, которую вы применяете к различным строкам, вы можете создать стиль по умолчанию (и при желании ограничить область действия этого стиля самой Grid):

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>

При значении по умолчанию Style не требуется устанавливать никаких дополнительных свойств в строке Border вашей строки, чтобы получить вид по умолчанию (строка выше).Если определенная строка нуждается в настройке внешнего вида, просто предоставьте дополнительные свойства в Border, чтобы переопределить те, которые установлены в стандартном Style (строки два и три выше).Если вы применяете эту технику к нескольким представлениям в своем приложении, то вы можете извлечь этот стиль в отдельный ResourceDictionary и просто объединить его в случае необходимости.

Надеюсь, это поможет!

...