个人网站创建,湛江建站价格,其中最重要的网络设计结果,中文外贸网站建设WrapPanel控件#xff08;瀑布流布局#xff09;
WrapPanel控件表示将其子控件从左到右的顺序排列#xff0c;如果第一行显示不了#xff0c;则自动换至第二行#xff0c;继续显示剩余的子控件。我们来看看它的结构定义#xff1a; public class WrapPanel : Panel
{pub…WrapPanel控件瀑布流布局
WrapPanel控件表示将其子控件从左到右的顺序排列如果第一行显示不了则自动换至第二行继续显示剩余的子控件。我们来看看它的结构定义 public class WrapPanel : Panel
{public static readonly DependencyProperty ItemWidthProperty;public static readonly DependencyProperty ItemHeightProperty;public static readonly DependencyProperty OrientationProperty;public WrapPanel();public double ItemWidth { get; set; }public double ItemHeight { get; set; }public Orientation Orientation { get; set; }protected override Size ArrangeOverride(Size finalSize);protected override Size MeasureOverride(Size constraint);}提供了3个属性分别是Orientation代表子控件的排列方向ItemWidth代表子控件的最大宽度ItemHeight代表子控件的最大高度。默认的排列方向是水平方向。
1. 水平排列 WrapPanel OrientationHorizontalButton Content1 Margin5 HorizontalAlignmentLeft/Button Content2 Margin5 HorizontalAlignmentRight/Button Content3 Margin5 HorizontalAlignmentCenter/Button Content4 Margin5 HorizontalAlignmentStretch/Button Content5 Margin5 /Button Content6 Margin5 /Button Content7 Margin5 /Button Content8 Margin5 /Button Content9 Margin5 /Button Content10 Margin5 //WrapPanel注意 WrapPanel的子元素的高度和宽度都是根据子元素自身内容的尺寸呈现。另外当WrapPanel处于水平排列时子元素的HorizontalAlignment是不起作用的。
2. 垂直排列 WrapPanel OrientationVerticalButton Content1 Margin5 HorizontalAlignmentLeft/Button Content2 Margin5 HorizontalAlignmentRight/Button Content3 Margin5 HorizontalAlignmentCenter/Button Content4 Margin5 HorizontalAlignmentStretch/Button Content5 Margin5 /Button Content6 Margin5 /Button Content7 Margin5 /Button Content8 Margin5 /Button Content9 Margin5 /Button Content10 Margin5 /Button Content12 Margin5 /Button Content13 Margin5 /Button Content14 Margin5 /Button Content15 Margin5 /Button Content16 Margin5 /Button Content17 Margin5 /Button Content18 Margin5 /Button Content19 Margin5 /Button Content20 Margin5 //WrapPanel这里我们放了20个button在WrapPanel控件中并设置Orientation属性为Vertical垂直排列此时请观察前面3个按钮的HorizontalAlignment状态可以很清晰的看到第一个按钮居左显示第二个按钮居右显示第三个按钮居中显示说明在Vertical垂直排列下子元素的水平状态才会生效反之亦然。
3. 指定子元素宽高 WrapPanel OrientationHorizontal ItemWidth80 ItemHeight80Button Content1 Margin5 HorizontalAlignmentLeft/Button Content2 Margin5 HorizontalAlignmentRight/Button Content3 Margin5 HorizontalAlignmentCenter/Button Content4 Margin5 HorizontalAlignmentStretch/Button Content5 Margin5 /Button Content6 Margin5 /Button Content7 Margin5 /Button Content8 Margin5 /Button Content9 Margin5 /Button Content10 Margin5 //WrapPanelDockPanel控件停靠布局
官方解释定义一个区域从中可以按相对位置水平或垂直排列各个子元素先看下它的结构
public class DockPanel : Panel
{public static readonly DependencyProperty LastChildFillProperty;public static readonly DependencyProperty DockProperty;public DockPanel();public bool LastChildFill { get; set; }public static Dock GetDock(UIElement element);public static void SetDock(UIElement element, Dock dock);protected override Size ArrangeOverride(Size arrangeSize);protected override Size MeasureOverride(Size constraint);}DockPanel提供了一个LastChildFill 属性用来指示最后一个子元素是否填满剩余的空间。其次它还提供了一个枚举依赖属性叫Dock。这个属性是附加到子元素身上的用来指示子元素在DockPanel显示停靠方位其值分为LeftRightTopBottom。
DockPanel因为继承了FrameworkElement基类所以还可以使用FrameworkElement基类的HorizontalAlignment水平对齐和VerticalAlignment垂直对齐两个属性用来设置子元素的排列方式。
1. 经典布局 DockPanelButton DockPanel.DockLeft Content1 Margin5 /Button DockPanel.DockTop Content2 Margin5 /Button DockPanel.DockRight Content3 Margin5 /Button DockPanel.DockBottom Content4 Margin5 /Button Content5 Margin5 //DockPanel这是DockPanel最经典的布局方式上下左右都停靠一个控件中间剩余的空间全部由最后一个控件填满。
2. 水平布局 DockPanel LastChildFillFalse HorizontalAlignmentCenterButton Content1 Margin5 /Button Content2 Margin5 /Button Content3 Margin5 /Button Content4 Margin5 /Button Content5 Margin5 //DockPanel我们只需要设置LastChildFill为False并设置HorizontalAlignment属性并再指定子控件的停靠方向。
或者 DockPanel LastChildFillFalse VerticalAlignmentTopButton Content1 Margin5/Button Content2 Margin5/Button Content3 Margin5/Button Content4 Margin5/Button Content5 Margin5//DockPanel
