WPF 入門《佈局面板》

 

轉自：https://www.cnblogs.com/zh7791/p/9012880.html

常見的幾個佈局面板

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	當垂直方向有額外的空間, 可以選擇Top、Center、Bottom、Stretch進行設置佈局
HorizontalAlignment	當水平方向有額外的空間, 可以選擇Center、Left、Right、Stretcj進行設置佈局
Margin	相對控件的4個邊、設置邊距,可以單獨設置各個邊距,也可以統一設置一個邊距 類似：Margin="1 2 3 4" 或 Margin="1"

 

 

 

 

 

 

【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 <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表格, 爲了能夠讓元素或內容按照規定的位置排列, 首先得定義足夠得行和列。

注意: 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=" *  "  爲第二列的1/2, 第一行設置的自適應高度, 而第二行則是硬編碼的高度 100

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

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

 

 跨行與跨列：

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

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

5.UniformGrid面板

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

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

單元格中。

示例代碼如下：

<UniformGrid Rows="2" Columns="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>