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就能实现视频中的效果啦