Grid:網(wǎng)格面板

Grid顧名思義就是“網(wǎng)格”，以表格形式布局元素，對于整個面板上的元素進行布局，它的子控件被放在一個一個事先定義好的小格子里面，整齊配列。?Grid和其他各個Panel比較起來，功能最多也最為復(fù)雜。要使用Grid，首先要向RowDefinitions和ColumnDefinitions屬性中添加一定數(shù)量的RowDefinitions和?ColumnDefinitions元素，從而定義行數(shù)和列數(shù)。而放置在Grid面板中的控件元素都必須顯示采用Row和Column附加屬性定義其放置所在的行和列，這兩個屬性的值都是從0開始的索引數(shù)，如果沒有顯式設(shè)置任何行或列，Grid將會隱式地將控件加入在第0行第0列。由于Grid的組成并非簡單的添加屬性標記來區(qū)分行列，這也使得用戶在實際應(yīng)用中可以具體到某一單?元格中，所以布局起來就很精細了。?列寬和行高，分別可以在ColumnDefinition、RowDefinition里面指定Width、Height的值。

Grid的單元格可以是空的，一個單元格中可以有多個元素，而在單元格中元素是根據(jù)它們的Z順序一個接著一個呈現(xiàn)的。與Canvas一樣，同一個單元格中?的子元素不會與其他元素交互布局，信息——它們僅僅是重疊而已。

Grid面板將元素分割到不可見的行列網(wǎng)格中。盡管可以在一個單元格中放置多個元素（這時這些元素會相互重疊），但在每個單元格中只放置一個元素通常更合理。當然，在Grid單元格中的元素本身也可能是另一個容器，該容器組織它所包含的一組控件。

注意：盡管Grid面板被設(shè)計成不可見的，但可將Grid.ShowGridLines屬性設(shè)置為True，從而更清晰的觀察Grid面板，方便調(diào)試，可以更準確地控制Grid面板如何選擇列寬和行高。

1、定義一個兩行三列的Grid，在每個單元格里面放置一個Button按鈕

使用XAML代碼實現(xiàn)：

    
    
        
            
            
        
        
            
            
            
        
        Top Left
        Middle Left
        Button Right
        Button Middle
    

注意：如果不知道Grid.Row屬性，Grid面板會假定該屬性的值為0。對于Grid.Column屬性也是如此。因此，在Grid面板的第一個單元格中放置元素時可不指定這兩個屬性值。

2、?調(diào)整行高和列寬

如果Grid面板只是按比例分配尺寸的行和列的集合，它也就沒有什么用處了。為了充分發(fā)揮Grid面板的潛能，可更改每一行和每一列的尺寸設(shè)置方式。

Grid面板支持以下三種設(shè)置尺寸的方式：

為了獲得最大的靈活性，可混合使用這三種尺寸設(shè)置方式。例如，創(chuàng)建幾個自動設(shè)置尺寸的行，然后通過按比例設(shè)置尺寸的方式讓最后的一行或兩行充滿剩余的空間，這通常是很有用的。

可通過設(shè)置ColumnDefinition對象的Width屬性或者RowDefinition對象的Height屬性來確定尺寸設(shè)置方式。

（1）設(shè)置100設(shè)備無關(guān)單位的絕對寬度：

（2）使用自動尺寸設(shè)置方式，需要使用Auto值

（3）使用按比例尺寸設(shè)置方式，需要使用星號(*)

如果希望不均勻的分割剩余空間，可指定權(quán)重，權(quán)重必須放在星號之前。例如，如果有兩行是按比例設(shè)置尺寸，并希望第一行的高度是第二行高度的一半，那么可以使用如下設(shè)置來分配剩余空間：

使用XAML代碼定義一個3行4列的Grid

??? 
??? 
??????? 
??????? 
??????????? 
??????????? 
??????????? 
??????????? 
??????????? 
??????????? 
??????? 
??????? 
??????? 
??????????? 
??????????? ???????? 
??????????? 
??????????? 
??????? 
??????? 
??????? 第一行第一列
??????? 第二行第一列
??????? 第三行第一列
??????? 第一行第二列
??????? 第二行第二列
??????? 第三行第二列
??? 

運行效果圖：

3、跨越多行和多列

除了可以使用Row和Column附加屬性在單元格中放置元素，還可以使用另外兩個附加屬性使元素跨越多個單元格，這兩個附加屬性是RowSpan和ColumnSpan。

