WPF 控件专题 WrapPanel 控件详解

1、WrapPanel 介绍

官方释义：WrapPanel（环绕面板）：按从左到右的顺序位置定位子元素，在包含框的边缘处将内容切换到下一行。后续排序按照从上至下或从右至左的顺序进行，具体取决于 Orientation 属性的值。

简单解析：WrapPanel 用于把子控件，以水平或者垂直方向排列，当空间不足时就会自动切换到下一行。适合于需要水平或者垂直排列控件且能自动换行的情况。

水平方向排列时，每一行所有子控件的高度都被统一成固定的值，这个值由最高的那个决定；每一列垂直方向排列时，所有子控件的宽度都被统一成固定的值，这个值由最宽的那个决定。

**************************************************************************************************************

2、WrapPanel 的几个常用的属性介绍

Orientation：获取或设置一个值，该值指定子内容的排列方向，默认是按水平方向排列；

Background：获取或设置用于填充 Brush 的边框之间的区域的 Panel；

Width/Height：宽度和高度；

HorizontalAlignment：获取或设置在父元素(如 Panel 或项控件)中组合此元素时所应用的水平对齐特征；

VerticalAlignment：获取或设置在父元素（如面板或项控件）中组合此元素时所应用的垂直对齐特征；

Margin ：获取或设置元素的外边距；

Opacity：透明度； Name：元素的标识名称； IsEnabled：使能，是否可用

ItemHeight/ItemWidth：获取或设置一个值，该值指定 WrapPanel 中所含全部项的高度/宽度；

**************************************************************************************************************

3、具体示例

代码示例一

<WrapPanel Margin="10"><Border Margin="2" Width="200" Height="200" BorderBrush="Cyan" BorderThickness="1" Background="Yellow"/><Border Margin="2" Width="200" Height="200" BorderBrush="Cyan" BorderThickness="1" Background="YellowGreen"/><Border Margin="2" Width="200" Height="200" BorderBrush="Cyan" BorderThickness="1" Background="LightYellow"/><Border Margin="2" Width="200" Height="200" BorderBrush="Cyan" BorderThickness="1" Background="Green"/><Border Margin="2" Width="200" Height="200" BorderBrush="Cyan" BorderThickness="1" Background="Yellow"/><Border Margin="2" Width="200" Height="200" BorderBrush="Cyan" BorderThickness="1" Background="YellowGreen"/><Border Margin="2" Width="200" Height="200" BorderBrush="Cyan" BorderThickness="1" Background="LightYellow"/><Border Margin="2" Width="200" Height="200" BorderBrush="Cyan" BorderThickness="1" Background="Green"/>
</WrapPanel><!--更改子元素大小，当宽度不足，则会显示到下一行，或者往后补全-->
<WrapPanel Margin="10"><Border Margin="2" Width="200" Height="200" BorderBrush="Cyan" BorderThickness="1" Background="Yellow"/><Border Margin="2" Width="200" Height="200" BorderBrush="Cyan" BorderThickness="1" Background="YellowGreen"/><Border Margin="2" Width="200" Height="200" BorderBrush="Cyan" BorderThickness="1" Background="LightYellow"/><Border Margin="2" Width="250" Height="200" BorderBrush="Cyan" BorderThickness="1" Background="Green"/><Border Margin="2" Width="200" Height="200" BorderBrush="Cyan" BorderThickness="1" Background="Yellow"/><Border Margin="2" Width="200" Height="200" BorderBrush="Cyan" BorderThickness="1" Background="YellowGreen"/><Border Margin="2" Width="200" Height="200" BorderBrush="Cyan" BorderThickness="1" Background="LightYellow"/><Border Margin="2" Width="200" Height="200" BorderBrush="Cyan" BorderThickness="1" Background="Green"/>
</WrapPanel>

代码示例二：使用垂直显示，设置子元素的宽高和水平垂直方向为居中显示，

