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 也是一种常用的布局控件，配合其他布局控件使用，会使得界面布局更合理更美观。

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