WPF Grid添加边框的两种方法

最近项目中使用到了Grid表格，居然要加边框，查了一下，grid原生居然是不支持实线边框的。。

最终我还是实现了效果，

看看吧：

左边是直接写的每行一个border,每列写一个border,这样在行列比较少的时候还行，如果多了，那不惨了，项目中我就这样写的了，反正能实现效果了。。。

右边是使用附加属性，动态添加的border,还行吧，有不少缺点，比如不能处理单元格合并的问题。先不管了，反正我也用不到哈哈。

下面就看看代码吧：

新建一个GridProperties类，用来 放附加属性的定义：

using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
namespace wpfcore
{
    public class GridProperties
    {
        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(Grid), new PropertyMetadata(false,OnShowBorderChanged));


        private static void OnShowBorderChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            if (!(d is Grid grid)) return;
            
            grid.Loaded += OnLoaded;
        }


        private static void OnLoaded(object sender, RoutedEventArgs e)
        {
            if (!(sender is Grid grid)) return;


            var rowCount = grid.RowDefinitions.Count;
            var columnCount = grid.ColumnDefinitions.Count;
            var thickness = new Thickness(1);
            var bottomThickness = new Thickness(0,0,0,1);
            var rightThickness = new Thickness(0,0,1,0);
            var headerBack = new SolidColorBrush(Color.FromArgb(255, 129, 133, 145));
            for (int i = 0; i < rowCount; i++)
            {
                Border border = new Border()
                {
                    BorderBrush = Brushes.Black,
                    BorderThickness = i == 0 ? thickness : bottomThickness,
                    Background = i == 0 ? headerBack : Brushes.Transparent,
                };
                border.SetValue(Panel.ZIndexProperty, -1000);
                border.SetValue(Grid.RowProperty, i);
                border.SetValue(Grid.ColumnProperty, 0);
                border.SetValue(Grid.ColumnSpanProperty, columnCount);
                grid.Children.Add(border);
            }
            for (int i = 0; i < columnCount; i++)
            {
                Border border = new Border()
                {
                    BorderBrush = Brushes.Black,
                    BorderThickness = i == 0 ? thickness : rightThickness,
                    Background = Brushes.Transparent,
                };
                border.SetValue(Panel.ZIndexProperty, -1000);
                border.SetValue(Grid.RowProperty, 0);
                border.SetValue(Grid.ColumnProperty, i);
                border.SetValue(Grid.RowSpanProperty, rowCount);
                grid.Children.Add(border);
            }
            grid.Loaded -= OnLoaded;
        }
    }
}

然后在MainWindow的测试代码：

<Window x:Class="wpfcore.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:wpfcore"
        mc:Ignorable="d"
        Background="LightBlue"
        UseLayoutRounding="True"
        Title="MainWindow" Width="820" Height="340">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>


        <StackPanel Margin="30" VerticalAlignment="Center" HorizontalAlignment="Center">
            <TextBlock Text="直接写 Border的方式添加" FontSize="18" Margin="10" Foreground="Green" HorizontalAlignment="Center"/>
            <Grid Width="300" Height="150" >
                <Grid.Resources>
                    <Style TargetType="TextBlock">
                        <Setter Property="HorizontalAlignment" Value="Center"/>
                        <Setter Property="VerticalAlignment" Value="Center"/>
                        <Setter Property="FontSize" Value="16"/>
                        <Setter Property="FontFamily" Value="微软雅黑"/>
</Style>
                    <Style TargetType="Border" >
                        <Setter Property="BorderBrush" Value="Black"/>
                        <Setter Property="BorderThickness" Value="1"/>
</Style>
                </Grid.Resources>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="1.5*"/>
                    <ColumnDefinition Width="1*"/>
                    <ColumnDefinition Width="2*"/>
                    <ColumnDefinition Width="1*"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition />
                    <RowDefinition />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <Border Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4" Background="#818591"/>
                <Border Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="4" BorderThickness="0 0 0 1"/>
                <Border Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="4" BorderThickness="0 0 0 1"/>
                <Border Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="4" BorderThickness="0 0 0 1"/>


                <Border Grid.Row="0" Grid.Column="0" Grid.RowSpan="4" />
                <Border Grid.Row="0" Grid.Column="1" Grid.RowSpan="4" BorderThickness="0 0 1 0"/>
                <Border Grid.Row="0" Grid.Column="2" Grid.RowSpan="4" BorderThickness="0 0 1 0"/>
                <Border Grid.Row="0" Grid.Column="3" Grid.RowSpan="4" BorderThickness="0 0 1 0"/>


                <TextBlock Grid.Row="0" Grid.Column="0" Text="姓名"/>
                <TextBlock Grid.Row="0" Grid.Column="1" Text="年龄"/>
                <TextBlock Grid.Row="0" Grid.Column="2" Text="兴趣爱好"/>
                <TextBlock Grid.Row="0" Grid.Column="3" Text="性别"/>


                <TextBlock Grid.Row="1" Grid.Column="0" Text="WPF UI"/>
                <TextBlock Grid.Row="1" Grid.Column="1" Text="3M"/>
                <TextBlock Grid.Row="1" Grid.Column="2" Text="分享代码"/>
                <TextBlock Grid.Row="1" Grid.Column="3" Text="汉子"/>
            </Grid>
        </StackPanel>


        <StackPanel Grid.Column="1" Margin="30" VerticalAlignment="Center" HorizontalAlignment="Center">
            <TextBlock Text="使用附加属性添加" FontSize="18" Margin="10" Foreground="Green" HorizontalAlignment="Center"/>
            <Grid Width="300" Height="150" local:GridProperties.ShowBorder="True">
                <Grid.Resources>
                    <Style TargetType="TextBlock">
                        <Setter Property="HorizontalAlignment" Value="Center"/>
                        <Setter Property="VerticalAlignment" Value="Center"/>
                        <Setter Property="FontSize" Value="16"/>
                        <Setter Property="FontFamily" Value="微软雅黑"/>
</Style>
                    <Style TargetType="Border">
                        <Setter Property="BorderBrush" Value="Black"/>
                        <Setter Property="BorderThickness" Value="1"/>
</Style>
                </Grid.Resources>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="1.5*"/>
                    <ColumnDefinition Width="1*"/>
                    <ColumnDefinition Width="2*"/>
                    <ColumnDefinition Width="1*"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition />
                    <RowDefinition />
                    <RowDefinition />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <TextBlock Grid.Row="0" Grid.Column="0" Text="姓名"/>
                <TextBlock Grid.Row="0" Grid.Column="1" Text="年龄"/>
                <TextBlock Grid.Row="0" Grid.Column="2" Text="兴趣爱好"/>
                <TextBlock Grid.Row="0" Grid.Column="3" Text="性别"/>


                <TextBlock Grid.Row="1" Grid.Column="0" Text="WPF UI"/>
                <TextBlock Grid.Row="1" Grid.Column="1" Text="3M"/>
                <TextBlock Grid.Row="1" Grid.Column="2" Text="分享代码"/>
                <TextBlock Grid.Row="1" Grid.Column="3" Text="汉子"/>
            </Grid>
        </StackPanel>        
    </Grid>
</Window>

以上xaml就能实现视频中的效果啦

如果喜欢，点个赞呗~您的点赞是我更新的动力~