为WPF的Grid添加网格边框线

风烟隐2024-05-26 9:07

在WPF中使用Grid绘制表格的时候，如果元素较多、排列复杂的话，界面会看起来很糟糕，没有层次，这时用网格或边框线分割各元素（标签或单元格）将会是页面看起来整齐有条理。

默认没有边框线的如下图所示：

复制代码 
<Window x:Class="GridLineTest.MainWindow"
        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:GridLineTest"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid Width="600" Height="400">
        <Grid.Resources>
            <Style TargetType="TextBlock">
                <Setter Property="FontSize" Value="30"></Setter>
                <Setter Property="HorizontalAlignment" Value="Center"></Setter>
                <Setter Property="VerticalAlignment" Value="Center"></Setter>
            </Style>
        </Grid.Resources>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <TextBlock Text="A01" Grid.Row="0" Grid.Column="0"></TextBlock>
        <TextBlock Text="A02" Grid.Row="0" Grid.Column="1"></TextBlock>
        <TextBlock Text="A03" Grid.Row="0" Grid.Column="2"></TextBlock>
        <TextBlock Text="A11" Grid.Row="1" Grid.Column="0"></TextBlock>
        <TextBlock Text="A12" Grid.Row="1" Grid.Column="1"></TextBlock>
        <TextBlock Text="A13" Grid.Row="1" Grid.Column="2"></TextBlock>
        <TextBlock Text="A21" Grid.Row="2" Grid.Column="0"></TextBlock>
        <TextBlock Text="A22" Grid.Row="2" Grid.Column="1"></TextBlock>
        <TextBlock Text="A23" Grid.Row="2" Grid.Column="2"></TextBlock>
    </Grid>
</Window>

一、使用ShowGridLines属性

Grid控件自带属性：ShowGridLines，只需将它设为True即可显示网格线，效果如下：

复制代码 
<Window x:Class="GridLineTest.MainWindow"
        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:GridLineTest"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid Width="600" Height="400" ShowGridLines="True">
        <Grid.Resources>
            <Style TargetType="TextBlock">
                <Setter Property="FontSize" Value="30"></Setter>
                <Setter Property="HorizontalAlignment" Value="Center"></Setter>
                <Setter Property="VerticalAlignment" Value="Center"></Setter>
            </Style>
        </Grid.Resources>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <TextBlock Text="A01" Grid.Row="0" Grid.Column="0"></TextBlock>
        <TextBlock Text="A02" Grid.Row="0" Grid.Column="1"></TextBlock>
        <TextBlock Text="A03" Grid.Row="0" Grid.Column="2"></TextBlock>
        <TextBlock Text="A11" Grid.Row="1" Grid.Column="0"></TextBlock>
        <TextBlock Text="A12" Grid.Row="1" Grid.Column="1"></TextBlock>
        <TextBlock Text="A13" Grid.Row="1" Grid.Column="2"></TextBlock>
        <TextBlock Text="A21" Grid.Row="2" Grid.Column="0"></TextBlock>
        <TextBlock Text="A22" Grid.Row="2" Grid.Column="1"></TextBlock>
        <TextBlock Text="A23" Grid.Row="2" Grid.Column="2"></TextBlock>
    </Grid>
</Window>

使用ShowGridLines属性的优点是简单，一般用于Grid内部元素排版使用；缺点有：1、无法变更样式，固定是虚线；2、不随单元格合并而改变；3、不会显示最大的外边框线。

二、使用Border添加边框线

适用于行和列较少的情况，不然CV工作量小不了，行号和列号还容易填错。

复制代码 
<Window x:Class="GridLineTest.MainWindow"
        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:GridLineTest"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid Width="600" Height="400">
        <Grid.Resources>
            <Style TargetType="TextBlock">
                <Setter Property="FontSize" Value="30"></Setter>
                <Setter Property="HorizontalAlignment" Value="Center"></Setter>
                <Setter Property="VerticalAlignment" Value="Center"></Setter>
            </Style>
            <Style TargetType="Border">
                <Setter Property="BorderBrush" Value="Red"></Setter>
                <Setter Property="BorderThickness" Value="1"></Setter>
            </Style>
        </Grid.Resources>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <TextBlock Text="A01" Grid.Row="0" Grid.Column="0"></TextBlock>
        <TextBlock Text="A02" Grid.Row="0" Grid.Column="1"></TextBlock>
        <TextBlock Text="A03" Grid.Row="0" Grid.Column="2"></TextBlock>
        <TextBlock Text="A11" Grid.Row="1" Grid.Column="0"></TextBlock>
        <TextBlock Text="A12" Grid.Row="1" Grid.Column="1"></TextBlock>
        <TextBlock Text="A13" Grid.Row="1" Grid.Column="2"></TextBlock>
        <TextBlock Text="A21" Grid.Row="2" Grid.Column="0"></TextBlock>
        <TextBlock Text="A22" Grid.Row="2" Grid.Column="1"></TextBlock>
        <TextBlock Text="A23" Grid.Row="2" Grid.Column="2"></TextBlock>

        <!--使用Border绘制边框-->
        <Border Grid.Row="0"></Border>
        <Border Grid.Row="1"></Border>
        <Border Grid.Row="2"></Border>
        <Border Grid.Column="0"></Border>
        <Border Grid.Column="1"></Border>
        <Border Grid.Column="2"></Border>
        <Border Grid.Row="1" Grid.Column="1"></Border>
        <Border Grid.Row="1" Grid.Column="2"></Border>
        <Border Grid.Row="2" Grid.Column="1"></Border>
        <Border Grid.Row="2" Grid.Column="2"></Border>
    </Grid>
