WPF使用Grid布局

WPF布局

WPF布局基础

• 布局原则

  • 一个窗口中只能包含一个元素
  • 不应显示设置元素尺寸
  • 不应使用坐标设置元素的位置
  • 可以嵌套布局容器

• 布局容器

  • StackPanel: 水平或垂直排列元素、Orientation属性分别: Horizontal / Vertical.
  • WrapPanel : 水平或垂直排列元素、针对剩余空间不足会进行换行或换列进行排列.
  • DockPanel : 根据容器的边界、元素进行Dock.Top、Left、Right、Bottom设置.
  • Grid : 类似table表格、可灵活设置行列并放置控件元素、比较常用.
  • Canvas : 使用固定的坐标设置元素的位置、不具备锚定停靠等功能.
  • UniformGrid : 指定行和列的数量, 均分有限的容器空间.

布局容器详解

• StackPanal

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

  

  超过界限无法看见

• WrapPannel

  WrapPanel默认排列方向与StackPanel相反、WrapPanel的Orientation默认为Horizontal。

  当里面控件超过容器的时候会自动换行。

• DockPanel

  默认DockPanel中的元素具备DockPanel.Dock属性, 该属性为枚举具备: Top、Left、Right、Bottom.默认是Left

  与Winform中的Panel类似。

  DockPanel有一个LastChildFill属性, 该属性默认为true, 该属性作用为, 当容器中的最后一个元素时, 默认该元素填充DockPanel所有空间。

  

• Grid

  类似于表格划分空间

  

  其中:2*表示是上一 行/列 的 Height/Width 的两倍;Auto表示自适应;

  创建一个控件默认是0行0列,想要选择,则需自己定义行数和列数,比如Grid.Row="1" Grid.Column="2";

  如果一个控件或者容器想要跨列,则使用Grid.Column属性;

现在以一个例子来进行布局，遵循布局原则：

分析：可以用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>

最终结果如下：

• 注意：在Grid内部有一些字段或者显示的数据等，可以在里面再嵌入一个容器，比如：StackPanl、DockPanl。