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

這篇文章主要講解了“WPF中怎么使用Grid網(wǎng)格面板布局”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“WPF中怎么使用Grid網(wǎng)格面板布局”吧！

Grid:網(wǎng)格面板

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

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

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

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

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

使用XAML代碼實(shí)現(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面板會(huì)假定該屬性的值為0。對(duì)于Grid.Column屬性也是如此。因此，在Grid面板的第一個(gè)單元格中放置元素時(shí)可不指定這兩個(gè)屬性值。

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

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

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

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

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

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

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

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

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

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

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

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

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

使用XAML代碼定義一個(gè)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>
            <!--自動(dòng)行高-->
            <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>

運(yùn)行效果圖：

3、跨越多行和多列

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

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

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

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

<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>

界面運(yùn)行效果：

4、分割窗口

每個(gè)Windows用戶(hù)都見(jiàn)過(guò)分隔條—能將窗口的一部分與另一部分分類(lèi)的可拖動(dòng)分割器。例如，當(dāng)使用Windows資源管理器時(shí)，會(huì)看到一系列文件夾（在左邊）和一系列文件（在右邊）?？赏蟿?dòng)它們之間的分隔條來(lái)確定每部分占據(jù)窗口的比例。

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

<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>

界面運(yùn)行效果：

可以通過(guò)拖動(dòng)中間的分割條，來(lái)改變兩列的相對(duì)寬度，效果如下圖所示：

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

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

• （1）GridSplitter對(duì)象必須放在Grid單元格中，可與以及存在的內(nèi)容一并放到單元格中，這時(shí)需要調(diào)整邊距設(shè)置，使他們不相互重疊。更好的方法是預(yù)留一列或一行專(zhuān)門(mén)用于放置GridSplitter對(duì)象，并將預(yù)留行或列的Height或Width屬性的值設(shè)置為Auto。

• （2）GridSplitter對(duì)象總是改變整行或整列的尺寸（而非改變單個(gè)單元格的尺寸）。為使GridSplitter對(duì)象的外觀和行為保持一致，需要拉伸GridSplitter對(duì)象使其穿越整行或整列，而不是將其限制在單元格中。為此，可使用RowSpan或ColumnSpan屬性。例如，上面的例子中GridSplitter對(duì)象的RowSpan屬性設(shè)置為2，因此被拉伸充滿(mǎn)整列。如果不使用該設(shè)置，GridSplitter對(duì)象會(huì)顯示在頂行（放置它的行）中，即使這樣，拖動(dòng)分隔條時(shí)也會(huì)改變整列的尺寸。

• （3）GridSplitter對(duì)象很小不易看見(jiàn)，為了使其更可用，需要為其設(shè)置最小尺寸。在上面的例子中，對(duì)于垂直分隔條，需要將VerticalAlignment屬性設(shè)置為Stretch（使分隔條填滿(mǎn)區(qū)域的整個(gè)高度），并將Width設(shè)置為固定值。對(duì)于水平分隔條，需要設(shè)置HorizontalAlignment屬性來(lái)拉伸，并將Height屬性設(shè)置為固定值。

• （4）GridSplitter對(duì)齊方式還決定了分隔條是水平的（用于改變行的尺寸）還是豎直的（用于改變列的尺寸）。對(duì)于水平分隔條，需要將VerticalAlignment屬性設(shè)置為Center（這也是默認(rèn)值），以指明拖動(dòng)分隔條改變上面行和下面行的尺寸。對(duì)于垂直分隔條，需要將HorizontalAlignment屬性設(shè)置為Center，以改變分隔條兩側(cè)列的尺寸。

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

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

感謝各位的閱讀，以上就是“WPF中怎么使用Grid網(wǎng)格面板布局”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)WPF中怎么使用Grid網(wǎng)格面板布局這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！