WPF中的布局原则

  1. 不应显示设置元素的尺寸，设置最大，最小尺寸来控制控件的尺寸范围
  2. 不使用屏幕坐标指定元素的位置，元素之间的空白可以使用Margin属性
  3. 布局容器和他们的子元素“共享可以使用的控件”

  4. 可以嵌套布局容器

    布局过程

  5. 测量阶段：遍历所有子元素，并询问他们所期望的尺寸

  6. 排列阶段：在合适的位置放置子元素

布局容器

  1. 布局容器派生与Panel类，该类提供了三个公用属性：
  2. BackGroud 主要设置面板背景色；要接收鼠标事件，则属性值非空；
  3. Children 存储的条目集合
  4. IsItemHost 显示与一个ItemsControl控件相关联的项
  5. Margin属性，类似html中的边距，它的赋值时 左，上，右，下 ，且相邻边距会进行叠加
  6. Padding属性，类似html中的边距，它的赋值时 左，上，右，下 ，一般用于有Content属性的控件

  7. 核心布局的面板 | 名称 | 效果 | 用途 | | —- | —- | —- | | StackPanel | 在一个水平或垂直堆栈中放置元素 | 通常用于小的布局区域 | | WrapPanel | 在可换行的行中放置元素 | 类似Html中的流似布局，当排满一行后能够自动折行 | | DockPannel | 根据容器的整个边界调整元素，泊靠面板 | 主要用于大体的界面布局时，其中最后一个元素会自动填充剩余的空间。 | | Grid | 根据行列进行排列的元素 | 最经常用到的布局元素，也更灵活 | | UniformGrid | 强制单元格的元素具有相同的尺寸 |

    | | Canvas | 使用固定的坐标，进行绝对定位的元素 画布 | 类似Windows窗体，不适合尺寸可变的元素 |

StacPanel布局容器

  1. StackPanel 会自动铺满他所在的容器，当一个垂直对齐的StackPanel ,其字元素中的VerticalAlignment不会起作用的。 | 属性名称 | 可选值 | 用途 | | —- | —- | —- | | Orientation | Horizontal：水平布局
    Vertical：垂直布局 | 控制pannel容器中控件的布局方式 | | HorizontalAlignment | Center/Left/Right/Strectch
    Strectch[默认值] 延申铺满 | 当水平方向上有额外空间时，决定在布局容器中如何定位 | | VerticalAlignment | Center/Bottom/Top/Strectch
    Strectch[默认值] 延申铺满 | 当垂直方向上有额外空间时，决定在布局容器中如何定位 | |

    |

    |

    |

Border控件

  1. 非布局控件，但是经常与布局容器搭配使用

  2. 他是一个装饰元素，类似的装饰元素：ListBoxChrome,ButtonChrome元素 | 属性名称 | 可选值 | 用途 | | —- | —- | —- | | BackGround | 背景布局 |

    | | BorderBrush
    BorderThickness | 设置边框的颜色和厚度 |

    | | CornerRadius | 使用圆角 |

    | | Padding | 边框与内部之间添加的空间 |

    |

WrapPanel面板

  1. 主要用于控制部分窗口的布局
  2. 当高度或者宽度不够时，会自动掉落到下一行或下一列
  3. 通过属性Orientation ，来排列相关的元素

DockPanel布局控件

  1. 顺着一条外边缘来拉伸所包含的控件
  2. 通过Dock属性来配置相关的数据
  3. 设置LasChildFill为true 最后一个元素占满剩余的所有空间。
    1. <DockPanel LastChildFill="True">
    2.      <DockPanel.Resources>
    3.          <Style TargetType="Border">
    4.              <Setter Property="BorderBrush" Value="Red"></Setter>
    5.              <Setter Property="BorderThickness" Value="1"></Setter>
    6.          </Style>
    7.          <Style TargetType="Label">
    8.              <Setter Property="HorizontalAlignment" Value="Center"></Setter>
    9.              <Setter Property="VerticalAlignment" Value="Center"></Setter>
    10.          </Style>
    11.      </DockPanel.Resources>
    12.      <Border Background="SkyBlue" DockPanel.Dock="Top" Height="50">
    13.          <Label Content="顶部" HorizontalAlignment="Center" VerticalAlignment="Center"></Label>
    14.      </Border>
    15.      <Border Background="SkyBlue" DockPanel.Dock="Left" Width="200">
    16.          <Label Content="左边"></Label>
    17.      </Border>
    18.      <Border Background="SkyBlue" DockPanel.Dock="Bottom" Height="50">
    19.          <Label Content="右边"></Label>
    20.      </Border>
    21.      <Border Background="Yellow">
    22.          <Label Content="居中"></Label>
    23.      </Border>
    24.  </DockPanel>
    3.布局控件 - 图1

Grid布局控件

  1. 可以对控件进行精细的布局处理
  2. 通过设置RowDefinitions 和 ColumnDefinition 可以设置Grid为几行几列的表格
  3. 行列的尺寸调整包括：固定尺寸，自动适应（Auto）, 按比例（1*）
  4. UseLayoutRounding 使用布局舍入，使边界模糊变的清晰【我也没弄懂】
  5. 跨行，跨列 请使用RowSpan,ColunmSpan来设置
  6. GridSpliter用来分割单元格，且允许被拖动，动态调整单元格大小
  7. GridSpliter 必须放在单元格中，可以通过设置RowSpan ColumSpan来进行分割
  8. 横向和纵向的Spliter需要分别设置 HorizontalAlignment=Stretch width=,VerticalAlignment=Stretch,height 这样Spliter才会显示出来
  9. 可以设置ResizeDirection，ResizeBehavior 来决定分割的行为

