WPF 控件专题 WrapPanel 控件详解

article/2025/10/25 18:47:47

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、效果图

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