亚洲欧美偷拍另类,日韩精品二,成人午夜一区二区

為WPF和Silverlight的Grid添加邊框線

轉帖|其它|編輯：郝浩|2011-09-23 14:03:16.000|閱讀 1371 次

概述：Grid是WPF和Silverlight中的一個重要的布局元素，其他的布局元素還有StackPanel, Canvas, Border等等。從字面上說，Grid是一個表格的意思，它的使用也確實很方便，從視覺上很像一個表格的樣式，有行，有列的概念，這種效果很適合于需要多多個子控件進行布局，并希望保持左邊或者上對齊的效果。

# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

　　Grid是WPF和Silverlight中的一個重要的布局元素，其他的布局元素還有StackPanel, Canvas, Border等等。從字面上說，Grid是一個表格的意思，它的使用也確實很方便，從視覺上很像一個表格的樣式，有行，有列的概念，這種效果很適合于需要多多個子控件進行布局，并希望保持左邊或者上對齊的效果。

　　我們來看一個最簡單的例子（本文采用Silverlight做演示，在WPF中也是一樣的）

　　使用Grid的時候，一般先定義Grid的行和列的設置，然后在其放置其他控件并且設置他們的行號和列號即可，語法和語義都很簡單和清晰

　　 </Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>

　　嗯，看起來很好理解的。但是，幾乎所有人（包括我在內）在最開始學習的時候，馬上就會想到一個問題：

　　既然是用一個表格形狀進行布局了，那么能不能顯示出來表格的邊框線呢？

　　沒想到這會是一個問題，對吧？或者你想到過了，但沒有找到如何解決這個問題。

　　如果是這樣，那么請繼續往下看吧

　　本文完整源代碼，可以通過這里下載

　　//files.cnblogs.com/chenxizhang/SilverlightApplicationGridBorderSample.rar　

第一步：使用ShowGridLines屬性

　　根據經驗，我們會先從Grid這個元素上面去想辦法。我們確實可以找到一個與我們需求很相近的屬性：ShowGridLines，好吧，將它設為true之后，會怎么樣呢

　　 </Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>

　　哦，看起來確實有邊框了。但是，效果卻不理想。這個邊框線是虛線，坦白說，不是那么好看。從MSDN文檔中我們了解到，這個邊框線只是用來輔助我們做調試用的，而不適宜于在真正的產品中用。

　　私下里說，我并不認為這是一個好的設計，為什么不提供實線（甚至可以由開發人員配置）的邊框呢

第二步：使用手工定義的方式實現Grid邊框線

　　我們希望給Grid自動添加邊框，應該怎么實現呢？其實，如果僅僅是給一個Grid添加的話，手工寫一點代碼就可以了

　　 </Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>

　　所以，其實我們可以手工添加Border（文章開頭提到幾個布局元素中，只有Border有邊框線）實現我們的需求。

　　但問題在于，如果有很多Grid，都要這么去添加總是不好的吧，有沒有辦法更好地實現這樣功能呢

第三步：使用附加依賴屬性（Attached Dependency Property)實現Grid邊框線

　　既然官方并沒有提供我們需要的邊框線，那么我們就自己來實現一個吧。事實上，這并沒有多難，尤其是你理解了WPF和Silvelight中一些核心的概念的情況下，這些概念包括依賴屬性和附加依賴屬性。

　　對這兩個概念，大家可以參考上面我給出的兩個鏈接，這里我就簡單地說幾句吧，
依賴屬性(Dependency Property)是WPF和Silverlight較之前的編程模型的一個核心改變，它使得基于綁定的編程變得可能，這個大家多少有些體會了，在WPF 和Silverlight中，綁定無處不在，而且功能確實強大，尤其是雙向綁定及自動通知，減少了很多很多的用戶代碼。
附加屬性(Attached Property)，則是另外一種場景，它一般用來對現有控件或者元素進行擴展。其實，我們之前的XAML中已經用到了附加屬性，請看下面的部分

　　TextBlock這個元素，其實并沒有行和列的概念，或者說它也不需要，除非它是放在一個Grid里面的時候。所以，行和列并不是 TextBlock的屬性，但是如果將它放在Grid里面，不提供這些信息又不行，所以附加屬性就應運而生了。Grid.Row和Grid.Column 就是附加屬性，很顯然，有了附加屬性，我們就可以在不改變TextBlock的前提下，為它添加很多特性或者功能。

