WPF 中的StackPanel WrapPanle DockPanel

一、SatckPanel：以堆叠的方式显示其中的控件 

    1、使用Orientation(方向)属性更改堆叠的顺序

    1.1、Orientation="Vertical"(垂直的)  --------- 默认

    默认从上到下显示各控件。控件在未定义的前提下，宽度为StackPanel的宽度，高度自动适应控件中内容的高度

<StackPanel>
<Button Content="button1" Name="but1" Width="70"></Button>
<Button Content="button2" Name="but2" ></Button>
</StackPanel>

    1.2、Orientation="Horizontal"(水平的)

    从左到右显示各控件。控件在未定义的前提下，高度为StackPanel的高度，宽度自动适应控件中内容的宽度

<StackPanel Orientation="Horizontal">
<Button Content="button1" Name="but1" Width="70" Height="70"></Button>
<Button Content="button2" Name="but2" ></Button>
</StackPanel>

  2、控件属性

  2.1、margin的3种设置方式：

  a、Margin="10"; 效果与b一致

  b、Margin="10,10,10,10";  顺序依次为：左、上、右、下

  c、使用拆分方式 

<Button Content="buttonA">
<Button.Margin>
<Thickness Top="10" Left="10" Bottom="10" Right="10"></Thickness>
</Button.Margin>
</Button>

   2.2、HorizontalAlignment 水平对齐方式

          VerticalAlignment 垂直对齐方式

   2.3、MinWidth、MinHeight、MaxWidth、MaxHeight 控制控件宽度、高度变化的最大最小值

二、WrapPanel

  以流的形式由左到右，由上到下显示；功能与SatckPanel累似，不过WrapPanel支持控件换行功能

<WrapPanel>
<Button Content="BUTTON1" Name="but1" Height="50"></Button>
<Button Content="button2" Name="but2" Width="403" Height="100"></Button>
<Button Content="button3" Name="but3"></Button>
</WrapPanel>

 三、DockPanel

  以上、下、左、右、中为基本结构布局方式(根据控件排放的顺序来进行优先顺序的加载)；每一个区域可以放置多个控件，在同一区域放置的多个控件采用的布局方式为StackPanel方式

<DockPanel>
<Button Content="BUTTONA" DockPanel.Dock="Top"></Button>
<Button Content="BUTTONB" DockPanel.Dock="Top"></Button>
<Button Content="BUTTONC" DockPanel.Dock="Left"></Button>
<Button Content="BUTTOND" DockPanel.Dock="Right"></Button>
<Button Content="BUTTONE" DockPanel.Dock="Bottom"></Button>
<Button Content="BUTTON1"></Button>
</DockPanel>

<DockPanel>

<Button Content="BUTTONA" DockPanel.Dock="Top"></Button>
<Button Content="BUTTONB" DockPanel.Dock="Top"></Button>
<Button Content="BUTTONE" DockPanel.Dock="Bottom"></Button>
<Button Content="BUTTONC" DockPanel.Dock="Left"></Button>
<Button Content="BUTTOND" DockPanel.Dock="Right"></Button>
<Button Content="BUTTON1"></Button>
</DockPanel>

转载于:https://www.cnblogs.com/huangfang/p/5849531.html