1、WPF布局原则

  • 不要显示设置元素的尺寸：可以通过设置最大和最小尺寸来限定范围。
  • 不要使用屏幕坐标来指定元素位置：根据元素在那种容器中，来合理安排元素的位置。如需要元素之间留白，可以使用Margin设置边距。

  • 可以嵌套布局容器：新建WPF程序会默认提供一个Grid容器，但是我们仍可在Grid中添加容器来安排我们的布局。

    2、StackPanel布局

  • 在水平或垂直的堆栈中放置元素。多用于复杂窗口中的一些小区域。

  • 按照StackPanel的属性Orientation来设置使用横向布局还是纵向布局。
    1. <StackPanel Orientation="Vertical" >
    2.       <Button Content="Button1" HorizontalAlignment="Left" />
    3.       <Button Content="Button2" HorizontalAlignment="Center"/>
    4.       <Button Content="Button3" HorizontalAlignment="Right"/>
    5.       <Button Content="Button4" HorizontalAlignment="Stretch"/>
    6.   </StackPanel>

运行效果：
图片.png

3、Border控件

  • Border控件不是布局面板，经常与面板一起使用。
  • 它之能包含一段嵌套内容（通常是布局面板），并为其添加背景或边框

Background ：使用Brush对象设置边框中所有内容后面的背景。可使用固定颜色背景，也可使用其他更特殊的背景
BorderBrush和BroderThickness ：使用Brush对象设置位于Border对象边缘的边框的颜色，并设置边框的宽度。为显示边框，必须设置这两个属性
CornerRadius ：该属性可使边框具有雅致的圆角。CornerRadius的值越大，圆角效果就越明显
Padding ：该属性在边框和内部的内容之间添加空间(与此相对，Margin属性在边框之外添加空间)

  1.   <Border BorderBrush="Silver" BorderThickness="2" CornerRadius="10" Padding="20">
  2.         <StackPanel Orientation="Vertical" >
  3.             <Button Content="Button1" HorizontalAlignment="Left" />
  4.             <Button Content="Button2" HorizontalAlignment="Center"/>
  5.             <Button Content="Button3" HorizontalAlignment="Right"/>
  6.             <Button Content="Button4" HorizontalAlignment="Stretch"/>
  7.         </StackPanel>
  8.     </Border>

运行效果：
图片.png

4、WrapPanel面板

  • WrapPanel布局面板将各个控件从左至右按照行或列的顺序罗列，当长度或高度不够时就会自动调整进行换行，后续排序按照从上至下或从右至左的顺序进行。
  • 与StackPanel面板类似，WrapPanel布局主要用来控制一小部分的布局细节，**并非用于控制整个窗口布局** ```csharp 

  2. 运行效果：<br />![图片.png](https://cdn.nlark.com/yuque/0/2020/png/260380/1584881615917-4ae3c5cc-4b87-4763-a793-3c4c455e00cb.png#align=left&display=inline&height=218&name=%E5%9B%BE%E7%89%87.png&originHeight=218&originWidth=800&size=8943&status=done&style=none&width=800)
  4. <a name="8kjeS"></a>
  5. ## 5、DockPanel面板
  7. - **DockPanel支持让元素简单地停靠在整个面板的某一条边上，然后拉伸元素以填满全部宽度或高度**
  8. - **DockPanel有一个Dock附加属性，因此子元素用4个值来控制她们的停靠：Left、Top、Right、Bottom**
  9. ```csharp
  10.  <DockPanel>
  11.     <Button Content="Button1" DockPanel.Dock="Top"/>
  12.     <Button Content="Button2" DockPanel.Dock="Bottom" />
  13.     <Button Content="Button3" DockPanel.Dock="Left"/>
  14.     <Button Content="Button4" DockPanel.Dock="Right"/>
  15.     <Button Content="Button5" />
  16. </DockPanel>

运行效果：
图片.png

6、Grid面板

  • Grid以表格形式布局元素，对于整个面板上的元素进行布局
  • Grid面板将元素分割到不可见的行列网格中,可将Grid.ShowGridLines属性设置为True，从而更清晰的观察Grid面板，方便调试，可以更准确地控制Grid面板如何选择列宽和行高
    1. <Grid ShowGridLines="False" UseLayoutRounding="True">
    2.       <Grid.RowDefinitions>
    3.           <RowDefinition></RowDefinition>
    4.           <RowDefinition></RowDefinition>
    5.       </Grid.RowDefinitions>
    6.       <Grid.ColumnDefinitions>
    7.           <ColumnDefinition></ColumnDefinition>
    8.           <ColumnDefinition Width="auto"></ColumnDefinition>
    9.           <ColumnDefinition></ColumnDefinition>
    10.           <ColumnDefinition></ColumnDefinition>
    11.       </Grid.ColumnDefinitions>
    12.       <Button Content="Button1" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2"></Button>
    13.       <Button Content="Button2" Grid.Row="1" Grid.Column="2"></Button>
    14.       <Button Content="Button3" Grid.Row="1" Grid.Column="3"></Button>
    15.       <GridSplitter Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Stretch" Grid.RowSpan="2" Width="6"></GridSplitter>
    16.   </Grid>
    运行效果：
    图片.png

7、Canvas面板

  • Canvas仅支持用显式坐标定位元素，调整位置用Left、Right、Top和Bottom四个附加属性
  • Canvas允许子元素的部分或全部超过其边界，默认不会裁剪子元素，同时可以使用负坐标，即溢出的内容会显示在Canvas外面，这是因为默认 ClipToBounds=”False”
  • 如果2个控件重叠，使用属性Panel.ZIndex来设置显示顺序
    1. <Canvas>
    2.       <Button Content="Button1"  Panel.ZIndex="3" />
    3.       <Button Content="Button2" />
    4.       <Button Content="Button3" Canvas.Left="200" Canvas.Top="100"/>
    5.   </Canvas>
    运行效果：
    图片.png

8、InkCanvas控件

  • InkCanvas设置位置跟Canvas一样。通过InkCanvas.Top之类的设置。
  • 需要设置的属性有EditingMode：
    1.None=0// 忽略鼠标和手写笔输入
    2.Ink = 1// 允许用户绘制批注，默认模式。使用鼠标或者手写笔绘图时，会绘制笔画
    3.GestureOnly = 2// 不远许用户绘制笔画批注，但会关注预先定义的特定姿势，由System.Windows.Ink.ApplicationGesture定义笔势
    4.InkAndGesture = 3// 允许用户绘制壁画批注，也可以识别预先定义的姿势
    5.Select = 4// 允许用户选择保存在Children集合中的元素，要选择一个元素用户必须单机该元素或者拖动套索选择该元素，一旦选择一个元素就可以移动该元素，改变其尺寸或将其删除
    6.EraseByPoint = 5// 擦除鼠标选中的笔画
    7.EraseByStroke = 6// 擦除选中的一笔，开始到结束都会擦除

图片.png