常見的幾個布局面板

1.StackPanel面板

StackPanel面板能夠簡單根據(jù)單行或者單列進(jìn)行元素排列, StackPanel 默認(rèn)的布局方向為垂直方向(Vertical), 由Orientation屬性控制。

Orientation屬性：

用戶控制布局方向是垂直還是橫向排列。分別有兩個值可選：Vertical、Horizontal

示例代碼：

<StackPanel Orientation="Vertical">
    <Button>button1</Button>
    <Button>button2</Button>
    <Button>button3</Button>
</StackPanel>

效果圖(如上面所述 StackPanel面板Orientation屬性默認(rèn)為Vertical)：

設(shè)置 Orientation="Horizontal" 時, 控件布局方向則為橫向, 效果圖。

默認(rèn)情況下, StackPanel面板中的元素都會根據(jù)StackPanel的大小而改變, StackPanel面板指定了Width和Height值。

布局屬性：

【VerticalAlignment/HorizontalAlignment】屬性:

為了能夠看到效果, 通常預(yù)留控件額外的空間, 示例, 默認(rèn)的StackPanel面板中添加幾組按鈕, 剩下的白色區(qū)域為額外的空間。

這個時候, 針對StackPanel面板設(shè)置VerticalAlignment屬性為Center, 此時所有的子元素被居中顯示,額外的空間被均分。

注:而Bottom、Top、Stretch 則分別表示整體元素居下，居上、整體伸展。

默認(rèn)情況下, StackPanel面板的VerticalAlignment、HorizontalAlignment 默認(rèn)屬性均為 Stretch

<!-- StackPanel -->
<StackPanel VerticalAlignment="Center">
    <Button>button1</Button>
    <Button>button2</Button>
    <Button>button3</Button>
</StackPanel>

效果圖:

Margin(邊距)屬性：

正如前人書中所說, 一個設(shè)計良好窗口不止是包含元素、還應(yīng)當(dāng)在元素之間包含一定的額外空間。所以這個時候Margin屬性派上用場。

以上的示例圖中, 均沒有設(shè)置Margin屬性, 所以會看到的是, 每個元素之間都緊貼。

當(dāng)設(shè)置邊距時, 可以統(tǒng)一設(shè)置元素所有邊的距離, 如下所示：

<!-- StackPanel -->
   <StackPanel>
       <Button Margin="3">button1</Button>
       <Button Margin="3">button2</Button>
       <Button Margin="3">button3</Button>
   </StackPanel>

另外一種,則是分別對元素的邊: 左、上、右、下的順序設(shè)置邊距, 如下所示：

<!-- StackPanel -->
   <StackPanel>
       <Button Margin="3 6 3 3">button1</Button>
       <Button Margin="3">button2</Button>
       <Button Margin="3">button3</Button>
   </StackPanel>

2.WarpPanel面板

與StackPanel面板類型, WarpPanel面板也是以行或列的形式進(jìn)行元素排列, 默認(rèn)情況下, WarpPanel面板的Orientation屬性則為Horizontal,元素以橫向進(jìn)行排列。

注意：與StackPanel面板不同的是, WarpPanel默認(rèn)情況下, 所有元素均不會被拉伸。這里要強(qiáng)調(diào)的一點(diǎn): StackPanel中, 元素會根據(jù)Orientation屬性進(jìn)行拉伸,

1.當(dāng)Orientation="Horizontal"時, 元素被垂直拉伸

2.當(dāng)Orientation="Vertical"時, 元素被水平拉伸

示例圖：

同樣的, WarpPanel面板具備StackPanel的屬性。區(qū)別則在于上面的不同。

3.DockPanel面板

用過winform的小伙伴應(yīng)該都知道, 在winform中, 幾乎所有的空間都具備Dock?？繉傩? 可以針對元素進(jìn)行單獨(dú)設(shè)置Dock定位。然而在WPF中, 這點(diǎn)顯然是不具備的。

所以對于靈活的WPF來說, DockPanel面板具備了這個能力。凡是包含在DockPanel面板中的子元素, 都會具備Dock附加屬性。

下圖所示, 對DockPanel進(jìn)行簡單的添加元素設(shè)置Dock屬性:

示例代碼：

<DockPanel>
    <Button DockPanel.Dock="Top">button1</Button>
    <Button DockPanel.Dock="Right" >button2</Button>
    <Button DockPanel.Dock="Left">button3</Button>
</DockPanel>

注意：DockPanel的LastChildFill屬性, 主要用于設(shè)置DockPanel中最后一個元素的會具備填充效果。如上圖的button3元素

LastChildFill 字面意思則可以理解, 最后一個元素是否填充。通過設(shè)置true/false,

效果圖(LastChildFill="false") :