示例代码如下：

  1.  <Grid ShowGridLines="True">
  2.         <Grid.RowDefinitions>
  3.             <RowDefinition></RowDefinition>
  4.             <RowDefinition Height="5"></RowDefinition>
  5.             <RowDefinition></RowDefinition>
  6.         </Grid.RowDefinitions>
  7.         <Grid.ColumnDefinitions>
  8.             <ColumnDefinition></ColumnDefinition>
  9.             <ColumnDefinition Width="5"></ColumnDefinition>
  10.             <ColumnDefinition></ColumnDefinition>
  11.         </Grid.ColumnDefinitions>
  12.         <Border Background="DarkBlue"></Border>
  13.         <Border Background="Red" Grid.Row="0" Grid.Column="2"></Border>
  14.         <GridSplitter Grid.Row="0" Grid.Column="1" Grid.RowSpan="3" Width="5" 
  15.                       ResizeBehavior="PreviousAndNext"
  16.                       ResizeDirection="Columns" 
  17.                       Background="SkyBlue" 
  18.                       VerticalAlignment="Stretch">
  19.                </GridSplitter>
  20.         <GridSplitter Grid.ColumnSpan="3"  Grid.Row="1" Grid.Column="0"  Height="5"
  21.                       HorizontalAlignment="Stretch" 
  22.                       Background="Black">
  23.                </GridSplitter>
  24.         <Border Background="Yellow" Grid.Row="2" Grid.Column="0"></Border>
  25.         <Border Background="LightBlue" Grid.Row="2" Grid.Column="2"></Border>
  26.   </Grid>
  1. 共享尺寸组
  2. 需要在共享的容器里面添加属性 Grid.IsSharedSizeScope=”True”
  3. 在设置相同的列名中设置 SharedSizeGroup=”分组名称”，即可达到共享尺寸组的效果

3.布局控件 - 图2

  1.  <Grid ShowGridLines="False" Grid.IsSharedSizeScope="True">
  2.    <Grid Grid.Row="3" Grid.ColumnSpan="3" Grid.Column="0" 
  3.          Background="LightGoldenrodYellow" 
  4.          ShowGridLines="True" >
  5.             <Grid.ColumnDefinitions>
  6.                 <ColumnDefinition SharedSizeGroup="TextLable" Width="Auto"/>
  7.                 <ColumnDefinition Width="Auto"></ColumnDefinition>
  8.                 <ColumnDefinition></ColumnDefinition>
  9.             </Grid.ColumnDefinitions>
  10.             <Label Grid.Column="0" Content="我是一个唱个歌过过过过过过过Label"></Label>
  11.             <Label Grid.Column="1" Content="我是一Label"></Label>
  12.             <Label Grid.Column="2" Content="我是一个唱个歌过过"></Label>
  13.         </Grid>
  14.         <Grid Grid.Row="4" Grid.ColumnSpan="3" Grid.Column="0" Background="MediumPurple" 
  15.               ShowGridLines="True">
  16.             <Grid.ColumnDefinitions>
  17.                 <ColumnDefinition Width="auto" SharedSizeGroup="TextLable"/>
  18.                 <ColumnDefinition></ColumnDefinition>
  19.             </Grid.ColumnDefinitions>
  20.             <Label Grid.Column="0" Content="我是一Label"></Label>
  21.             <Label Grid.Column="1" Content="我是一个唱个歌过过"></Label>
  22.         </Grid>
  23. </Grid>

UniformGrid布局

  1. 比较特殊的网格控件，通过设置Rows,Colums来设置网格，每个网格的大小一致
  2. 非常适合用于监控显示的时候

3.布局控件 - 图3

  1. <ItemsControl ItemsSource="{Binding Path=DataContext,ElementName=wind}">
  2.   <ItemsControl.ItemsPanel>
  3.     <ItemsPanelTemplate>
  4.       <UniformGrid Rows="2" Columns="2">
  5.       </UniformGrid>
  6.     </ItemsPanelTemplate>
  7.   </ItemsControl.ItemsPanel>
  8.   <ItemsControl.ItemTemplate>
  9.     <DataTemplate>
  10.       <StackPanel Background="SkyBlue" Margin="5">
  11.         <TextBlock Text="{Binding Name,StringFormat=姓名：{0}}"></TextBlock>
  12.         <TextBlock Text="{Binding Age,StringFormat=年龄：{0}}"></TextBlock>
  13.         <TextBlock Text="{Binding Age,StringFormat=电话：{0}}"></TextBlock>
  14.       </StackPanel>
  15.     </DataTemplate>
  16.   </ItemsControl.ItemTemplate>
  17. </ItemsControl>

Canvas布局容器

  1. 使用绝对定位（坐标系）来布局容器
  2. 提供Left,Right,Top ,Bottom 来定位元素，元素不会随容器的变化而变化
  3. 当元素有重叠时，通过设置ZIndex来设置前后关系
    1. <Canvas>
    2. <Button Content="上左(10,20)" Canvas.Left="10" Canvas.Top="10" Canvas.ZIndex="1"/>
    3. <Button Content="上右(10,20)" Canvas.Right="10" Canvas.Top="20"></Button>
    4. <Button Content="右下(10,20)" Canvas.Right="10" Canvas.Bottom="20"></Button>
    5. <Button Height="100" Width="100" Content="左上(50，100)" Canvas.Left="50" Canvas.Top="20"/>
    6. </Canvas>
    3.布局控件 - 图4