目錄

• 常見的幾個佈局面板
• 1.StackPanel面板
• 2.WarpPanel面板
• 3.DockPanel面板
• 5.UniformGrid面板
• 6.Canvas面板

常見的幾個佈局面板

1.StackPanel面板

StackPanel面板能夠簡單根據單行或者單列進行元素排列,StackPanel 預設的佈局方向為垂直方向(Vertical),由Orientation屬性控制。

Orientation屬性：

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

示例程式碼：

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

效果圖(如上面所述 StackPanel面板Orientation屬性預設為Vertical)：

設定 Orientation="Horizontal" 時,控制元件佈局方向則為橫向,效果圖。

預設情況下,StackPanel面板中的元素都會根據StackPanel的大小而改變,StackPanel面板指定了Width和Height值。

佈局屬性：

【VerticalAlignment/HorizontalAlignment】屬性:

為了能夠看到效果,通常預留控制元件額外的空間,示例,預設的StackPanel面板中新增幾組按鈕,剩下的白色區域為額外的空間。

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

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

預設情況下,StackPanel面板的VerticalAlignment、HorizontalAlignment 預設屬性均為 Stretch

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

效果圖:

Margin(邊距)屬性：

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

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

當設定邊距時,可以統一設定元素所有邊的距離,如下所示：

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

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

<!-- 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面板也是以行或列的形式進行元素排列,預設情況下,WarpPanel面板的Orientation屬性則為Horizontal,元素以橫向進行排列。

注意：與StackPanel面板不同的是,WarpPanel預設情況下,所有元素均不會被拉伸。這裡要強調的一點: StackPanel中,元素會根據Orientation屬性進行拉伸,

1.當Orientation="Horizontal"時,元素被垂直拉伸

2.當Orientation="Vertical"時,元素被水平拉伸

示例圖：

同樣的,WarpPanel面板具備StackPanel的屬性。區別則在於上面的不同。

3.DockPanel面板

用過winform的小夥伴應該都知道,在winform中,幾乎所有的空間都具備Dock停靠屬性,可以針對元素進行單獨設定Dock定位。然而在WPF中,這點顯然是不具備的。

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

下圖所示,對DockPanel進行簡單的新增元素設定Dock屬性:

示例程式碼：

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

注意：DockPanel的LastChildFill屬性,主要用於設定DockPanel中最後一個元素的會具備填充效果。如上圖的button3元素

LastChildFill 字面意思則可以理解,最後一個元素是否填充。通過設定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表格,為了能夠讓元素yKiITH或內容按照規定的位置排列,首先得定義足夠得行和列。

注意: Grid中定義得Row與Column屬性預設在元素中都是從0開始索引,在下面示例中,為了演示都進行了新增(如果在程式中,位置已經確定,可以預設不加)。

定義行與列( RowDefinitions/ColumnDefinitions)

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

新增元素:

下面為Grid定義得2行2列基礎上新增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>

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

Grid與WarpPanel和StackPanel面板等容器不同得區別在於,Grid需要顯式定義行與列來放置元素。而相對於其他容器,則會隱式建立行與列。

調整行和列：

Grid面板支援3種設定尺寸的方式：

例如,下面的程式碼演示了三種設定尺寸的方式：

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

實際的顯示效果可以看到,第一列width="*www.cppcns.com" 為第二列的1/2,第一行設定的自適應高度,而第二行則是硬編碼的高度 100

注意: 當使用Grid進行按比例設定列或者行時,如果Grid寬度為奇數畫素,那麼被分割的行列畫素帶小數,當改列包含形狀元素、邊框、影象,那麼顯示內容可能是模糊的,

如果這個問題影響佈局,則只需要將Grid的UseLayoutRounding屬性設定為True即可。

跨行與跨列：

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

下面的示例中演示瞭如何針對元素進行跨列顯示：

5.UniformGrid面板

與Grid相反,UniformGrid並不遵循Grid的眾多原則,無論是顯式宣告行和列,還有其附加屬性。反而,通過簡單的設定

Rows和Columns屬性來設定其尺寸。每個單元格都被均勻分配,關鍵一點,所有元素最後都根據其定義的先後順序放置在

單元格中。

示例程式碼如下：

<UniformGrid Rows="2" Columhttp://www.cppcns.comns="2">
    <Button>button1</Button>
    <Button>button2</Button>
    <Button>button3</Button>
    <Button>button4</Button>
</UniformGrid>

6.Canvas面板

Canvas面板允許使用精準的座標放置元素,為了在Canvas面板中定位一個元素,需要設定Canvas.Left 和 Canvas.Top屬性。

Code：通過設定元素的附加屬性 Canvas.Left 、Top、Right、Bottom 等進行元素定位

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

到此這篇關於WPF常見佈局面板用法及介紹的文章就介紹到這了。希望對大家的學習有所幫助，也希望大家多多支援我們。