WPF的容器控件之StackPanel、WrapPanel、DockPanel

WPF的容器控件之StackPanel、WrapPanel、DockPanel

局部容器，用来修饰部分元素的空间排布。

StackPanel

适合在局部对于水平或者垂直方向要求进行布局的页面。.

放置几个Button按钮

默认排列方式为从上而下。

<StackPanel>
   <Button Width="100" Height="50"/>
   <Button Width="100" Height="50"/>
   <Button Width="100" Height="50"/>
   <Button Width="100" Height="50"/>
   <Button Width="100" Height="50"/>
</StackPanel>

设置排列方向

使用Orientation属性修改排列方向。其中Horizontal为水平排列，Vertical为垂直排列。

<StackPanel Orientation="Horizontal">
   <Button Width="100" Height="50"/>
   <Button Width="100" Height="50"/>
   <Button Width="100" Height="50"/>
   <Button Width="100" Height="50"/>
   <Button Width="100" Height="50"/>
</StackPanel>

<StackPanel Orientation="Vertical">
   <Button Width="100" Height="50"/>
   <Button Width="100" Height="50"/>
   <Button Width="100" Height="50"/>
   <Button Width="100" Height="50"/>
   <Button Width="100" Height="50"/>
</StackPanel>

WrapPanel

可以看做自动换行功能的StackPanel容器。

放置几个Button按钮

默认排列方式为水平排列。

<WrapPanel Grid.Row="1">
   <Button Width="100" Height="50"/>
   <Button Width="100" Height="50"/>
   <Button Width="100" Height="50"/>
   <Button Width="100" Height="50"/>
   <Button Width="100" Height="50"/>
</WrapPanel>

设置排列方向

使用Orientation属性修改排列方向。其中Horizontal为水平排列，Vertical为垂直排列。

<WrapPanel Grid.Row="1" Orientation="Horizontal">
   <Button Width="100" Height="50"/>
   <Button Width="100" Height="50"/>
   <Button Width="100" Height="50"/>
   <Button Width="100" Height="50"/>
   <Button Width="100" Height="50"/>
</WrapPanel>

<WrapPanel Grid.Row="1" Orientation="Vertical">
   <Button Width="100" Height="50"/>
   <Button Width="100" Height="50"/>
   <Button Width="100" Height="50"/>
   <Button Width="100" Height="50"/>
   <Button Width="100" Height="50"/>
</WrapPanel>

StackPanel与WrapPanel的区别

StackPanel不会根据元素是否能够完整分布而进行换行、换列调整，但WrapPanel可以自动调整。

DockPanel停靠容器

DockPanel停靠容器，专门负责自适应窗口的布局定义一个区域，在此区域中，可以使子元素通过描点的形式排列，这些对象位于 Children 属性中。类似于WinForm中控件的Dock属性。DockPanel会对每个子元素进行排序，并将根据指定的边进行停靠，多个停靠在同侧的元素则按顺序排序。在DockPanel中，指定停靠边的控件，会根据定义的顺序占领边角，所有控件绝不会交叠。
默认情况下，后添加的元素只能使用剩余空间，无论对DockPanel的最后一个子元素设置任何停靠值，该子元素都将始终填满剩余的空间。

放置几个Button按钮

<Grid>
   <DockPanel>
       <Button Width="100" Height="50"/>
       <Button Width="100" Height="50"/>
       <Button Width="100" Height="50"/>
       <Button Width="100" Height="50"/>
    </DockPanel>
</Grid>

最后一个元素不填充剩余区域

如果不希望最后一个元素填充剩余区域，可以将DockPanel属性LastChildFill设置为false，还必须为最后一个子元素显式指定停靠方向。

<Grid>
   <DockPanel LastChildFill="False">
       <Button Width="100" Height="50"/>
       <Button Width="100" Height="50"/>
       <Button Width="100" Height="50"/>
       <Button Width="100" Height="50"/>
   </DockPanel>
</Grid>

指定元素停靠方向

设置DockPanel的Dock属性，指定元素停靠方向。

    <Grid>
        <DockPanel LastChildFill="False">
            <Button Width="100" Height="50"/>
            <Button Width="100" Height="50"/>
            <Button Width="100" Height="50"/>
            <Button Width="100" Height="50" DockPanel.Dock="Right"/>
        </DockPanel>
    </Grid>