<!--设置为垂直显示-->
<WrapPanel Margin="10" Orientation="Vertical" HorizontalAlignment="Center"VerticalAlignment="Center" ItemHeight="100" ItemWidth="210"><Border Margin="2" Width="200" Height="200" BorderBrush="Cyan" BorderThickness="1" Background="Yellow"/><Border Margin="2" Width="200" Height="200" BorderBrush="Cyan" BorderThickness="1" Background="YellowGreen"/>
</WrapPanel><!--垂直显示、子元素设定固定宽高、以及水平居中、垂直居中显示-->
<WrapPanel Margin="10" Orientation="Vertical" HorizontalAlignment="Center"VerticalAlignment="Center" ItemHeight="180" ItemWidth="210"><Border Margin="2" Width="200" Height="200" BorderBrush="Cyan" BorderThickness="1" Background="Yellow"/><Border Margin="2" Width="200" Height="200" BorderBrush="Cyan" BorderThickness="1" Background="YellowGreen"/><Border Margin="2" Width="200" Height="200" BorderBrush="Cyan" BorderThickness="1" Background="LightYellow"/><Border Margin="2" Width="250" Height="200" BorderBrush="Cyan" BorderThickness="1" Background="Green"/><Border Margin="2" Width="250" Height="250" BorderBrush="Cyan" BorderThickness="1" Background="Yellow"/><Border Margin="2" Width="200" Height="200" BorderBrush="Cyan" BorderThickness="1" Background="YellowGreen"/><Border Margin="2" Width="200" Height="200" BorderBrush="Cyan" BorderThickness="1" Background="LightYellow"/>
</WrapPanel>

**************************************************************************************************************

4、效果图

示例代码一效果图，左图为固定大小效果图；有图为空间不足，切到下一行显示效果图

代码示例二效果图，左侧为垂直显示效果，右侧为垂直，固定子元素宽高效果图

**************************************************************************************************************

5、总结和扩展

WrapPanel 也是一种常用的布局控件，配合其他布局控件使用，会使得界面布局更合理更美观。

**************************************************************************************************************

WPF 控件专题 WrapPanel 控件详解相关推荐

2021-08-08 WPF控件专题 WrapPanel 控件详解
1.WrapPanel 控件介绍流面板子元素按顺序排列,如果按水平方向:从左到右,超出部分,自动换行到下一行垂直从上到下, 下一列排列方向:Orientation ItemWidth Ite ...
2021-08-16 WPF控件专题 WrapPanel 控件详解
1.WrapPanel 控件介绍流面板子元素按顺序排列,如果按水平方向:从左到右,超出部分,自动换行到下一行垂直从上到下, 下一列排列方向:Orientation ItemWidth Ite ...
DevExpress控件GridControl中的布局详解【转】
DevExpress控件GridControl中的布局详解 [转] 2012-10-24 13:27:28| 分类: devexpress | 标签:devexpress |举报|字号订阅 h ...
利用Animation控件制作帧动画过程详解
利用Animation控件制作帧动画过程详解前言通过Animation控件来达到序列图的播放(素材和示例视频在文章末尾) 一.序列图 (此素材为已经分割好的序列图) 如若序列图在一张图片上,请参考 ...
wpf 客户端【JDAgent桌面助手】详解（二）桌面宠物制作详解
目录区域: 业余开发的wpf 客户端终于完工了..晒晒截图(此文由于当时没有开通csdn博客所以在博客园发了,后续文章都是csdn 首发奥) [晒视频了]业余开发wpf 客户端[JDAgent桌面助 ...
【卷积神经网络结构专题】一文详解AlexNet(附代码实现)
关注上方"深度学习技术前沿",选择"星标公众号", 资源干货,第一时间送达! [导读]本文是卷积神经网络结构系列专题第二篇文章,前面我们已经介绍了第一个真正意义 ...
WPF 控件专题 Image控件详解
1.Image 介绍 Image:表示用于显示图像的控件. Image可以加载以下图像类型:.bmp..gif..ico..jpg..png..wdp 和 .tiff.但是在显示多帧图像时,仅显示第一 ...
WPF 控件专题 Grid 控件详解
1.Grid 介绍定义由列和行组成的灵活的网格区域,Grid顾名思义就是"网格",它的子控件被放在一个一个实现定义好的小格子里面,整齐配列,该对象可包含多个 Children对象 ...
WPF 控件专题 Border控件详解
1.Border介绍 Border(边框)是一个装饰的控件,此控件绘制一个边框.一个背景.Border 中只能有一个子控件(Child),若要显示多个子元素,需要在父Border元素中放置一个附加Pa ...

WPF 控件专题 WrapPanel 控件详解

WPF 控件专题 WrapPanel 控件详解相关推荐

最新文章

热门文章