WPF如何利用附加属性修改ShowGridLines效果详解

前言

附加属性是说一个属性本来不属于某个对象，但由于某种需求而被后来附加上，也就是把对象放入一个特定环境后对象才具有的属性就称为附加属性，附加属性的作用就是将属性与数据类型解耦，让数据类型的设计更加灵活，举例，一个textbox被放在不同的布局容器中时就会有不同的布局属性，这些属性就是由布局容器为textbox附加上的，附加属性的本质就是依赖属性，二者仅仅在注册和包装器上有一点区别

小技巧，在vs中输入propa后，连按两次tab键，可以添加好一个附加属性的框架，继续按tab键，可以继续修改附加属性的内容

本文主要介绍的是关于wpf用附加属性修改showgridlines效果的相关内容，下面话不多说了，来一起看看详细的介绍吧。

1.思路主要代码

wpf的gridline原本效果是虚线类型的。有时候需要设计成表格形式的，因此有了用附加属性来自动绘制边框线的想法。

思路：绘制line并添加到grid的children里，但效果并不理想，会出现锯齿，像素对齐，模糊等问题。

uselayoutrounding="false"
snapstodevicepixels="true"

renderoptions.edgemodeproperty 貌似都没起作用。

于是想到了用border来实现，简单又实用吧 哈哈。

大致思路如下：

绘制border的左边框和上边框，在边界的时候考虑边界封闭。然后将border平移一半的距离。这样边框就居中并且包围了所有的线。

主要代码如下：

using system.windows;
using system.windows.controls;
using system.windows.media;
namespace 用附加属性修改grid的边框
{
 public class gridhelper
 {
  private static void refreshgrid(grid grid, int linewidth, brush color)
  {
   for (var i = grid.children.count - 1; i > 0; i--)
   {
    var child = grid.children[i];
    var bd = child as border;
    if (bd != null && bd.tag != null && bd.tag.tostring() == "gridline")
    {
     grid.children.remove(bd);
    }
   }
   var rows = grid.rowdefinitions.count;
   var cols = grid.columndefinitions.count;
   //边界考虑
   if (rows == 0)
   {
    rows = 1;
   }
   if (cols == 0)
   {
    cols = 1;
   }
   //生成行列
   for (var i = 0; i < rows; i++)
   {
    for (var j = 0; j < cols; j++)
    {
     var thick = new thickness(linewidth, linewidth, 0, 0);
     var margin = new thickness(-linewidth/2d, -linewidth/2d, 0, 0);
     //边界考虑
     if (i == 0)
     {
      margin.top = 0;
     }
     if (i == rows - 1)
     {
      thick.bottom = linewidth;
     }
     if (j == 0)
     {
      margin.left = 0;
     }
     if (j == cols - 1)
     {
      thick.right = linewidth;
     }
     var bd = new border
     {
      borderthickness = thick,
      margin = margin,
      borderbrush = color,
      tag = "gridline"
     };
     grid.setrow(bd, i);
     grid.setcolumn(bd, j);
     grid.children.add(bd);
    }
   }
   grid.invalidatearrange();
   grid.invalidatevisual();
  }
 
  #region 线颜色
  // using a dependencyproperty as the backing store for linecolor. this enables animation, styling, binding, etc...
  public static readonly dependencyproperty linecolorproperty =
   dependencyproperty.registerattached("linecolor", typeof (brush), typeof (gridhelper),
    new propertymetadata(brushes.black, linecolorpropertychanged));
 
  public static brush getlinecolor(dependencyobject obj)
  {
   return (brush) obj.getvalue(linecolorproperty);
  }
 
  public static void setlinecolor(dependencyobject obj, brush value)
  {
   obj.setvalue(linecolorproperty, value);
  }
 
 
  private static void linecolorpropertychanged(dependencyobject d, dependencypropertychangedeventargs e)
  {
   var grid = d as grid;
   if (grid == null)
   {
    return;
   }
   var showlines = getshowgridlines(grid);
   var color = getlinecolor(grid);
   var linewidth = getlinewidth(grid);
   if (showlines)
   {
    // grid.snapstodevicepixels = true;
    grid.loaded += delegate { refreshgrid(grid, linewidth, color); };
   }
  }
 
  #endregion 
  #region 线宽度 
  // using a dependencyproperty as the backing store for linewidth. this enables animation, styling, binding, etc...
  public static readonly dependencyproperty linewidthproperty =
   dependencyproperty.registerattached("linewidth", typeof (int), typeof (gridhelper),
    new propertymetadata(1, linewidthpropertychanged)); 
  public static int getlinewidth(dependencyobject obj)
  {
   return (int) obj.getvalue(linewidthproperty)
    ;
  }
 
 
  public static void setlinewidth(dependencyobject obj, int value)
  {
   obj.setvalue(linewidthproperty, value);
  }
 
 
  private static void linewidthpropertychanged(dependencyobject d, dependencypropertychangedeventargs e)
  {
   var grid = d as grid;
   if (grid == null)
   {
    return;
   }
   var showlines = getshowgridlines(grid);
   var color = getlinecolor(grid);
   var linewidth = getlinewidth(grid);
   if (showlines)
   {
    // grid.snapstodevicepixels = true;
    grid.loaded += delegate { refreshgrid(grid, linewidth, color); };
   }
  }
 
  #endregion
  #region 是否显示线
  // using a dependencyproperty as the backing store for showgridlines. this enables animation, styling, binding, etc...
  public static readonly dependencyproperty showgridlinesproperty =
   dependencyproperty.registerattached("showgridlines", typeof (bool), typeof (gridhelper),
    new propertymetadata(false, showgridlinespropertychanged));
 
  public static bool getshowgridlines(dependencyobject obj)
  {
   return (bool) obj.getvalue(showgridlinesproperty);
  }
 
  public static void setshowgridlines(dependencyobject obj, bool value)
  {
   obj.setvalue(showgridlinesproperty, value);
  }
 
 
  private static void showgridlinespropertychanged(dependencyobject d, dependencypropertychangedeventargs e)
  {
   var grid = d as grid;
   if (grid == null)
   {
    return;
   }
   var showlines = getshowgridlines(grid);
   var color = getlinecolor(grid);
   var linewidth = getlinewidth(grid);
   if (showlines)
   {
    // grid.snapstodevicepixels = true;
    grid.loaded += delegate { refreshgrid(grid, linewidth, color); };
   }
  }
  #endregion
 }
}

　　

2.效果图

效果还可以，任何分辨率下，任何边框大小，都没有出现像素对齐或者模糊问题。 图中的虚线是grid的默认gridline，红色和绿色是自定义的gridline，跟虚线完美重合。

 

3.源码下载

下载地址：http://xiazai.jb51.net/201804/yuanma/wpf-fujia-showgridlines(jb51.net).rar

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对的支持。