添加 thickness = 1，wpf 中网格内网格的边框、行和列的轮廓

Question

我有以下 WPF XAML 文件，

<Window x:Class="Program"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Program"
        mc:Ignorable="d"
        Title="Print Preview" Height="40820.962" Width="2135.146">
    <Grid Margin="10,10,2,-21" Height="40801" VerticalAlignment="Top">
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="131*"/>
            <RowDefinition Height="40670*"/>
        </Grid.RowDefinitions>
        <Grid HorizontalAlignment="Left" Height="3438" Margin="20,126,0,0" VerticalAlignment="Top" Width="2095" Grid.RowSpan="2">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="500*"/>
                <ColumnDefinition Width="1072*"/>
                <ColumnDefinition Width="523*"/>
            </Grid.ColumnDefinitions>
            <Label x:Name="label5" Content="Here" Grid.Column="1" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" RenderTransformOrigin="-7.455,-0.374" Height="58" Width="171" FontSize="16"/>
        </Grid>
        <Grid HorizontalAlignment="Right" Height="432" Margin="0,3453,1605,0" Grid.Row="1" VerticalAlignment="Top" Width="490" RenderTransformOrigin="0.62,1.205">
            <Grid.RowDefinitions>
                <RowDefinition Height="143*"/>
                <RowDefinition Height="136*"/>
                <RowDefinition Height="153*"/>
            </Grid.RowDefinitions>
        </Grid>
        <Grid HorizontalAlignment="Right" Height="452" Margin="0,3433,1605,0" Grid.Row="1" VerticalAlignment="Top" Width="490" RenderTransformOrigin="0.62,1.205">
            <Grid.RowDefinitions>
                <RowDefinition Height="143*"/>
                <RowDefinition Height="136*"/>
                <RowDefinition Height="153*"/>
            </Grid.RowDefinitions>
        </Grid>
        <Grid HorizontalAlignment="Left" Height="447" Margin="1594,3438,0,0" Grid.Row="1" VerticalAlignment="Top" Width="511">
            <Grid.RowDefinitions>
                <RowDefinition Height="142*"/>
                <RowDefinition Height="156*"/>
                <RowDefinition Height="149*"/>
            </Grid.RowDefinitions>
        </Grid>
        <Grid HorizontalAlignment="Left" Height="452" Margin="510,3433,0,0" Grid.Row="1" VerticalAlignment="Top" Width="1084">
            <Grid.RowDefinitions>
                <RowDefinition Height="44*"/>
                <RowDefinition Height="45*"/>
            </Grid.RowDefinitions>
        </Grid>
        <Grid HorizontalAlignment="Left" Height="23141" Margin="20,3895,0,0" Grid.Row="1" VerticalAlignment="Top" Width="1574"/>
        <Grid HorizontalAlignment="Left" Height="23540" Margin="1599,3496,0,0" Grid.Row="1" VerticalAlignment="Top" Width="506">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="14.143"/>
                <ColumnDefinition Width="146.857"/>
                <ColumnDefinition Width="42.714"/>
                <ColumnDefinition Width="119*"/>
                <ColumnDefinition Width="98*"/>
                <ColumnDefinition Width="85*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="87*"/>
                <RowDefinition Height="23516*"/>
            </Grid.RowDefinitions>
            <Label x:Name="label" Content="Hespanic" HorizontalAlignment="Left" Margin="-1,-61,0,0" VerticalAlignment="Top" Height="55" Width="506" FontSize="22" Grid.ColumnSpan="6"/>
        </Grid>
        <Label x:Name="label1" Content="Sample" HorizontalAlignment="Left" Margin="8,97,0,0" VerticalAlignment="Top" RenderTransformOrigin="-8.5,0.654" Width="215"/>
        <Label x:Name="label2" Content="Layer" HorizontalAlignment="Left" Height="33" Margin="922,10,0,0" VerticalAlignment="Top" Width="232" FontSize="18"/>
        <Label x:Name="label3" Content="Index" HorizontalAlignment="Left" Margin="1969,10,0,0" VerticalAlignment="Top" Width="105"/>
        <Label x:Name="label4" Content="People" HorizontalAlignment="Left" Margin="1477,84,0,0" VerticalAlignment="Top" Width="161"/>
    </Grid>