　　理解了附加屬性，我們來說說現在我們要解決的問題：

　　我們能不能自動給每個Grid添加一個屬性，讓它可以為自己添加必要的邊框線呢？

　　答案就是附加屬性。

　　請添加一個代碼文件，將下面代碼粘貼進去

　　using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

　　namespace SilverlightApplicationGridBorderSample
{
/// <summary>
/// 為Grid添加的一個特殊功能
/// 作者：陳希章
/// 反饋：ares@xizhang.com
/// </summary>
public class GridHelper
{

　　 //請注意：可以通過propa這個快捷方式生成下面三段代碼

　　 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(GridHelper), new PropertyMetadata(OnShowBorderChanged));

　　 //這是一個事件處理程序，需要手工編寫，必須是靜態方法
private static void OnShowBorderChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var grid = d as Grid;
if((bool)e.OldValue)
{
grid.Loaded -= (s, arg) => { };
}
if((bool)e.NewValue)
{
grid.Loaded += (s, arg) =>
{
//確定行和列數
var rows = grid.RowDefinitions.Count;
var columns = grid.ColumnDefinitions.Count;

　　 //每個格子添加一個Border進去
for(int i = 0; i < rows; i++)
{
for(int j = 0; j < columns; j++)
{
var border = new Border() { BorderBrush = new SolidColorBrush(Colors.Gray), BorderThickness = new Thickness(1) };
Grid.SetRow(border, i);
Grid.SetColumn(border, j);

　　 grid.Children.Add(border);
}
}

　　 };
}

　　 }

　　上面的代碼應該很好理解，我們是用代碼實現了與手工添加Border一樣的功能，奧妙在于，Grid有一個Loaded事件，我們完全可以在這個事件里面，根據計算得到的行和列去添加Border。

　　如何在頁面中使用我們附加屬性呢？我們需要在XAML中稍做修改

　　 <Grid.Resources>
<Style
TargetType="TextBlock">
<Setter
Property="FontSize"
Value="30"></Setter>
<Setter
Property="VerticalAlignment"
Value="Center"></Setter>
</Style>
</Grid.Resources>

　　 <Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>

　　 </Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>

　　請注意，我們只需要導入命名空間，然后在Grid上面設置ext:GridHelper.ShowBorder="True" 即可。這就是附加屬性的神奇之處

　　看起來不錯對吧？先不要著急，看看另外一個情況，加入我們希望把第一行的兩列進行合并（ColumnSpan)的話，會怎么樣呢？

　　 <Grid.Resources>
<Style
TargetType="TextBlock">
<Setter
Property="FontSize"
Value="30"></Setter>
<Setter
Property="VerticalAlignment"
Value="Center"></Setter>
</Style>
</Grid.Resources>

　　 <Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>

　　 </Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>

　　我們看到，雖然確實第一行是合并了，但是邊框線卻仍然有兩個，也就是說，我們在添加Border的時候，沒有考慮到行或者列合并的情況。這樣就不是特別理想了。我們下面要改進這個屬性。

第四步：改進附加屬性適應行和列的合并情況

　　請注意，將代碼做如下的改動

　　using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

　　namespace SilverlightApplicationGridBorderSample
{
/// <summary>
/// 為Grid添加的一個特殊功能
/// 作者：陳希章
/// 反饋：ares@xizhang.com
/// </summary>
public class GridHelper
{

　　 //請注意：可以通過propa這個快捷方式生成下面三段代碼

　　 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(GridHelper), new PropertyMetadata(OnShowBorderChanged));

　　 //這是一個事件處理程序，需要手工編寫，必須是靜態方法
private static void OnShowBorderChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var grid = d as Grid;
if((bool)e.OldValue)
{
grid.Loaded -= (s, arg) => { };
}
if((bool)e.NewValue)
{
grid.Loaded += (s, arg) =>
{
//改進后的做法，不是簡單地根據行和列，而是根據Grid的頂層子控件的個數去添加邊框，同時考慮合并的情況
var controls = grid.Children;
var count = controls.Count;

　　 for(int i = 0; i < count; i++)
{
var item = controls[i] as FrameworkElement;
var border = new Border()
{
BorderBrush = new SolidColorBrush(Colors.LightGray),
BorderThickness = new Thickness(1)
};

　　 var row = Grid.GetRow(item);
var column = Grid.GetColumn(item);
var rowspan = Grid.GetRowSpan(item);
var columnspan = Grid.GetColumnSpan(item);

　　 Grid.SetRow(border, row);
Grid.SetColumn(border, column);
Grid.SetRowSpan(border, rowspan);
Grid.SetColumnSpan(border, columnspan);

　　 grid.Children.Add(border);

　　 }

　　 };
}

　　 }

