WPF 控件专题 StackPanel控件详解

最新推荐文章于 2024-06-09 12:57:47 发布

^@^lemon tea^@^

最新推荐文章于 2024-06-09 12:57:47 发布

阅读量6k

点赞数 2

分类专栏： # WPF 控件专题文章标签： wpf StackPanel控件详解 WPF StackPanel

本文链接：https://blog.csdn.net/BYH371256/article/details/125262540

版权

WPF 控件专题专栏收录该内容

53 篇文章 94 订阅

订阅专栏

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将从右向左排列元素，否则不起作用。

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