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

WPF学习(3)- WrapPanel控件(瀑布流布局)+DockPanel控件(停靠布局)

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 Orientation="Horizontal"><Button Content="1" Margin="5" HorizontalAlignment="Left"/><Button Content="2" Margin="5" HorizontalAlignment="Right"/><Button Content="3" Margin="5" HorizontalAlignment="Center"/><Button Content="4" Margin="5" HorizontalAlignment="Stretch"/><Button Content="5" Margin="5" /><Button Content="6" Margin="5" /><Button Content="7" Margin="5" /><Button Content="8" Margin="5" /><Button Content="9" Margin="5" /><Button Content="10" Margin="5" /></WrapPanel>

在这里插入图片描述
注意:
WrapPanel的子元素的高度和宽度都是根据子元素自身内容的尺寸呈现。另外,当WrapPanel处于水平排列时,子元素的HorizontalAlignment是不起作用的。

2. 垂直排列

 <WrapPanel Orientation="Vertical"><Button Content="1" Margin="5" HorizontalAlignment="Left"/><Button Content="2" Margin="5" HorizontalAlignment="Right"/><Button Content="3" Margin="5" HorizontalAlignment="Center"/><Button Content="4" Margin="5" HorizontalAlignment="Stretch"/><Button Content="5" Margin="5" /><Button Content="6" Margin="5" /><Button Content="7" Margin="5" /><Button Content="8" Margin="5" /><Button Content="9" Margin="5" /><Button Content="10" Margin="5" /><Button Content="12" Margin="5" /><Button Content="13" Margin="5" /><Button Content="14" Margin="5" /><Button Content="15" Margin="5" /><Button Content="16" Margin="5" /><Button Content="17" Margin="5" /><Button Content="18" Margin="5" /><Button Content="19" Margin="5" /><Button Content="20" Margin="5" /></WrapPanel>

在这里插入图片描述
这里我们放了20个button在WrapPanel控件中,并设置Orientation属性为Vertical(垂直排列),此时,请观察前面3个按钮的HorizontalAlignment状态,可以很清晰的看到,第一个按钮居左显示,第二个按钮居右显示,第三个按钮居中显示,说明在Vertical垂直排列下,子元素的水平状态才会生效,反之亦然。

3. 指定子元素宽高

    <WrapPanel Orientation="Horizontal" ItemWidth="80" ItemHeight="80"><Button Content="1" Margin="5" HorizontalAlignment="Left"/><Button Content="2" Margin="5" HorizontalAlignment="Right"/><Button Content="3" Margin="5" HorizontalAlignment="Center"/><Button Content="4" Margin="5" HorizontalAlignment="Stretch"/><Button Content="5" Margin="5" /><Button Content="6" Margin="5" /><Button Content="7" Margin="5" /><Button Content="8" Margin="5" /><Button Content="9" Margin="5" /><Button Content="10" Margin="5" /></WrapPanel>

在这里插入图片描述

DockPanel控件(停靠布局)

官方解释,定义一个区域,从中可以按相对位置水平或垂直排列各个子元素,先看下它的结构:

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显示停靠方位,其值分为Left,Right,Top,Bottom。

DockPanel因为继承了FrameworkElement基类,所以还可以使用FrameworkElement基类的HorizontalAlignment(水平对齐)和VerticalAlignment(垂直对齐)两个属性,用来设置子元素的排列方式。

1. 经典布局

    <DockPanel><Button DockPanel.Dock="Left" Content="1" Margin="5" /><Button DockPanel.Dock="Top" Content="2" Margin="5" /><Button DockPanel.Dock="Right" Content="3" Margin="5" /><Button DockPanel.Dock="Bottom" Content="4" Margin="5" /><Button  Content="5" Margin="5" /></DockPanel>

在这里插入图片描述
这是DockPanel最经典的布局方式,上下左右都停靠一个控件,中间剩余的空间,全部由最后一个控件填满。

2. 水平布局

    <DockPanel LastChildFill="False" HorizontalAlignment="Center"><Button Content="1" Margin="5" /><Button Content="2" Margin="5" /><Button Content="3" Margin="5" /><Button Content="4" Margin="5" /><Button Content="5" Margin="5" /></DockPanel>

在这里插入图片描述
我们只需要设置LastChildFill为False,并设置HorizontalAlignment属性,并再指定子控件的停靠方向。

或者

    <DockPanel LastChildFill="False" VerticalAlignment="Top"><Button Content="1" Margin="5"/><Button Content="2" Margin="5"/><Button Content="3" Margin="5"/><Button Content="4" Margin="5"/><Button Content="5" Margin="5"/></DockPanel>

在这里插入图片描述

http://www.lryc.cn/news/416177.html

相关文章:

  • 【python】Python中实现定时任务常见的几种方式原理分析与应用实战
  • 老公请喝茶,2024年老婆必送老公的养生茶,暖暖的很贴心
  • 3d打印相关资料
  • MySQL1 DDL语言
  • el-tree懒加载状态下实现搜索筛选(纯前端)
  • NLP——Transfromer 架构详解
  • 大模型算法面试题(二十)
  • 2024最新最全面的Selenium 3.0 + Python自动化测试框架
  • 海运中的甩柜是怎么回事❓怎么才能避免❓
  • Win11+docker+gpu+vscode+pytorch配置anomalib(2)
  • AI在招聘市场趋势分析中的应用
  • AMEYA360:太阳诱电应对 165℃的叠层金属类功率电感器实现商品化!
  • Nginx进阶-常见配置(三)
  • 开源协作式书签管理器推荐
  • 【线性代数】【二】2.2极大线性无关组与向量空间的基
  • STM32常见的下载方式有三种
  • RK3568-npu模型转换推理
  • 《C语言程序设计 第4版》笔记和代码 第十二章 数据体和数据结构基础
  • 学习记录——day26 进程间的通信 无名管道 无名管道 信号通信 特殊的信号处理
  • WHAT - xmlhttprequest vs fetch vs wretch
  • 吴恩达老师机器学习作业-ex7(聚类)
  • lombok 驼峰命名缺陷,导致后台获取参数为null的解决办法
  • 【dockerpython】亲测有效!适合新手!docker创建conda镜像+容器使用(挂载、端口映射、gpu使用)+云镜像仓库教程
  • 矩阵,求矩阵秩、逆矩阵
  • 指针和const
  • 基于C#调用文心一言大模型制作桌面软件(可改装接口)
  • VScode插件安装
  • 《Milvus Cloud向量数据库指南》——高可用黄金标准:深入解析与业务策略考量
  • sqli-labs注入练习1,2关
  • B站宋红康JAVA基础视频教程个人笔记chapter04