WPF ----布局 (Grid)

  Grid。這是一個啟用類似網格或表佈局的強大佈局元素(用過 HTML 表元素的人會非常熟悉它)。由於其通用的適用性，Grid 的使用可能比所有其他佈局面板的使用更多。作為一個簡單的用例，如下代碼

<Grid ShowGridLines="True">

                     <!--添加列-->

                     <Grid.ColumnDefinitions>

                                <ColumnDefinition Width="100"/>

                                <ColumnDefinition Width="100"/>

                                <ColumnDefinition Width="100"/>

                     </Grid.ColumnDefinitions>

                     <!--添加行-->

                     <Grid.RowDefinitions>

                                <RowDefinition Height="50"/>

                                <RowDefinition Height="50"/>

                                <RowDefinition Height="50"/>

                     </Grid.RowDefinitions>

</Grid>

 

是顯示一個具有三行三列的網格的代碼。在 Grid 元素內部，ColumnDefinition 和 RowDefinition 元素定義 Grid 中行和列的屬性。然後，每個 UI 元素都有一個行和列屬性以指明它在 Grid 中顯示的位置。代碼如下  
  

 <Grid ShowGridLines="True" HorizontalAlignment="Center">

                     <!--添加列-->

                     <Grid.ColumnDefinitions>

                                <ColumnDefinition Width="100"/>

                                <ColumnDefinition Width="100"/>

                                <ColumnDefinition Width="100"/>

                     </Grid.ColumnDefinitions>

                     <!--添加行-->

                     <Grid.RowDefinitions>

                                <RowDefinition Height="50"/>

                                <RowDefinition Height="50"/>

                                <RowDefinition Height="50"/>

                     </Grid.RowDefinitions>

                     <TextBlock Grid.Row="0" Grid.Column="0" Height="20" Width="40">帳號</TextBlock>

                     <TextBox Grid.Row="0" Grid.Column="1" Height="20" Width="80"></TextBox>

                     <TextBlock Grid.Row="1" Grid.Column="0" Height="20" Width="40">密碼</TextBlock>

                     <TextBox Grid.Row="1" Grid.Column="1" Height="20" Width="80"></TextBox>

                     <Button Grid.Row="2" Grid.ColumnSpan="3" Height="20" Width="120">登入</Button>

</Grid>

 

顯示幾個控件顯示結果。

本示例也顯示了無需約束為網格中單個單格的項。使用 Grid.ColumnSpan 屬性來跨越這兩個列。這就是它設法填充網格整體寬度的方式。

可以嵌套佈局元素，從而使得生成極其複雜的佈局成為可能。此外，如果您需要某些在內置佈局類型中不可用的類型，則可輕鬆編寫新的佈局元素類型，WPF 將 UI 佈局功能帶入到一個全新的層次。

嵌套佈代碼如下

    

<Grid ShowGridLines="True" HorizontalAlignment="Center">

                     <!--添加列-->

                     <!--添加列-->

                     <Grid.ColumnDefinitions>

                                <ColumnDefinition Width="100"/>

                                <ColumnDefinition Width="100"/>

                                <ColumnDefinition Width="100"/>

                     </Grid.ColumnDefinitions>

                     <!--添加行-->

                     <Grid.RowDefinitions>

                                <RowDefinition Height="50"/>

                                <RowDefinition Height="50"/>

                                <RowDefinition Height="50"/>

                     </Grid.RowDefinitions>

                     <TextBlock Grid.Row="0" Grid.Column="0" Height="20" Width="40">帳號</TextBlock>

                     <TextBox Grid.Row="0" Grid.Column="1" Height="20" Width="80"></TextBox>

                     <TextBlock Grid.Row="1" Grid.Column="0" Height="20" Width="40">密碼</TextBlock>

                     <TextBox Grid.Row="1" Grid.Column="1" Height="20" Width="80"></TextBox>

                     <Grid Grid.Row="2" Grid.ColumnSpan="3">

                                <Button Grid.Row="0" Height="20" Width="120">登入</Button>

                     </Grid>

</Grid>

 

屬性名	說明
SharedSizeGroup	多个对象指定共享的大小
Margin	指定扩展器控件外部的边框间距
Padding	指定内部的额外间距