　　改動之后的效果明顯比較理想了，它考慮到了行和列的合并的情況。那么，事情結束了么？先不要著急，我們再來做一個事情，假設我們希望每個單元格中的內容都與邊框（左，上，右，下）有一定的距離，怎么實現呢？

　　我們會自然聯想到，給Border設置Padding屬性就可以了吧，那么試試吧

　　using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

　　namespace SilverlightApplicationGridBorderSample
{
/// <summary>
/// 為Grid添加的一個特殊功能
/// 作者：陳希章
/// 反饋：ares@xizhang.com
/// </summary>
public class GridHelper
{

　　 //請注意：可以通過propa這個快捷方式生成下面三段代碼

　　 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(GridHelper), new PropertyMetadata(OnShowBorderChanged));

　　 //這是一個事件處理程序，需要手工編寫，必須是靜態方法
private static void OnShowBorderChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var grid = d as Grid;
if((bool)e.OldValue)
{
grid.Loaded -= (s, arg) => { };
}
if((bool)e.NewValue)
{
grid.Loaded += (s, arg) =>
{
//改進后的做法，不是簡單地根據行和列，而是根據Grid的頂層子控件的個數去添加邊框，同時考慮合并的情況
var controls = grid.Children;
var count = controls.Count;

　　 for(int i = 0; i < count; i++)
{
var item = controls[i] as FrameworkElement;
var border = new Border()
{
BorderBrush = new SolidColorBrush(Colors.LightGray),
BorderThickness = new Thickness(1),
Padding= new Thickness(10)
};

　　 var row = Grid.GetRow(item);
var column = Grid.GetColumn(item);
var rowspan = Grid.GetRowSpan(item);
var columnspan = Grid.GetColumnSpan(item);

　　 Grid.SetRow(border, row);
Grid.SetColumn(border, column);
Grid.SetRowSpan(border, rowspan);
Grid.SetColumnSpan(border, columnspan);

　　 grid.Children.Add(border);

　　 }

　　 };
}

　　 }

　　看起來是可以的，但是運行起來，情況好像沒有什么變化。我們的文字與邊框仍然沒有任何距離。

　　這是為什么呢？既然Border設置了Padding屬性，那么又為什么實現不了我們需要的效果呢？
其實很簡單，Border的 Padding屬性只影響它內部的子元素或者控件。我們上面的代碼，只是創建了Border，并且將其添加到Grid的Chiildren里面去。但并沒有將那些TextBlock移動到Border里面去，所以就實現不了Padding效果了。

第五步：移動TextBlock到相應的Border

　　using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

　　namespace SilverlightApplicationGridBorderSample
{
/// <summary>
/// 為Grid添加的一個特殊功能
/// 作者：陳希章
/// 反饋：ares@xizhang.com
/// </summary>
public class GridHelper
{

　　 //請注意：可以通過propa這個快捷方式生成下面三段代碼

　　 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(GridHelper), new PropertyMetadata(OnShowBorderChanged));

　　 //這種做法自動將控件移動到Border里面來
var controls = grid.Children;
var count = controls.Count;

　　 var row = Grid.GetRow(item);
var column = Grid.GetColumn(item);
var rowspan = Grid.GetRowSpan(item);
var columnspan = Grid.GetColumnSpan(item);

　　 Grid.SetRow(border, row);
Grid.SetColumn(border, column);
Grid.SetRowSpan(border, rowspan);
Grid.SetColumnSpan(border, columnspan);

　　 grid.Children.RemoveAt(i);
border.Child = item;
grid.Children.Insert(i, border);

　　 }
};
}

　　 }

　　為了大家看到效果，我將Padding設置為20. 請注意，上述代碼中，我們先從Grid中移除掉了有關的控件，然后將這些控件添加到Border里面去了。此所謂移花接木也。大家可以看到，現在每個格子里面的內容都與邊框有一定的距離了。