WPF如何利用附加屬性修改ShowGridLines效果詳解

更新時間：2018年04月13日 11:32:33 作者：冷火蟲

這篇文章主要給大家介紹了關(guān)于WPF如何利用附加屬性修改ShowGridLines效果的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。

前言

附加屬性是說一個屬性本來不屬于某個對象，但由于某種需求而被后來附加上，也就是把對象放入一個特定環(huán)境后對象才具有的屬性就稱為附加屬性，附加屬性的作用就是將屬性與數(shù)據(jù)類型解耦，讓數(shù)據(jù)類型的設(shè)計更加靈活，舉例，一個TextBox被放在不同的布局容器中時就會有不同的布局屬性，這些屬性就是由布局容器為TextBox附加上的，附加屬性的本質(zhì)就是依賴屬性，二者僅僅在注冊和包裝器上有一點區(qū)別

小技巧，在VS中輸入propa后，連按兩次tab鍵，可以添加好一個附加屬性的框架，繼續(xù)按tab鍵，可以繼續(xù)修改附加屬性的內(nèi)容

本文主要介紹的是關(guān)于WPF用附加屬性修改ShowGridLines效果的相關(guān)內(nèi)容，下面話不多說了，來一起看看詳細(xì)的介紹吧。

1.思路主要代碼

wpf的gridline原本效果是虛線類型的。有時候需要設(shè)計成表格形式的，因此有了用附加屬性來自動繪制邊框線的想法。

思路：繪制Line并添加到grid的children里，但效果并不理想，會出現(xiàn)鋸齒，像素對齊，模糊等問題。

UseLayoutRounding="False"
SnapsToDevicePixels="True"

RenderOptions.EdgeModeProperty 貌似都沒起作用。

于是想到了用border來實現(xiàn)，簡單又實用吧哈哈。

大致思路如下：

繪制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.效果圖

效果還可以，任何分辨率下，任何邊框大小，都沒有出現(xiàn)像素對齊或者模糊問題。圖中的虛線是grid的默認(rèn)gridLine，紅色和綠色是自定義的gridline，跟虛線完美重合。