</Window>

三、使用附加属性添加边框线

TextBlock元素本身并没有行和列的概念，但是可以通过Grid.GetColumn和Grid.SetColumn来附加属性，生成Grid布局。

复制代码 
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

namespace Helper
{
    public class GridLineHelper
    {

        #region 可以通过propa快捷方式生成下面段代码
        public static bool GetShowBorder(DependencyObject obj)
        {
            return (bool)obj.GetValue(ShowBorderProperty);
        }

        public static void SetShowBorder(DependencyObject obj, bool value)
        {
            obj.SetValue(ShowBorderProperty, value);
        }

        public static readonly DependencyProperty ShowBorderProperty =
            DependencyProperty.RegisterAttached("ShowBorder", typeof(bool), typeof(GridLineHelper), new PropertyMetadata(OnShowBorderChanged));
        #endregion

        //事件处理，需要手工编写，必须是静态方法
        private static void OnShowBorderChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            var grid = d as Grid;
            if ((bool)e.OldValue)
            {
                grid.Loaded -= (s, arg) => { };
            }
            if ((bool)e.NewValue)
            {
                grid.Loaded += (s, arg) =>
                {
                    //确定行和列数
                    var rows = grid.RowDefinitions.Count;
                    var columns = grid.ColumnDefinitions.Count;

                    //每个格子添加一个Border进去
                    for (int i = 0; i < rows; i++)
                    {
                        for (int j = 0; j < columns; j++)
                        {
                            var border = new Border() { BorderBrush = new SolidColorBrush(Colors.Gray), BorderThickness = new Thickness(1) };
                            Grid.SetRow(border, i);
                            Grid.SetColumn(border, j);

                            grid.Children.Add(border);
                        }
                    }
                };
            }
        }
    }
}

<Window x:Class="GridLineTest.MainWindow"
        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:GridLineTest"
        xmlns:ext="clr-namespace:Helper"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid Width="600" Height="400" ext:GridLineHelper.ShowBorder="True">
        <Grid.Resources>
            <Style TargetType="TextBlock">
                <Setter Property="FontSize" Value="30"></Setter>
                <Setter Property="HorizontalAlignment" Value="Center"></Setter>
                <Setter Property="VerticalAlignment" Value="Center"></Setter>
            </Style>
            <Style TargetType="Border">
                <Setter Property="BorderBrush" Value="Red"></Setter>
                <Setter Property="BorderThickness" Value="1"></Setter>
            </Style>
        </Grid.Resources>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <TextBlock Text="A01" Grid.Row="0" Grid.Column="0"></TextBlock>
        <TextBlock Text="A02" Grid.Row="0" Grid.Column="1"></TextBlock>
        <TextBlock Text="A03" Grid.Row="0" Grid.Column="2"></TextBlock>
        <TextBlock Text="A11" Grid.Row="1" Grid.Column="0"></TextBlock>
        <TextBlock Text="A12" Grid.Row="1" Grid.Column="1"></TextBlock>
        <TextBlock Text="A13" Grid.Row="1" Grid.Column="2"></TextBlock>
        <TextBlock Text="A21" Grid.Row="2" Grid.Column="0"></TextBlock>
        <TextBlock Text="A22" Grid.Row="2" Grid.Column="1"></TextBlock>
        <TextBlock Text="A23" Grid.Row="2" Grid.Column="2"></TextBlock>
    </Grid>
</Window>

如果有合并的单元格的情况又该如何处理呢？这时就需要用到Grid.SetRowSpan和Grid.SetColumnSpan来附加属性。

复制代码 
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

namespace Helper
{
    public class GridLineHelper
    {

        #region 可以通过propa快捷方式生成下面段代码
        public static bool GetShowBorder(DependencyObject obj)
        {
            return (bool)obj.GetValue(ShowBorderProperty);
        }

        public static void SetShowBorder(DependencyObject obj, bool value)
        {
            obj.SetValue(ShowBorderProperty, value);
        }

