WPF控件介绍(四)

本文介绍了WPF中的两种布局控件:WrapPanel和UniformGrid。WrapPanel会根据空间自动换行,调整Element的排列方向;而UniformGrid则提供均等的行列布局,简化窗口设计。详细探讨了两者的关键属性如Orientation、ItemHeight/Width以及FlowDirection等,并通过实例展示了它们在不同场景下的效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

WrapPanel:自动折行面板(环绕面板)
WrapPanel布局面板将各个控件从左至右按照行或列的顺序罗列,当长度或高度不够时就会自动调整进行换行,后续排序按照从上至下或
从右至左的顺序进行。
Orientation——根据内容自动换行。当Orientation属性的值设置为 Horizontal:元素是从左向右排列的,然后自上至下自动换行。当
Orientation属性的值设置为Vertical:元素是从上向下排列的,然后从左至右自动换行。
ItemHeight——所有子元素都一致的高度。每个子元素填充高度的方式取决于它的VerticalAlignment属性、Height属性等。任何比
ItemHeight高的元素都将被截断。
ItemWidth——所有子元素都一致的宽度。每个子元素填充高度的方式取决于它的VerticalAlignment属性、Width属性等。任何比
ItemWidth高的元素都将被截断。

Orientation属性的值设置为 Horizontal
窗体宽度较小时的效果
在这里插入图片描述

窗体宽度拉大以后的效果
在这里插入图片描述

XAML实现代码

<WrapPanel Orientation="Horizontal">
    <Button Width="100">按钮1</Button> 
    <Button Width="100">按钮2</Button> 
    <Button Width="100">按钮3</Button> 
    <Button Width="100">按钮4</Button>
    <Button Width="100">按钮5</Button>
    <Button Width="100">按钮6</Button>
</WrapPanel>

Orientation属性的值设置为Vertical
窗体高度较小时的效果
在这里插入图片描述

窗体高度较大时候的效果
在这里插入图片描述

XAML实现代码

<WrapPanel Orientation="Vertical">
    <Button Width="100">按钮1</Button> 
    <Button Width="100">按钮2</Button> 
    <Button Width="100">按钮3</Button> 
    <Button Width="100">按钮4</Button>
    <Button Width="100">按钮5</Button>
    <Button Width="100">按钮6</Button>
</WrapPanel>

UniformGrid:均分布局
与Grid布局控件相比,UniformGrid布局控件很少使用。Grid面板是用于创建简单乃至复杂窗口布局的通用工具。UniformGrid面板是一个一种更特殊的布局容器,主要用于在一个刻板的网格中快速地布局元素。

UniformGrid 布局面板和Grid 面板相似,将子元素按照行列的方式排列。但是与Grid 有以下不同:

  • 不需要指定行和列的大小
  • 所有列都是相同的宽度
  • 所有行都是相同的高度
  • 要指定预期的行和列的数目
  • 不需要给子元素指定所在的行和列

子元素将自动的根据添加是顺序从第一行开始显示在对应的行和列中,每样都是从左至右。

UniformGrid 中的第一个子元素不一定必须在第一行第一个单元格。设置FirstColumn 属性可以设置子元素显示的起始列(最小为0)。


当设置FirstColumn 属性值为3的时候,第一个元素显示在第一行的第3列(从0开始)

如果想改变子元素每一行的排列的方向,可以设置UniformGrid 的FlowDirection 属性。其值可以是LeftToRight(默认)从左往右,也可以是 RightToLeft 从右往左。

设置FlowDirection 属性为RightToLeft

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值