例如，下面的按鈕將占據(jù)第一行中的第一個和第二個單元格的所有空間：

Span Button

下面的代碼通過跨越兩行和兩列，拉伸按鈕使其占據(jù)所有4個單元格：

Span Button

示例

1 
 5     
 6                   
 7         
 8             
 9             
10         
11         
12             
13             
14             
15         
16         thie is a test
17         OK
18         Cancle
19     
20 

界面運行效果：

4、分割窗口

每個Windows用戶都見過分隔條—能將窗口的一部分與另一部分分類的可拖動分割器。例如，當使用Windows資源管理器時，會看到一系列文件夾（在左邊）和一系列文件（在右邊）。可拖動它們之間的分隔條來確定每部分占據(jù)窗口的比例。

在WPF中，分隔條由GridSplitter類表示，它是Grid面板的功能之一。通過為Grid面板添加GridSplitter對象，用戶就可以改變行和列的尺寸。例如：

    
                  
        
            
            
        
        
            
            
            
        
        Left
        Right
        Left
        Right
        
        
    

界面運行效果：

可以通過拖動中間的分割條，來改變兩列的相對寬度，效果如下圖所示：

注意：為了成功地創(chuàng)建GridSplitter對象，務(wù)必為VerticalAlignment（垂直對齊方式）、HorizontalAlignment（水平對齊方式）以及width屬性（或Height屬性）提供相應(yīng)的屬性值。

理解如何使用GridSplitter類，從而得到所期望的效果需要一定的經(jīng)驗，下面列出幾條指導(dǎo)原則：

• （1）GridSplitter對象必須放在Grid單元格中，可與以及存在的內(nèi)容一并放到單元格中，這時需要調(diào)整邊距設(shè)置，使他們不相互重疊。更好的方法是預(yù)留一列或一行專門用于放置GridSplitter對象，并將預(yù)留行或列的Height或Width屬性的值設(shè)置為Auto。
• （2）GridSplitter對象總是改變整行或整列的尺寸（而非改變單個單元格的尺寸）。為使GridSplitter對象的外觀和行為保持一致，需要拉伸GridSplitter對象使其穿越整行或整列，而不是將其限制在單元格中。為此，可使用RowSpan或ColumnSpan屬性。例如，上面的例子中GridSplitter對象的RowSpan屬性設(shè)置為2，因此被拉伸充滿整列。如果不使用該設(shè)置，GridSplitter對象會顯示在頂行（放置它的行）中，即使這樣，拖動分隔條時也會改變整列的尺寸。
• （3）GridSplitter對象很小不易看見，為了使其更可用，需要為其設(shè)置最小尺寸。在上面的例子中，對于垂直分隔條，需要將VerticalAlignment屬性設(shè)置為Stretch（使分隔條填滿區(qū)域的整個高度），并將Width設(shè)置為固定值。對于水平分隔條，需要設(shè)置HorizontalAlignment屬性來拉伸，并將Height屬性設(shè)置為固定值。
• （4）GridSplitter對齊方式還決定了分隔條是水平的（用于改變行的尺寸）還是豎直的（用于改變列的尺寸）。對于水平分隔條，需要將VerticalAlignment屬性設(shè)置為Center（這也是默認值），以指明拖動分隔條改變上面行和下面行的尺寸。對于垂直分隔條，需要將HorizontalAlignment屬性設(shè)置為Center，以改變分隔條兩側(cè)列的尺寸。

在上面的例子中還包含了一處額外的細節(jié)。在聲明GridSplitter對象時，將ShowPreview屬性設(shè)置為false，因此，當把分隔條從一邊拖到另一邊時，會立即改變列的尺寸。但是如果將ShowPreview屬性設(shè)置為true，當拖到分隔條時就會看到一個灰色的陰影跟隨鼠標指針，用于顯示將在何處進行分割。并且直到釋放了鼠標鍵之后列的尺寸才改變。如果GridSplitter對象獲得了焦點，也可以使用箭頭鍵改變相應(yīng)的尺寸。?

提示：可以改變GridSplitter對象的填充方式，使其不只是具有陰影的灰色矩形。技巧是使用Background屬性應(yīng)用填充，該屬性可以接收簡單的顏色或更復(fù)雜的畫刷。