        public static readonly DependencyProperty ShowBorderProperty =
            DependencyProperty.RegisterAttached("ShowBorder", typeof(bool), typeof(GridLineHelper), new PropertyMetadata(OnShowBorderChanged));
        #endregion

        //事件处理，需要手工编写，必须是静态方法
        private static void OnShowBorderChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            var grid = d as Grid;
            string name = grid.Name;
            if ((bool)e.OldValue)
            {
                grid.Loaded -= (s, arg) => { };
            }
            if ((bool)e.NewValue)
            {
                grid.Loaded += (s, arg) =>
                {
                    //根据Grid中子控件的个数去添加边框，同时考虑合并的情况
                    var controls = grid.Children;
                    var count = controls.Count;

                    for (int i = 0; i < count; i++)
                    {
                        var item = controls[i] as FrameworkElement;
                        var border = new Border()
                        {
                            BorderBrush = new SolidColorBrush(Colors.LightGray),
                            BorderThickness = new Thickness(1)
                        };

                        var row = Grid.GetRow(item);
                        var column = Grid.GetColumn(item);
                        var rowspan = Grid.GetRowSpan(item);
                        var columnspan = Grid.GetColumnSpan(item);

                        Grid.SetRow(border, row);
                        Grid.SetColumn(border, column);
                        Grid.SetRowSpan(border, rowspan);
                        Grid.SetColumnSpan(border, columnspan);

                        grid.Children.Add(border);
                    }
                };
            }
        }
    }
}

<Window x:Class="GridLineTest.MainWindow"
        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:GridLineTest"
        xmlns:ext="clr-namespace:Helper"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid Width="600" Height="400" ext:GridLineHelper.ShowBorder="True" x:Name="MyGrid">
        <Grid.Resources>
            <Style TargetType="TextBlock">
                <Setter Property="FontSize" Value="30"></Setter>
                <Setter Property="HorizontalAlignment" Value="Center"></Setter>
                <Setter Property="VerticalAlignment" Value="Center"></Setter>
            </Style>
        </Grid.Resources>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <TextBlock Text="A01" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"></TextBlock>
        <!--<TextBlock Text="A02" Grid.Row="0" Grid.Column="1"></TextBlock>-->
        <TextBlock Text="A03" Grid.Row="0" Grid.Column="2"></TextBlock>
        <TextBlock Text="A11" Grid.Row="1" Grid.Column="0"></TextBlock>
        <TextBlock Text="A12" Grid.Row="1" Grid.Column="1"></TextBlock>
        <TextBlock Text="A13" Grid.Row="1" Grid.Column="2"></TextBlock>
        <TextBlock Text="A21" Grid.Row="2" Grid.Column="0"></TextBlock>
        <TextBlock Text="A22" Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2"></TextBlock>
        <!--<TextBlock Text="A23" Grid.Row="2" Grid.Column="2"></TextBlock>-->
    </Grid>
</Window>

四、补充

有时需要遍历Grid中的所有元素来做映射等功能，为了方便和减少循环的数据量，会剔除其中的Border元素，可以使用下方行代码实现：

复制代码 
var childrens = this.MyGrid.Children.OfType<UIElement>().ToList().Except(this.MyGrid.Children.OfType<Border>().ToList()).ToList();
相关推荐
上元星如雨2 分钟前
在WPF程序中设置背景图片
大数据·hadoop·wpf
趋时软件1 天前
封装WPF中列表控件的剪贴板操作（附源码）
wpf
Hare_bai1 天前
WPF布局系统详解：掌握界面设计的核心艺术
c#·wpf·visual studio
界面开发小八哥2 天前
高性能图表库SciChart WPF v8.8全新发布——提升渐变颜色映射高度
信息可视化·wpf·数据可视化·图表工具·scichart
battlestar2 天前
WPF读取json文件，用到combox控件
json·wpf
Hare_bai2 天前
WPF入门与XAML基础：从零开始构建你的第一个WPF应用
c#·wpf
Singe.Chen3 天前
C#中Task.Run的线程管理最佳实践与并发控制
c#·.net·wpf
He BianGu3 天前
演示：【WPF-WinCC3D】 3D工业组态监控平台源代码
wpf
拜特流动3 天前
WPF核心类继承树结构
wpf
天天进步20153 天前
C# Prism框架详解：构建模块化WPF应用程序
开发语言·c#·wpf
热门推荐
01KGG转MP3工具|非KGM文件|解密音频02从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑03YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】04【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！05组基轨迹建模 GBTM的介绍与实现（Stata 或 R）06DeepSeek各版本说明与优缺点分析07CCF CSP 认证考试历年真题满分题解（所有前四题）08VMware虚拟机安装Win7专业版保姆级教程（附镜像包）09Coze扣子平台完整体验和实践（附国内和国际版对比）10【2025年最新】OpenWrt 更换国内源的指南（图形界面版)