WrapPanel：自动折行面板（环绕面板）基础简述

article/2025/10/25 18:43:45

WrapPanel布局面板将各个控件从左至右按照行或列的顺序罗列，当长度或高度不够时就会自动调整进行换行或换列，后续排序按照从上至下或从右至左的顺序进行。

Orientation——根据内容自动换行。当Orientation属性的值设置为 Horizontal：元素是从左向右排列的，然后自上至下自动换行。当Orientation属性的值设置为Vertical：元素是从上向下排列的，然后从左至右自动换行。

ItemHeight——所有子元素都一致的高度。每个子元素填充高度的方式取决于它的VerticalAlignment属性、Height属性等。任何比

ItemHeight高的元素都将被截断。

ItemWidth——所有子元素都一致的宽度。每个子元素填充高度的方式取决于它的VerticalAlignment属性、Width属性等。任何比

ItemWidth高的元素都将被截断。

WrapPanel：自动折行面板在默认情况下的排布

XAML代码
<!--WrapPanel：自动折行面板，在默认情况下他是水平排布的，从左往右，从上往下--><WrapPanel><Button>查询</Button><Button>新增</Button><Button>修改</Button><Button>删除</Button>
</WrapPanel>

1.Orientation属性的值设置为 Horizontal

示例效果图如下图1所示

XAML代码
<!--WrapPanel：自动折行面板，在默认情况下他是水平排布的，从左往右--><!--Orientation="Vertical":从上至下--><!--Orientation="Horizontal":从左至右它同时是默认的--><!--长度或高度不够时就会自动调整进行换行或换列--><WrapPanel Orientation="Horizontal"><Button>查询</Button><Button>新增</Button><Button>修改</Button><Button>删除</Button></WrapPanel>

2、Orientation属性的值设置为Vertical

示例效果图如下图2所示

XAML代码
<!--WrapPanel：自动折行面板，在默认情况下他是水平排布的，从左往右--><!--Orientation="Vertical":从上至下--><!--Orientation="Horizontal":从左至右它同时是默认的--><!--长度或高度不够时就会自动调整进行换行或换列--><WrapPanel Orientation="Vertical"><Button>查询</Button><Button>新增</Button><Button>修改</Button><Button>删除</Button></WrapPanel>

Orientation属性的值设置为Vertical 高度height为100超出范围

示例效果图如下图3所示

XAML代码<!--WrapPanel：自动折行面板，在默认情况下他是水平排布的，从左往右--><!--Orientation="Vertical":从上至下--><!--Orientation="Horizontal":从左至右它同时是默认的--><!--长度或高度不够时就会自动调整进行换行或换列--><WrapPanel Orientation="Vertical" Height="100"><!--Orientation="Vertical":从上向下内容超出范围它就会从左往右，意思就是如果它从上往下时发现装不下内容了，它就会从左往右进行内容的显示--><Button Height="100">查询</Button><Button Height="100">新增</Button><Button>修改</Button><Button>删除</Button></WrapPanel>

3、Orientation属性的值设置为Vertical 宽度height为100超出范围

示例效果图如下图4所示

<!--WrapPanel：自动折行面板，在默认情况下他是水平排布的，从左往右--><!--Orientation="Vertical":从上至下--><!--Orientation="Horizontal":从左至右它同时是默认的--><!--长度或高度不够时就会自动调整进行换行或换列--><WrapPanel Orientation="Horizontal" Width="100"><!--Orientation="Horizontal:从左往右内容超出范围它就会从上向下，意思就是如果它从左往右时发现装不下内容了，它就会从上往下进行内容的显示-->
<!--因和DockPanel很像所以也可用Margin进行元素的隔开--><Button Width="100">查询</Button><Button Width="100">新增</Button><Button>修改</Button><Button>删除</Button></WrapPanel>