devbox
weixin_40725706
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

为WPF的Grid添加网格边框线

作者：weixin_40725706 | 2024-05-23 07:10:11

赞

踩

为WPF的Grid添加网格边框线

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

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

  1. <Window x:Class="GridLineTest.MainWindow"
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  6.         xmlns:local="clr-namespace:GridLineTest"
  7.         mc:Ignorable="d"
  8.         Title="MainWindow" Height="450" Width="800">
  9.     <Grid Width="600" Height="400">
  10.         <Grid.Resources>
  11.             <Style TargetType="TextBlock">
  12.                 <Setter Property="FontSize" Value="30"></Setter>
  13.                 <Setter Property="HorizontalAlignment" Value="Center"></Setter>
  14.                 <Setter Property="VerticalAlignment" Value="Center"></Setter>
  15.             </Style>
  16.         </Grid.Resources>
  17.         <Grid.RowDefinitions>
  18.             <RowDefinition></RowDefinition>
  19.             <RowDefinition></RowDefinition>
  20.             <RowDefinition></RowDefinition>
  21.         </Grid.RowDefinitions>
  22.         <Grid.ColumnDefinitions>
  23.             <ColumnDefinition></ColumnDefinition>
  24.             <ColumnDefinition></ColumnDefinition>
  25.             <ColumnDefinition></ColumnDefinition>
  26.         </Grid.ColumnDefinitions>
  27.         <TextBlock Text="A01" Grid.Row="0" Grid.Column="0"></TextBlock>
  28.         <TextBlock Text="A02" Grid.Row="0" Grid.Column="1"></TextBlock>
  29.         <TextBlock Text="A03" Grid.Row="0" Grid.Column="2"></TextBlock>
  30.         <TextBlock Text="A11" Grid.Row="1" Grid.Column="0"></TextBlock>
  31.         <TextBlock Text="A12" Grid.Row="1" Grid.Column="1"></TextBlock>
  32.         <TextBlock Text="A13" Grid.Row="1" Grid.Column="2"></TextBlock>
  33.         <TextBlock Text="A21" Grid.Row="2" Grid.Column="0"></TextBlock>
  34.         <TextBlock Text="A22" Grid.Row="2" Grid.Column="1"></TextBlock>
  35.         <TextBlock Text="A23" Grid.Row="2" Grid.Column="2"></TextBlock>
  36.     </Grid>
  37. </Window>

        一、使用ShowGridLines属性

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

  1. <Window x:Class="GridLineTest.MainWindow"
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  6.         xmlns:local="clr-namespace:GridLineTest"
  7.         mc:Ignorable="d"
  8.         Title="MainWindow" Height="450" Width="800">
  9.     <Grid Width="600" Height="400" ShowGridLines="True">
  10.         <Grid.Resources>
  11.             <Style TargetType="TextBlock">
  12.                 <Setter Property="FontSize" Value="30"></Setter>
  13.                 <Setter Property="HorizontalAlignment" Value="Center"></Setter>
  14.                 <Setter Property="VerticalAlignment" Value="Center"></Setter>
  15.             </Style>
  16.         </Grid.Resources>
  17.         <Grid.RowDefinitions>
  18.             <RowDefinition></RowDefinition>
  19.             <RowDefinition></RowDefinition>
  20.             <RowDefinition></RowDefinition>
  21.         </Grid.RowDefinitions>
  22.         <Grid.ColumnDefinitions>
  23.             <ColumnDefinition></ColumnDefinition>
  24.             <ColumnDefinition></ColumnDefinition>
  25.             <ColumnDefinition></ColumnDefinition>
  26.         </Grid.ColumnDefinitions>
  27.         <TextBlock Text="A01" Grid.Row="0" Grid.Column="0"></TextBlock>
  28.         <TextBlock Text="A02" Grid.Row="0" Grid.Column="1"></TextBlock>
  29.         <TextBlock Text="A03" Grid.Row="0" Grid.Column="2"></TextBlock>
  30.         <TextBlock Text="A11" Grid.Row="1" Grid.Column="0"></TextBlock>
  31.         <TextBlock Text="A12" Grid.Row="1" Grid.Column="1"></TextBlock>
  32.         <TextBlock Text="A13" Grid.Row="1" Grid.Column="2"></TextBlock>
  33.         <TextBlock Text="A21" Grid.Row="2" Grid.Column="0"></TextBlock>
  34.         <TextBlock Text="A22" Grid.Row="2" Grid.Column="1"></TextBlock>
  35.         <TextBlock Text="A23" Grid.Row="2" Grid.Column="2"></TextBlock>
  36.     </Grid>
  37. </Window>

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

        二、使用Border添加边框线

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

  1. <Window x:Class="GridLineTest.MainWindow"
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  6.         xmlns:local="clr-namespace:GridLineTest"
  7.         mc:Ignorable="d"
  8.         Title="MainWindow" Height="450" Width="800">
  9.     <Grid Width="600" Height="400">
  10.         <Grid.Resources>
  11.             <Style TargetType="TextBlock">
  12.                 <Setter Property="FontSize" Value="30"></Setter>
  13.                 <Setter Property="HorizontalAlignment" Value="Center"></Setter>
  14.                 <Setter Property="VerticalAlignment" Value="Center"></Setter>
  15.             </Style>
  16.             <Style TargetType="Border">
  17.                 <Setter Property="BorderBrush" Value="Red"></Setter>
  18.                 <Setter Property="BorderThickness" Value="1"></Setter>
  19.             </Style>
  20.         </Grid.Resources>
  21.         <Grid.RowDefinitions>
  22.             <RowDefinition></RowDefinition>
  23.             <RowDefinition></RowDefinition>
  24.             <RowDefinition></RowDefinition>
  25.         </Grid.RowDefinitions>
  26.         <Grid.ColumnDefinitions>
  27.             <ColumnDefinition></ColumnDefinition>
  28.             <ColumnDefinition></ColumnDefinition>
  29.             <ColumnDefinition></ColumnDefinition>
  30.         </Grid.ColumnDefinitions>
  31.         <TextBlock Text="A01" Grid.Row="0" Grid.Column="0"></TextBlock>
  32.         <TextBlock Text="A02" Grid.Row="0" Grid.Column="1"></TextBlock>
  33.         <TextBlock Text="A03" Grid.Row="0" Grid.Column="2"></TextBlock>
  34.         <TextBlock Text="A11" Grid.Row="1" Grid.Column="0"></TextBlock>
  35.         <TextBlock Text="A12" Grid.Row="1" Grid.Column="1"></TextBlock>
  36.         <TextBlock Text="A13" Grid.Row="1" Grid.Column="2"></TextBlock>
  37.         <TextBlock Text="A21" Grid.Row="2" Grid.Column="0"></TextBlock>
  38.         <TextBlock Text="A22" Grid.Row="2" Grid.Column="1"></TextBlock>
  39.         <TextBlock Text="A23" Grid.Row="2" Grid.Column="2"></TextBlock>
  40.  
  41.         <!--使用Border绘制边框-->
  42.         <Border Grid.Row="0"></Border>
  43.         <Border Grid.Row="1"></Border>
  44.         <Border Grid.Row="2"></Border>
  45.         <Border Grid.Column="0"></Border>
  46.         <Border Grid.Column="1"></Border>
  47.         <Border Grid.Column="2"></Border>
  48.         <Border Grid.Row="1" Grid.Column="1"></Border>
  49.         <Border Grid.Row="1" Grid.Column="2"></Border>
  50.         <Border Grid.Row="2" Grid.Column="1"></Border>
  51.         <Border Grid.Row="2" Grid.Column="2"></Border>
  52.     </Grid>
  53. </Window>

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

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

  1. using System.Windows;
  2. using System.Windows.Controls;
  3. using System.Windows.Media;
  4.  
  5. namespace Helper
  6. {
  7.     public class GridLineHelper
  8.     {
  9.  
  10.         #region 可以通过propa快捷方式生成下面段代码
  11.         public static bool GetShowBorder(DependencyObject obj)
  12.         {
  13.             return (bool)obj.GetValue(ShowBorderProperty);
  14.         }
  15.  
  16.         public static void SetShowBorder(DependencyObject obj, bool value)
  17.         {
  18.             obj.SetValue(ShowBorderProperty, value);
  19.         }
  20.  
  21.         public static readonly DependencyProperty ShowBorderProperty =
  22.             DependencyProperty.RegisterAttached("ShowBorder", typeof(bool), typeof(GridLineHelper), new PropertyMetadata(OnShowBorderChanged));
  23.         #endregion
  24.  
  25.         //事件处理，需要手工编写，必须是静态方法
  26.         private static void OnShowBorderChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
  27.         {
  28.             var grid = d as Grid;
  29.             if ((bool)e.OldValue)
  30.             {
  31.                 grid.Loaded -= (s, arg) => { };
  32.             }
  33.             if ((bool)e.NewValue)
  34.             {
  35.                 grid.Loaded += (s, arg) =>
  36.                 {
  37.                     //确定行和列数
  38.                     var rows = grid.RowDefinitions.Count;
  39.                     var columns = grid.ColumnDefinitions.Count;
  40.  
  41.                     //每个格子添加一个Border进去
  42.                     for (int i = 0; i < rows; i++)
  43.                     {
  44.                         for (int j = 0; j < columns; j++)
  45.                         {
  46.                             var border = new Border() { BorderBrush = new SolidColorBrush(Colors.Gray), BorderThickness = new Thickness(1) };
  47.                             Grid.SetRow(border, i);
  48.                             Grid.SetColumn(border, j);
  49.  
  50.                             grid.Children.Add(border);
  51.                         }
  52.                     }
  53.                 };
  54.             }
  55.         }
  56.     }
  57. }
  1. <Window x:Class="GridLineTest.MainWindow"
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  6.         xmlns:local="clr-namespace:GridLineTest"
  7.         xmlns:ext="clr-namespace:Helper"
  8.         mc:Ignorable="d"
  9.         Title="MainWindow" Height="450" Width="800">
  10.     <Grid Width="600" Height="400" ext:GridLineHelper.ShowBorder="True">
  11.         <Grid.Resources>
  12.             <Style TargetType="TextBlock">
  13.                 <Setter Property="FontSize" Value="30"></Setter>
  14.                 <Setter Property="HorizontalAlignment" Value="Center"></Setter>
  15.                 <Setter Property="VerticalAlignment" Value="Center"></Setter>
  16.             </Style>
  17.             <Style TargetType="Border">
  18.                 <Setter Property="BorderBrush" Value="Red"></Setter>
  19.                 <Setter Property="BorderThickness" Value="1"></Setter>
  20.             </Style>
  21.         </Grid.Resources>
  22.         <Grid.RowDefinitions>
  23.             <RowDefinition></RowDefinition>
  24.             <RowDefinition></RowDefinition>
  25.             <RowDefinition></RowDefinition>
  26.         </Grid.RowDefinitions>
  27.         <Grid.ColumnDefinitions>
  28.             <ColumnDefinition></ColumnDefinition>
  29.             <ColumnDefinition></ColumnDefinition>
  30.             <ColumnDefinition></ColumnDefinition>
  31.         </Grid.ColumnDefinitions>
  32.         <TextBlock Text="A01" Grid.Row="0" Grid.Column="0"></TextBlock>
  33.         <TextBlock Text="A02" Grid.Row="0" Grid.Column="1"></TextBlock>
  34.         <TextBlock Text="A03" Grid.Row="0" Grid.Column="2"></TextBlock>
  35.         <TextBlock Text="A11" Grid.Row="1" Grid.Column="0"></TextBlock>
  36.         <TextBlock Text="A12" Grid.Row="1" Grid.Column="1"></TextBlock>
  37.         <TextBlock Text="A13" Grid.Row="1" Grid.Column="2"></TextBlock>
  38.         <TextBlock Text="A21" Grid.Row="2" Grid.Column="0"></TextBlock>
  39.         <TextBlock Text="A22" Grid.Row="2" Grid.Column="1"></TextBlock>
  40.         <TextBlock Text="A23" Grid.Row="2" Grid.Column="2"></TextBlock>
  41.     </Grid>
  42. </Window>

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

  1. using System.Windows;
  2. using System.Windows.Controls;
  3. using System.Windows.Media;
  4.  
  5. namespace Helper
  6. {
  7.     public class GridLineHelper
  8.     {
  9.  
  10.         #region 可以通过propa快捷方式生成下面段代码
  11.         public static bool GetShowBorder(DependencyObject obj)
  12.         {
  13.             return (bool)obj.GetValue(ShowBorderProperty);
  14.         }
  15.  
  16.         public static void SetShowBorder(DependencyObject obj, bool value)
  17.         {
  18.             obj.SetValue(ShowBorderProperty, value);
  19.         }
  20.  
  21.         public static readonly DependencyProperty ShowBorderProperty =
  22.             DependencyProperty.RegisterAttached("ShowBorder", typeof(bool), typeof(GridLineHelper), new PropertyMetadata(OnShowBorderChanged));
  23.         #endregion
  24.  
  25.         //事件处理，需要手工编写，必须是静态方法
  26.         private static void OnShowBorderChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
  27.         {
  28.             var grid = d as Grid;
  29.             string name = grid.Name;
  30.             if ((bool)e.OldValue)
  31.             {
  32.                 grid.Loaded -= (s, arg) => { };
  33.             }
  34.             if ((bool)e.NewValue)
  35.             {
  36.                 grid.Loaded += (s, arg) =>
  37.                 {
  38.                     //根据Grid中子控件的个数去添加边框，同时考虑合并的情况
  39.                     var controls = grid.Children;
  40.                     var count = controls.Count;
  41.  
  42.                     for (int i = 0; i < count; i++)
  43.                     {
  44.                         var item = controls[i] as FrameworkElement;
  45.                         var border = new Border()
  46.                         {
  47.                             BorderBrush = new SolidColorBrush(Colors.LightGray),
  48.                             BorderThickness = new Thickness(1)
  49.                         };
  50.  
  51.                         var row = Grid.GetRow(item);
  52.                         var column = Grid.GetColumn(item);
  53.                         var rowspan = Grid.GetRowSpan(item);
  54.                         var columnspan = Grid.GetColumnSpan(item);
  55.  
  56.                         Grid.SetRow(border, row);
  57.                         Grid.SetColumn(border, column);
  58.                         Grid.SetRowSpan(border, rowspan);
  59.                         Grid.SetColumnSpan(border, columnspan);
  60.  
  61.                         grid.Children.Add(border);
  62.                     }
  63.                 };
  64.             }
  65.         }
  66.     }
  67. }
  1. <Window x:Class="GridLineTest.MainWindow"
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  6.         xmlns:local="clr-namespace:GridLineTest"
  7.         xmlns:ext="clr-namespace:Helper"
  8.         mc:Ignorable="d"
  9.         Title="MainWindow" Height="450" Width="800">
  10.     <Grid Width="600" Height="400" ext:GridLineHelper.ShowBorder="True" x:Name="MyGrid">
  11.         <Grid.Resources>
  12.             <Style TargetType="TextBlock">
  13.                 <Setter Property="FontSize" Value="30"></Setter>
  14.                 <Setter Property="HorizontalAlignment" Value="Center"></Setter>
  15.                 <Setter Property="VerticalAlignment" Value="Center"></Setter>
  16.             </Style>
  17.         </Grid.Resources>
  18.         <Grid.RowDefinitions>
  19.             <RowDefinition></RowDefinition>
  20.             <RowDefinition></RowDefinition>
  21.             <RowDefinition></RowDefinition>
  22.         </Grid.RowDefinitions>
  23.         <Grid.ColumnDefinitions>
  24.             <ColumnDefinition></ColumnDefinition>
  25.             <ColumnDefinition></ColumnDefinition>
  26.             <ColumnDefinition></ColumnDefinition>
  27.         </Grid.ColumnDefinitions>
  28.         <TextBlock Text="A01" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"></TextBlock>
  29.         <!--<TextBlock Text="A02" Grid.Row="0" Grid.Column="1"></TextBlock>-->
  30.         <TextBlock Text="A03" Grid.Row="0" Grid.Column="2"></TextBlock>
  31.         <TextBlock Text="A11" Grid.Row="1" Grid.Column="0"></TextBlock>
  32.         <TextBlock Text="A12" Grid.Row="1" Grid.Column="1"></TextBlock>
  33.         <TextBlock Text="A13" Grid.Row="1" Grid.Column="2"></TextBlock>
  34.         <TextBlock Text="A21" Grid.Row="2" Grid.Column="0"></TextBlock>
  35.         <TextBlock Text="A22" Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2"></TextBlock>
  36.         <!--<TextBlock Text="A23" Grid.Row="2" Grid.Column="2"></TextBlock>-->
  37.     </Grid>
  38. </Window>

        四、补充

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

var childrens = this.MyGrid.Children.OfType<UIElement>().ToList().Except(this.MyGrid.Children.OfType<Border>().ToList()).ToList();

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/611826
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号