当前位置：首页 > news >正文

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

news 来源：原创 2024/9/20 17:42:35

UniformGrid控件（均分布局）

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

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

1. 默认情况

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

    <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列，同时设置第一行第一个单元格保持空白。

    <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集合中的元素呈现在界面上时，只能是按水平或垂直方式布局。

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. 垂直排列

    <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. 水平排列

    <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后，子控件的宽度和高度都会重新计算，主要是根据自身内容的尺寸计算。

<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>