WPF使用Grid佈局

追忆呢發表於2024-08-16

WPF佈局

WPF佈局基礎

  • 佈局原則

    • 一個視窗中只能包含一個元素
    • 不應顯示設定元素尺寸
    • 不應使用座標設定元素的位置
    • 可以巢狀佈局容器

  • 佈局容器

    • StackPanel: 水平或垂直排列元素、Orientation屬性分別: Horizontal / Vertical.
    • WrapPanel : 水平或垂直排列元素、針對剩餘空間不足會進行換行或換列進行排列.
    • DockPanel : 根據容器的邊界、元素進行Dock.Top、Left、Right、Bottom設定.
    • Grid : 類似table表格、可靈活設定行列並放置控制元件元素、比較常用.
    • Canvas : 使用固定的座標設定元素的位置、不具備錨定停靠等功能.
    • UniformGrid : 指定行和列的數量, 均分有限的容器空間.

佈局容器詳解

  • StackPanal

    StackPanel主要用於垂直或水平排列元素、在容器的可用尺寸內放置有限個元素

    1161656-20190817161544750-1520158829

    超過界限無法看見

  • WrapPannel

    WrapPanel預設排列方向與StackPanel相反、WrapPanel的Orientation預設為Horizontal。

    當裡面控制元件超過容器的時候會自動換行。

  • DockPanel

    預設DockPanel中的元素具備DockPanel.Dock屬性, 該屬性為列舉具備: Top、Left、Right、Bottom.預設是Left

    與Winform中的Panel類似。

    DockPanel有一個LastChildFill屬性, 該屬性預設為true, 該屬性作用為, 當容器中的最後一個元素時, 預設該元素填充DockPanel所有空間。

    1161656-20190817161456533-237089632

  • Grid

    類似於表格劃分空間

    1161656-20190817161655841-623745756

    其中:2*表示是上一 行/列 的 Height/Width 的兩倍;Auto表示自適應;

    建立一個控制元件預設是0行0列,想要選擇,則需自己定義行數和列數,比如Grid.Row="1" Grid.Column="2";

    如果一個控制元件或者容器想要跨列,則使用Grid.Column屬性;

現在以一個例子來進行佈局，遵循佈局原則：
QQ截圖20240816154800

分析：可以用Grid分割區域。1.直接全部分割2.逐步分割(優先)

首先2個Grid.Row，第2個Grid.Row裡面分兩列，然後再在第二列裡面分三行五列，用GridRow.Span跨行，用GridCloumn.Span跨列。

 <Grid>
     <Grid.RowDefinitions>
         <RowDefinition Height="100"/>
         <RowDefinition/>
     </Grid.RowDefinitions>
     <Border Background="#7671D8"/>
     <Grid Grid.Row="1">
         <Grid.ColumnDefinitions>
             <ColumnDefinition Width="190"/>
             <ColumnDefinition />
         </Grid.ColumnDefinitions>
         <Border Background="Blue"/>
         <Grid Grid.Column="1">
             <Grid.RowDefinitions>
                 <RowDefinition Height="0.5*"/>
                 <RowDefinition/>
                 <RowDefinition/>
             </Grid.RowDefinitions>
             <Grid.ColumnDefinitions>
                 <ColumnDefinition/>
                 <ColumnDefinition/>
                 <ColumnDefinition/>
                 <ColumnDefinition/>
                 <ColumnDefinition/>
             </Grid.ColumnDefinitions>
             <Border Background="#7671DB" Margin="5"/>
             <Border Grid.Column="1" Background="Red" Margin="5"/>
             <Border Grid.Column="2" Background="Pink" Margin="5"/>
             <Border Grid.Column="3" Background="Blue" Margin="5"/>
             <Border Grid.Column="4" Background="Green" Margin="5"/>

             <Border Grid.Row="1" Grid.ColumnSpan="3" Background="SkyBlue" Margin="5"/>
             <Border Grid.Row="1" Grid.Column="3" Grid.ColumnSpan="2" Background="YellowGreen" Margin="5"/>
             <Border Grid.Row="2" Grid.ColumnSpan="3" Background="Orange" Margin="5"/>
             <Border Grid.Row="2" Grid.Column="3" Grid.ColumnSpan="2" Background="Purple" Margin="5"/>

         </Grid>
     </Grid>
 </Grid>

最終結果如下：

QQ截圖20240816155938
  • 注意：在Grid內部有一些欄位或者顯示的資料等，可以在裡面再嵌入一個容器，比如：StackPanl、DockPanl。

相關文章