<DockPanel <strong>LastChildFill="False"</strong>>
       <Button DockPanel.Dock="Top">button1</Button>
       <Button DockPanel.Dock="Right" >button2</Button>
       <Button DockPanel.Dock="Left">button3</Button>
   </DockPanel>

4.Grid面板

Grid面板類型HTML中的table表格, 為了能夠讓元素或內(nèi)容按照規(guī)定的位置排列, 首先得定義足夠得行和列。

注意: Grid中定義得Row與Column屬性默認(rèn)在元素中都是從0開始索引, 在下面示例中,為了演示都進(jìn)行了添加(如果在程序中,位置已經(jīng)確定, 可以默認(rèn)不加)。

定義行與列( RowDefinitions/ColumnDefinitions)

<Grid>
  <strong>  <!-- 下面分別定義了2行 2列 --></strong>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
 
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
</Grid>

添加元素:

下面為Grid定義得2行2列基礎(chǔ)上添加4個按鈕, 下圖所示：

代碼所示:

<Grid>
        <!-- 下面分別定義了2行 2列 -->
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
 
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
 
        <Button Grid.Column="0" Grid.Row="0">左上</Button>
        <Button Grid.Column="1" Grid.Row="0">右上</Button>
        <Button Grid.Column="0" Grid.Row="1">左下</Button>
        <Button Grid.Column="1" Grid.Row="1">右下</Button>
    </Grid>

注意:盡管一個單元格中, 允許放置多個元素, 通常來說這沒有什么意義。如上所示, 每個元素都明確了對應(yīng)單元格中。

Grid與WarpPanel和StackPanel面板等容器不同得區(qū)別在于, Grid需要顯式定義行與列來放置元素。而相對于其他容器,則會隱式創(chuàng)建行與列。

調(diào)整行和列：

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

例如, 下面的代碼演示了三種設(shè)置尺寸的方式：

<Grid>
       <!-- 下面分別定義了2行 2列 -->
       <Grid.RowDefinitions>
           <RowDefinition Height="Auto" />
           <RowDefinition Height="100"/>
       </Grid.RowDefinitions>
 
       <Grid.ColumnDefinitions>
           <ColumnDefinition Width="*"/>
           <ColumnDefinition Width="2*"/>
       </Grid.ColumnDefinitions>
 
       <Button Grid.Column="0" Grid.Row="0">左上</Button>
       <Button Grid.Column="1" Grid.Row="0">右上</Button>
       <Button Grid.Column="0" Grid.Row="1">左下</Button>
       <Button Grid.Column="1" Grid.Row="1">右下</Button>
   </Grid>

實(shí)際的顯示效果可以看到, 第一列width="*" 為第二列的1/2, 第一行設(shè)置的自適應(yīng)高度, 而第二行則是硬編碼的高度 100

注意: 當(dāng)使用Grid進(jìn)行按比例設(shè)置列或者行時, 如果Grid寬度為奇數(shù)像素, 那么被分割的行列像素帶小數(shù), 當(dāng)改列包含形狀元素、邊框、圖像, 那么顯示內(nèi)容可能是模糊的,

如果這個問題影響布局, 則只需要將Grid的UseLayoutRounding屬性設(shè)置為True即可。

跨行與跨列：

處于Grid中的任意元素, 都具有兩個附加屬性, 分別為 RowSpan與 ColumnSpan。像這種跨行跨列在web應(yīng)用中十分常見。

下面的示例中演示了如何針對元素進(jìn)行跨列顯示：

5.UniformGrid面板

與Grid相反, UniformGrid并不遵循Grid的眾多原則, 無論是顯式聲明行和列, 還有其附加屬性。反而, 通過簡單的設(shè)置

Rows和Columns屬性來設(shè)定其尺寸。每個單元格都被均勻分配, 關(guān)鍵一點(diǎn), 所有元素最后都根據(jù)其定義的先后順序放置在

單元格中。

示例代碼如下：

<UniformGrid Rows="2" Columns="2">
    <Button>button1</Button>
    <Button>button2</Button>
    <Button>button3</Button>
    <Button>button4</Button>
</UniformGrid>

6.Canvas面板

Canvas面板允許使用精準(zhǔn)的坐標(biāo)放置元素, 為了在Canvas面板中定位一個元素, 需要設(shè)置Canvas.Left 和 Canvas.Top屬性。

Code：通過設(shè)置元素的附加屬性 Canvas.Left 、Top、Right、Bottom 等進(jìn)行元素定位

<Canvas>
        <Button Canvas.Left="100" Canvas.Top="50">button1</Button>
        <Button Canvas.Left="100" Canvas.Top="80">button2</Button>
    </Canvas>

到此這篇關(guān)于WPF常見布局面板用法及介紹的文章就介紹到這了。希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論