WPF学习（2）-UniformGrid控件（均分布局）+StackPanel控件（栈式布局）

UniformGrid控件（均分布局）

UniformGrid和Grid有些相似，只不过UniformGrid的每个单元格面积都是相等的，不管是横向的单元格，或是纵向的单元格，它们会平分整个UniformGrid。

UniformGrid控件提供了3个属性，分别是FirstColumn、Columns 、Rows 。FirstColumn表示第一行要空几个单元格，后面两个属性分别用于设置行数和列数。

1. 默认情况

这是我们没有UniformGrid的属性的效果，它会根据子元素的数量和UniformGrid自身的尺寸来决定行数和列数。

bash 复制代码

    <UniformGrid>
        <Button Content="1" Margin="2"/>
        <Button Content="2" Margin="2"/>
        <Button Content="3" Margin="2"/>
        <Button Content="4" Margin="2"/>
    </UniformGrid>

2. 设置参数

设计当前UniformGrid为3行3列，同时设置第一行第一个单元格保持空白。

bash 复制代码

    <UniformGrid FirstColumn="1" Rows="3" Columns="3">
        <Button Content="1" Margin="2"/>
        <Button Content="2" Margin="2"/>
        <Button Content="3" Margin="2"/>
        <Button Content="4" Margin="2"/>
    </UniformGrid>

3. 总结

UniformGrid控件使用非常简单方便，通常用于局部的布局。

StackPanel控件（栈式布局）

StackPanel用于水平或垂直堆叠子元素。也就是说，StackPanel同样也有一个Children属性，而Children集合中的元素呈现在界面上时，只能是按水平或垂直方式布局。

bash 复制代码

public class StackPanel : Panel, IScrollInfo, IStackMeasure
{
    public static readonly DependencyProperty OrientationProperty;
 
    public StackPanel();
 
    public double HorizontalOffset { get; }
    public double ViewportHeight { get; }
    public double ViewportWidth { get; }
    public double ExtentHeight { get; }
    public double ExtentWidth { get; }
    public bool CanVerticallyScroll { get; set; }
    public bool CanHorizontallyScroll { get; set; }
    public Orientation Orientation { get; set; }
    public double VerticalOffset { get; }
    public ScrollViewer ScrollOwner { get; set; }
    protected internal override Orientation LogicalOrientation { get; }
    protected internal override bool HasLogicalOrientation { get; }
 
    public void LineDown();
    public void LineLeft();
    public void LineRight();
    public void LineUp();
    public Rect MakeVisible(Visual visual, Rect rectangle);
    public void MouseWheelDown();
    public void MouseWheelLeft();
    public void MouseWheelRight();
    public void MouseWheelUp();
    public void PageDown();
    public void PageLeft();
    public void PageRight();
    public void PageUp();
    public void SetHorizontalOffset(double offset);
    public void SetVerticalOffset(double offset);
    protected override Size ArrangeOverride(Size arrangeSize);
    protected override Size MeasureOverride(Size constraint);
 
}

StackPanel提供了一些属性和方法，最常用的是Orientation枚举属性，用于设置子控件在StackPanel内部的排列方式，分别是水平排列（Horizontal）和垂直排列（Vertical）。默认值是垂直排列（Vertical）。

1. 垂直排列

bash 复制代码

    <StackPanel Orientation="Vertical">
        <Button Content="1" Margin="20" />
        <Button Content="2" Margin="20" />
        <Button Content="3" Margin="20" />
        <Button Content="4" Margin="20" />
    </StackPanel>

注意：
当StackPanel子元素处于垂直排列时，此时子元素的宽度默认与StakcPanel的宽度保持一致，但是子元素的高度是与其自身的高度自适应显示。

2. 水平排列

bash 复制代码

    <StackPanel Orientation="Horizontal">
        <Button Content="1" Margin="20" />
        <Button Content="2" Margin="20" />
        <Button Content="3" Margin="20" />
        <Button Content="4" Margin="20" />
    </StackPanel>

注意：
当StackPanel子元素处于水平排列时，此时子元素的高度默认与StakcPanel的高度保持一致，但是子元素的宽度是与其自身的宽度自适应显示。

3. StackPanel控件复杂使用

可以利用子控件的HorizontalAlignment属性或VerticalAlignment来设置子控件在StackPanel内部的显示位置，比如在垂直排列布局模式下，可以设置HorizontalAlignment属性值，Left表示显示在左则，Right显示在右则，Center则居中显示，Stretch表示拉伸填充显示。

需要注意的是，由于WPF的控件布局都是采用自适应计算每个控件的位置，所以在设置了HorizontalAlignment或VerticalAlignment后，子控件的宽度和高度都会重新计算，主要是根据自身内容的尺寸计算。

bash 复制代码

<ScrollViewer>
        <StackPanel Orientation="Vertical">
            <Button Content="1" Margin="20" HorizontalAlignment="Left"/>
            <Button Content="2" Margin="20" HorizontalAlignment="Right"/>
            <Button Content="3" Margin="20" HorizontalAlignment="Center"/>
            <Button Content="4" Margin="20" HorizontalAlignment="Stretch"/>
            <Button Content="5" Margin="20" />
            <Button Content="6" Margin="20" />
            <Button Content="7" Margin="20" />
            <Button Content="8" Margin="20" />
            <Button Content="9" Margin="20" />
        </StackPanel>
    </ScrollViewer>

我们可以看到上图中前三行的按钮都是根据自身内容的宽高自适应绘制的。另外，如果StackPanel内部的子控件太多，则需要配合滚动条容器ScrollViewer控件。