WPF入门基础布局容器-E-元素

1.StackPanel

将包含在里面的元素排列成水平或垂直的一行，默认摆放为垂直样式，可以通过Orientation 属性进行修改，Horizontal为水平样式即横过来，Vertical为竖直样式，下面我们为大家演示方便理解。

1.1 StackPanel Orientation=Vertical

Vertical是垂直的意思，也是默认的元素展示样式。

<StackPanel>
    <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"/>
</StackPanel>

这两段代码区别在于多给了一个Vertical的Orientation属性，但是显示的效果都如下图所示。

1.2 StackPanel Orientation=Horizontal

Horizontal的意思是水平、横向,不会默认展示，需要手动设置Orientation属性。

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

显示的样式为

2.WrapPanel

WrapPanel是一个自适应的容器，当容器内元素的长度/宽度放不下时，会自动进行换行。

<WrapPanel >
    <Button Width="200" Height="50"/>
    <Button Width="200" Height="50"/>
    <Button Width="200" Height="50"/>
    <Button Width="200" Height="50"/>
    <Button Width="200" Height="50"/>
</WrapPanel>

它也包含了Orientation属性，方便使用者选择水平排列还是竖直排列。使用方法和StackPanel容器一样，所以下面直接展示。

2.1 WrapPanel Orientation=Vertical

<WrapPanel  Orientation="Vertical">
            <Button Width="100" Height="90"/>
            <Button Width="100" Height="90"/>
            <Button Width="100" Height="90"/>
            <Button Width="100" Height="90"/>
            <Button Width="100" Height="90"/>
</WrapPanel>

2.2 WrapPanel Orientation=Horizontal

<WrapPanel  Orientation="Horizontal">
            <Button Width="100" Height="90"/>
            <Button Width="100" Height="90"/>
            <Button Width="100" Height="90"/>
            <Button Width="100" Height="90"/>
            <Button Width="100" Height="90"/>
</WrapPanel>
<!--等同于下面的代码，因为Orientation属性默认为水平样式的-->
<WrapPanel>
            <Button Width="100" Height="90"/>
            <Button Width="100" Height="90"/>
            <Button Width="100" Height="90"/>
            <Button Width="100" Height="90"/>
            <Button Width="100" Height="90"/>
</WrapPanel>

3.DockPanel

可以根据容器的边界、元素进行Top（上）、Buttom（下）、Left（左）、Right（右）的排布设置。

我们先来看下默认的样式：

<DockPanel>
    <Button Width="100" Height="90"/>
    <Button Width="100" Height="90"/>
    <Button Width="100" Height="90"/>
    <Button Width="100" Height="90"/>
    <Button Width="100" Height="90"/>
</DockPanel>

然后我们关闭最后一位元素的填充 ==LastChildFill== ，然后再来看看排布的样式。

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

使用Dock. 位置布局

<DockPanel LastChildFill="False">
            <Button DockPanel.Dock="Top" Width="100" Height="90" Content="按钮1   上" />
            <Button DockPanel.Dock="Bottom" Width="100" Height="90" Content="按钮2    下" /> 
            <Button DockPanel.Dock="Left" Width="100" Height="90" Content="按钮3    左" />
            <Button DockPanel.Dock="Right" Width="100" Height="90" Content="按钮4    右" />
</DockPanel>

Grid

<Grid.ColumnDefinitions>
            <ColumnDefinition Width="200"/>
            <ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>

<Grid.RowDefinitions>
            <RowDefinition Height="200"/>
            <RowDefinition Height="2*"/>
</Grid.RowDefinitions>

<!--默认为0行0列-->
<Border Background="Red"/>
<!--手动控制它填充的元素-->
<Border Background="Yellow" Grid.Row="0" Grid.Column="1"/>

<Border Background="Blue" Grid.Row="1" />

<Border Background="Green" Grid.Row="1" Grid.Column="1"/>

</Grid>