WPF使用Grid網(wǎng)格面板布局

更新時間：2022年02月25日 11:14:38 作者：.NET開發(fā)菜鳥

這篇文章介紹了WPF使用Grid網(wǎng)格面板布局的方法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

Grid:網(wǎng)格面板

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

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

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

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

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

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

<Window x:Class="WpfDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Grid面板" Height="237" Width="525" WindowStartupLocation="CenterScreen">
    <!--定義網(wǎng)格，此處顯示了網(wǎng)格線-->
    <Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Button Grid.Row="0" Grid.Column="0">Top Left</Button>
        <Button Grid.Row="0" Grid.Column="1">Middle Left</Button>
        <Button Grid.Row="1" Grid.Column="2">Button Right</Button>
        <Button Grid.Row="1" Grid.Column="1">Button Middle</Button>
    </Grid>
</Window>

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

2、調整行高和列寬

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

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

名稱	說明
絕對設置尺寸方式	使用設備無關單位準確地設置尺寸，就是給一個實際的數(shù)字，但通常將此值指定為整數(shù)。這是最無用的策略，因為這種策略不夠靈活，難以適應內容大小和容器大小的改變，而且難以處理本地化。
自動設置尺寸方式	值為Auto，實際作用就是取實際控件所需的最小值，每行和每列的尺寸剛好滿足需要，這是最有用的尺寸設置方式。
按比例設置尺寸方式	按比例將空間分割到一組行和列中。這是對所有行和列的標準設置。通常值為或N，實際作用就是取盡可能大的值，當某一列或行被定義為則是盡可能大，當出現(xiàn)多列或行被定義為則是代表幾者之間按比例方設置尺寸。

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

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

（1）設置100設備無關單位的絕對寬度：

<ColumnDefinition Width="100"></ColumnDefinition>

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

<ColumnDefinition Width="Auto"></ColumnDefinition>

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

<ColumnDefinition Width="*"></ColumnDefinition>

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

<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="2*"></RowDefinition>

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

<Window x:Class="WpfDemo.MainWindow"
??????? xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
??????? xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
??????? Title="Grid面板" Height="237" Width="525" WindowStartupLocation="CenterScreen">
??? <!--定義網(wǎng)格，此處顯示了網(wǎng)格線-->
??? <Grid ShowGridLines="True">
??????? <!--定義行,3行-->
??????? <Grid.RowDefinitions>
??????????? <!--自動行高-->
??????????? <RowDefinition Height="Auto"></RowDefinition>
??????????? <!--按比例行高-->
??????????? <RowDefinition Height="*"></RowDefinition>
??????????? <!--固定行高-->
??????????? <RowDefinition Height="50"></RowDefinition>
??????? </Grid.RowDefinitions>
??????? <!--定義列，2列-->
??????? <Grid.ColumnDefinitions>
??????????? <!--按比例列寬-->
??????????? <ColumnDefinition Width="*"></ColumnDefinition>???????? 
??????????? <!--固定列寬-->
??????????? <ColumnDefinition Width="200"></ColumnDefinition>
??????? </Grid.ColumnDefinitions>
??????? <!--定義元素，并指定單元格-->
??????? <TextBlock Grid.Row="0" Grid.Column="0" >第一行第一列</TextBlock>
??????? <TextBlock Grid.Row="1" Grid.Column="0" >第二行第一列</TextBlock>
??????? <TextBlock Grid.Row="2" Grid.Column="0" >第三行第一列</TextBlock>
??????? <Button Grid.Row="0" Grid.Column="1">第一行第二列</Button>
??????? <Button Grid.Row="1" Grid.Column="1">第二行第二列</Button>
??????? <Button Grid.Row="2" Grid.Column="1">第三行第二列</Button>
??? </Grid>
</Window>

運行效果圖：

3、跨越多行和多列

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

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

<Button Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2">Span Button</Button>

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

<Button Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Grid.ColumnSpan="2">Span Button</Button>

示例

1 <Window x:Class="WpfDemo.MainWindow"
 2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4         Title="Grid面板" Height="237" Width="525" WindowStartupLocation="CenterScreen">
 5     <!--定義網(wǎng)格，此處顯示了網(wǎng)格線-->
 6     <Grid ShowGridLines="True">              
 7         <Grid.RowDefinitions>
 8             <RowDefinition Height="*"></RowDefinition>
 9             <RowDefinition Height="Auto"></RowDefinition>
