WPF 控件专题 StackPanel控件详解

1、StackPanel 介绍

将子元素排列成水平或垂直的一行，属于布局控件，通俗说叫栈式面板。可将包含的元素在水平或垂直方向排成一条线，当移除一个元素后，后面的元素会自动向前填充空缺。

StackPanel 中的子元素超出的部分，被截取被隐藏；StackPanel 自身可以嵌套使用，嵌套在其他布局控件中，和其他布局控件结合使用。

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

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

Background：Brush对象，背景。

FlowDirection：获取或设置文本和其他用户界面 (UI) 元素在控制其布局的任何父元素内流动的方向，默认是从左往右显示的；RightToLeft：从右到左；LeftToRight：从左到右。

Height/Width：高度/宽度；MaxHeight/MaxWidth：最大高度/最大宽度；MinHeight/MinWidth：最小高度/最小宽度；

HorizontalAlignment/VerticalAlignment：设置内部元素水平对齐/垂直对齐；

IsEnabled：使能，是否可用；

IsHitTestVisible：声明是否可以返回此元素作为其呈现内容的某些部分的点击测试结果；

IsVisible/Visibility：此元素在界面中是否可见；

Margin：获取或设置元素的外边距；顺序为：上下左右；

Name：获取和设置此元素的标识名称；

Opacity：透明度；

Orientation：获取或设置一个值，该值指示子元素的堆叠维度。Horizontal：水平排布；Vertical：垂直排布；

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

3、具体示例，这里使用Image作为StackPanel的子元素进行布局显示；

<Grid><TextBlock Text="StackPanel 水平方向显示" Foreground="#dddddd" FontSize="15" HorizontalAlignment="Center"/><!--水平显示--><StackPanel Orientation="Horizontal" VerticalAlignment="Top" Margin="0 15"><Image Width="150" Height="100" Margin="10" Source="./huahua.png" Stretch="Fill"/><Image Width="150" Height="100" Margin="10" Source="./huahua.png" Stretch="Fill"/><Image Width="150" Height="100" Margin="10" Source="./huahua.png" Stretch="Fill"/><Image Width="150" Height="100" Margin="10" Source="./huahua.png" Stretch="Fill"/><Image Width="150" Height="100" Margin="10" Source="./huahua.png" Stretch="Fill"/><Image Width="150" Height="100" Margin="10" Source="./huahua.png" Stretch="Fill"/></StackPanel><GridSplitter Height="1" Background="Cyan" Margin="0 130 0 0" HorizontalAlignment="Stretch" VerticalAlignment="Top"/><TextBlock Text="StackPanel 垂直方向显示" Foreground="#dddddd" FontSize="15" HorizontalAlignment="Center" Margin="0 135 0 0"/><!--垂直显示--><StackPanel Orientation="Vertical" VerticalAlignment="Top" Margin="0 150 0 0"><Image Width="150" Height="100" Margin="10" Source="./huahua.png" Stretch="Fill"/><Image Width="150" Height="100" Margin="10" Source="./huahua.png" Stretch="Fill"/><Image Width="150" Height="100" Margin="10" Source="./huahua.png" Stretch="Fill"/><Image Width="150" Height="100" Margin="10" Source="./huahua.png" Stretch="Fill"/><Image Width="150" Height="100" Margin="10" Source="./huahua.png" Stretch="Fill"/><Image Width="150" Height="100" Margin="10" Source="./huahua.png" Stretch="Fill"/></StackPanel>
</Grid>

设置FlowDirection 属性，从右往左显示示例代码如下

<Grid><!--水平显示--><StackPanel Orientation="Horizontal" VerticalAlignment="Top" Margin="0 15" FlowDirection="RightToLeft"><Image Width="150" Height="100" Margin="10" Source="./huahua.png" Stretch="Fill"/><Image Width="150" Height="100" Margin="10" Source="./huahua.png" Stretch="Fill"/><Image Width="150" Height="100" Margin="10" Source="./huahua.png" Stretch="Fill"/></StackPanel>
</Grid>

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

4、效果图

设置FlowDirection 属性，从右往左显示效果图

从上面代码和效果图可以看出，水平显示时，每个子元素控件都是独占一列的；垂直显示时，每一个子元素控件都是独占一行的。

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

5、总结和扩展

StackPanel 是一个受欢迎的面板，由于它方便好用，它会顺序对它的子元素进行排列。它是少数几个没有定义任何附加属性的面板之一。因为没有附加属性来排列子元素，只有一种方法能够定制StackPanel的行为—设置Orientation属性为Horizontal或Vertical，Vertical是默认值。

StackPanel 默认是垂直居中、水平居右显示的，可以通过设置HorizontalAlignment和VerticalAlignment属性进行布局更改；

注：当把StackPanel的FlowDirection属性设置为RightToLeft，Orientation属性设置为Horizontal，StackPanel将从右向左排列元素，否则不起作用。

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

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

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 控件专题 Lable 控件详解
1.Lable 介绍官方释义:表示包含一段任意类型内容的控件.也可以叫标签控件. Label控件和TextBlock看起来非常像.但在使用时就会发现,Label使用的是Content属性而不是Tex ...
WPF 控件专题 Border控件详解
1.Border介绍 Border(边框)是一个装饰的控件,此控件绘制一个边框.一个背景.Border 中只能有一个子控件(Child),若要显示多个子元素,需要在父Border元素中放置一个附加Pa ...
2021-08-11 WPF控件专题 Expander 控件详解
1.Expander 控件介绍折叠控件 GroupBox 带标题 HeaderedContentControl 折叠或展开的特点,IsExpand 是否显示内容,默认False (隐藏的) Expa ...
2021-08-19 WPF控件专题 Expander 控件详解
1.Expander 控件介绍折叠控件 GroupBox 带标题 HeaderedContentControl 折叠或展开的特点,IsExpand 是否显示内容,默认False (隐藏的) Expa ...

WPF 控件专题 StackPanel控件详解

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

最新文章

热门文章