</Window>

所以我尝试添加 thickness = 1，网格边界、行和列的轮廓

所以我尝试关注线程

How do i put a border on my grid in WPF?

为了添加边框，我添加了以下内容，效果很好

<Border BorderBrush="Black" BorderThickness="2">
    <Grid>
       <!-- Grid contents here -->
    </Grid>
</Border>

但是因为我需要添加 thickness = 1，所有上面的多列和多行的轮廓，我尝试了这样的事情

</Grid.ColumnDefinitions>
                <Border Grid.Row="0" Grid.Column="0" BorderThickness="1" BorderBrush="Black"/>
                <Border Grid.Row="0" Grid.Column="1" BorderThickness="1" BorderBrush="Black"/>

这是识别每一列和每一行并增加它们的厚度，但这似乎是一项非常耗时且令人困惑的工作。

是否有任何其他正确且快速的方法可以将 BorderThickness="1" BorderBrush="Black" 添加到网格中的所有上述列和行？

Answer 1

在默认的WPF Grid中，您可以设置ShowGridLines="True"。然而，这些线条是设计线条，并非供最终使用。

我使用的常见解决方案是自定义 GridControl，它为 GridLines 设置添加 DependencyProperties，并覆盖 OnRender 来绘制它们。

public class GridControl : Grid
{
    #region Properties
    public bool ShowCustomGridLines
    {
        get { return (bool)GetValue(ShowCustomGridLinesProperty); }
        set { SetValue(ShowCustomGridLinesProperty, value); }
    }

    public static readonly DependencyProperty ShowCustomGridLinesProperty =
        DependencyProperty.Register("ShowCustomGridLines", typeof(bool), typeof(GridControl), new UIPropertyMetadata(false));

    public Brush GridLineBrush
    {
        get { return (Brush)GetValue(GridLineBrushProperty); }
        set { SetValue(GridLineBrushProperty, value); }
    }

    public static readonly DependencyProperty GridLineBrushProperty =
        DependencyProperty.Register("GridLineBrush", typeof(Brush), typeof(GridControl), new UIPropertyMetadata(Brushes.Black));

    public double GridLineThickness
    {
        get { return (double)GetValue(GridLineThicknessProperty); }
        set { SetValue(GridLineThicknessProperty, value); }
    }

    public static readonly DependencyProperty GridLineThicknessProperty =
        DependencyProperty.Register("GridLineThickness", typeof(double), typeof(GridControl), new UIPropertyMetadata(1.0));
    #endregion

    protected override void OnRender(DrawingContext dc)
    {
        if (ShowCustomGridLines)
        {
            foreach (var rowDefinition in RowDefinitions)
            {
                dc.DrawLine(new Pen(GridLineBrush, GridLineThickness), new Point(0, rowDefinition.Offset), new Point(ActualWidth, rowDefinition.Offset));
            }

            foreach (var columnDefinition in ColumnDefinitions)
            {
                dc.DrawLine(new Pen(GridLineBrush, GridLineThickness), new Point(columnDefinition.Offset, 0), new Point(columnDefinition.Offset, ActualHeight));
            }
            dc.DrawRectangle(Brushes.Transparent, new Pen(GridLineBrush, GridLineThickness), new Rect(0, 0, ActualWidth, ActualHeight));
        }
        base.OnRender(dc);
    }
    static GridControl()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(GridControl), new FrameworkPropertyMetadata(typeof(GridControl)));
    }
}

可以这样使用:

<local:GridEx ShowCustomGridLines="True" 
              GridLineBrush="#FF38B800" 
              GridLineThickness="2">
    ...
</local:GridEx>

添加 thickness = 1，wpf 中网格内网格的边框、行和列的轮廓

add thickness = 1, outline for borders,rows and columns of grids inside grids in wpf

c#

wpf

window