10         </Grid.RowDefinitions>
11         <Grid.ColumnDefinitions>
12             <ColumnDefinition Width="*"></ColumnDefinition>
13             <ColumnDefinition Width="Auto"></ColumnDefinition>
14             <ColumnDefinition Width="Auto"></ColumnDefinition>
15         </Grid.ColumnDefinitions>
16         <TextBox Margin="10" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3">thie is a test</TextBox>
17         <Button Margin="10,10,2,10" Padding="3" Grid.Row="1" Grid.Column="1">OK</Button>
18         <Button Margin="10,10,2,10" Padding="3" Grid.Row="1" Grid.Column="2">Cancle</Button>
19     </Grid>
20 </Window>

界面運行效果：

4、分割窗口

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

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

<Window x:Class="WpfDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Grid面板" Height="237" Width="525" WindowStartupLocation="CenterScreen">
    <!--定義網(wǎng)格，此處顯示了網(wǎng)格線-->
    <Grid ShowGridLines="True">              
        <Grid.RowDefinitions>
            <RowDefinition ></RowDefinition>
            <RowDefinition ></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100"></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition Width="50"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Button Grid.Row="0" Grid.Column="0" Margin="3">Left</Button>
        <Button Grid.Row="0" Grid.Column="2" Margin="3">Right</Button>
        <Button Grid.Row="1" Grid.Column="0" Margin="3">Left</Button>
        <Button Grid.Row="1" Grid.Column="2" Margin="3">Right</Button>
        
        <GridSplitter Grid.Row="0" Grid.Column="1" Grid.RowSpan="2" Width="3" VerticalAlignment="Stretch"
                      HorizontalAlignment="Center" ShowsPreview="False"></GridSplitter>
    </Grid>
</Window>

界面運行效果：

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

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

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

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

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

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

到此這篇關于WPF使用Grid網(wǎng)格面板布局的文章就介紹到這了。希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

使用asp.net的pageDataSource中時索引問題解決方法
當前頁面在數(shù)據(jù)的除第一頁的任何一個頁面時，重新條件查詢并且是新條件的總頁數(shù)小于剛才查詢得到的頁碼時，就會出現(xiàn)“索引 20 不是為負數(shù)，就是大于行數(shù)”的類似的錯誤
2013-04-04
asp.net的公共變量聲明問題（解決）
前段時間有個項目中登錄的時候碰到了聲明公共變量的情況，用戶類型分為二種類型，所以不同類型用戶登錄的時候所走的情況不一樣，目前用AB分別代表二類用戶。
2013-03-03
asp.net TemplateField模板中的Bind方法和Eval方法
在TemplateField模板中為了能夠有限制的或者取出數(shù)據(jù)庫中某列的值時，可以用Bind和Eval方法來實現(xiàn)。以下是Bind方法的格式，Eval的格式也是和Bind一樣的。 Bind("列的名稱","顯示的格式文")
2009-06-06
ASP.NET在IIS7中上下文中不可用的解決方法
執(zhí)行當前 Web 請求期間，出現(xiàn)未處理的異常。請檢查堆棧跟蹤信息，以了解有關該錯誤以及代碼中導致錯誤的出處的詳細信息。
2011-02-02
C#中常用的IO操作介紹
這篇文章介紹了C#中常用的IO操作，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-06-06
詳解GridView自帶的編輯刪除更新功能
本文主要介紹了GridView自帶的編輯、刪除、更新功能實現(xiàn)的方法。具有一定的參考價值，需要的朋友一起來看下吧
2016-12-12
gridview實現(xiàn)服務器端和客戶端全選的兩種方法分享
這篇文章主要介紹了gridview實現(xiàn)服務器端和客戶端全選的兩種方法,需要的朋友可以參考下
2014-02-02
Asp.net中時間格式化的6種方法詳細總結
數(shù)據(jù)控件綁定時格式化日期方法/用DataBinder.Eval進行數(shù)據(jù)綁定時/直接用ToString方法轉換日期顯示格式/用String類轉換日期顯示格式等等，感興趣的你了解下哦，或許對你學習時間格式化有所幫助
2013-02-02
ASP.NET repeater添加序號列的方法
在項目開發(fā)過程中，會經(jīng)常遇到ASP.NET repeater控件添加序號列，有些新手可能還不會，網(wǎng)上搜集整理了一些，需要的朋友可以參考下
2012-11-11
微信公眾平臺開發(fā)之發(fā)送文本消息.Net代碼解析
這篇文章主要為大家詳細解析了微信公眾平臺開發(fā)之發(fā)送文本消息.Net代碼，感興趣的小伙伴們可以參考一下
2016-06-06