布局之WrapPanel与StackPanel

Posted X·3

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了布局之WrapPanel与StackPanel相关的知识,希望对你有一定的参考价值。

布局之WrapPanel与StackPanel

一、WrapPanel

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

Orientation——根据内容自动换行。当Horizontal选项看上去类似于Windows资源管理器的缩略图视图:元素是从左向右排列的,然后自上至下自动换行。Vertical 选项看上去类似于Windows资源管理器的列表视图:元素是从上向下排列的,然后从左至右自动换行。

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

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

本次的示例,效果图如下2图,图1是宽度比较小,图2就是拉长了宽度后的结果。大家可以在实际做出来之后,自行拉动窗体的宽度:

 

图(1)                                                                             图(2)

上面两图的XAML代码实现

C#代码实现上图实例:

四. StackPanel

StackPanel就是将控件按照行或列来顺序排列,但不会换行。通过设置面板的Orientation属性设置了两种排列方式:横排(Horizontal默认的)和竖排(Vertical)。纵向的StackPanel默认每个元素宽度与面板一样宽,反之横向亦然。如果包含的元素超过了面板空间,它只会截断多出的内容。元素的Margin属性用于使元素之间产生一定得间隔,当元素空间大于其内容的空间时,剩余空间将由HorizontalAlignment和 VerticalAlignment属性来决定如何分配。

本示例要实现的效果如下2图,图1是横排,图2是竖排。

                                 图(1)                                                               图2

上两图的XAML代码实现:

上图示例的C#代码实现:

注: 当把StackPanel的FlowDirection属性设置为RightToLeft,Orientation属性设置为Horizontal,StackPanel将从右向左排列元素

以上是关于布局之WrapPanel与StackPanel的主要内容,如果未能解决你的问题,请参考以下文章

WPF入门教程系列七——布局之WrapPanel与StackPanel

页面布局-Grid,StackPanel,DockPanel,WrapPanel

WPF学习第七章 WrapPanel和DockPanel面板

WrapPanel 和 DockPanel

2021-08-16 WPF控件专题 WrapPanel 控件详解

WPF教程三;布局之WrapPanel面板