【愚公系列】2024年01月 WPF控件专题 StackPanel控件详解

精选原创

愚公搬代码 2024-01-16 00:30:54 博主文章分类：(完)WPF和Winform控件绘图专题 ©著作权

文章标签 控件 WPF 用户界面 文章分类 .Net 后端开发 私藏项目实操分享

©著作权归作者所有：来自51CTO博客作者愚公搬代码的原创作品，请联系作者获取转载授权，否则将追究法律责任

🏆 作者简介，愚公搬代码 🏆《头衔》：华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，阿里云专家博主，腾讯云优秀博主，掘金优秀博主，51CTO博客专家等。 🏆《近期荣誉》：2022年CSDN博客之星TOP2，2022年华为云十佳博主等。 🏆《博客内容》：.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。 🏆🎉欢迎 👍点赞✍评论⭐收藏

(文章目录)

🚀前言

WPF控件是Windows Presentation Foundation（WPF）中的基本用户界面元素。它们是可视化对象，可以用来创建各种用户界面。WPF控件可以分为两类：原生控件和自定义控件。

原生控件是由Microsoft提供的内置控件，如Button、TextBox、Label、ComboBox等。这些控件都是WPF中常见的标准用户界面元素。

自定义控件则允许开发人员使用XAML和C#等编程语言来创建个性化的用户界面元素。自定义控件可以根据需求提供更多的功能和自定义化选项，以及更好的用户体验。

🚀一、StackPanel控件详解

WPF中的StackPanel控件是一种容器控件，可以用来排列其子元素，使它们垂直或水平地堆叠。StackPanel可以在垂直方向或水平方向上排列元素，具体取决于Orientation属性。StackPanel也可以通过对齐属性来定位子元素，如HorizontalAlignment和VerticalAlignment。

下面是一个使用StackPanel控件的示例：

<StackPanel Orientation="Vertical">
    <TextBlock Text="Hello" />
    <TextBlock Text="World" />
</StackPanel>

这个StackPanel控件包含了两个TextBlock子元素，这两个元素会在垂直方向上堆叠。如果将Orientation属性设置为Horizontal，则两个TextBlock元素会在水平方向上堆叠。

StackPanel也可以包含其他的容器控件，例如Grid和StackPanel。

<StackPanel Orientation="Horizontal">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <TextBlock Grid.Row="0" Grid.Column="0" Text="One" />
        <TextBlock Grid.Row="0" Grid.Column="1" Text="Two" />
        <TextBlock Grid.Row="1" Grid.Column="0" Text="Three" />
        <TextBlock Grid.Row="1" Grid.Column="1" Text="Four" />
    </Grid>
    <StackPanel>
        <TextBlock Text="Five" />
        <TextBlock Text="Six" />
    </StackPanel>
</StackPanel>

这个StackPanel控件包含了一个Grid和一个StackPanel。Grid控件包含了四个TextBlock子元素，这些元素被用Grid.Row和Grid.Column定位。StackPanel包含了两个TextBlock子元素，这两个元素会在垂直方向上堆叠。整个StackPanel会将Grid和StackPanel在水平方向上堆叠。

🔎1.属性介绍

StackPanel是WPF中一种常用的面板控件，它可以使子元素按照给定的方向（横向或者纵向）依次排列。以下是StackPanel控件的属性：

Orientation属性：用于指定子元素的排列方向，可选项为Horizontal（横向）和Vertical（纵向）。
IsItemsHost属性：指示此StackPanel是否作为ItemsPresenter的主机，这允许它成为ItemsControl（如ListBox或ComboBox）的模板部分。
CanHorizontallyScroll和CanVerticallyScroll属性：用于指定是否启用水平或垂直滚动。
HorizontalAlignment和VerticalAlignment属性：用于指定StackPanel在其父元素中的水平对齐和垂直对齐方式。
Height和Width属性：用于指定StackPanel的高度和宽度。
Margin属性：用于指定StackPanel在其父元素中的边距。

🔎2.常用场景

StackPanel控件是一种非常常见的布局控件，常用场景包括：

垂直布局：当需要将多个控件按照垂直方向排列时，可以使用StackPanel控件来实现这个布局效果。例如，一个垂直按钮菜单或者一个竖直的导航栏。
水平布局：当需要将多个控件按照水平方向排列时，也可以使用StackPanel控件。例如，水平按钮菜单或者页眉。
没有复杂的嵌套：StackPanel控件通常建议使用相对较简单的布局需求，如果需要更复杂的布局，建议使用Grid或其他更高级的布局控件。
动态添加控件：StackPanel控件可以动态添加子控件，方便动态布局。例如，根据不同条件添加不同的控件到容器中。
静态布局：StackPanel控件也可以用于静态布局，如果需要静态的展示一些信息，而不需要用户进行交互，可以使用StackPanel来简单地实现布局。

StackPanel控件可以用于很多简单和常用的布局场景，可以快速实现一些页面或者界面的简单布局需求。

🔎3.具体案例

<!--排列成一行或一列  StackPanel默认排列方向：垂直：宽度 水平：高度与父窗口的高度相同-->
<!--子元素超出的部分，会被隐藏-->
<!--<StackPanel Orientation="Vertical" HorizontalAlignment="Center">
    <Button>按钮1</Button>
    <Button Margin="10,0,10,0">按钮2</Button>
    <Button>按钮3</Button>
</StackPanel>-->
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" FlowDirection="RightToLeft">
    <Button>按钮1</Button>
    <Button Margin="10,0,10,0">按钮2</Button>
    <Button>按钮3</Button>
    <Button>按钮1</Button>
    <Button Margin="10,0,10,0">按钮2</Button>
    <Button>按钮3</Button>
    <Button>按钮1</Button>
    <Button Margin="10,0,10,0">按钮2</Button>
    <Button>按钮3</Button>
    <Button>按钮1</Button>
    <Button Margin="10,0,10,0">按钮2</Button>
    <Button>按钮3</Button>
    <Button>按钮1</Button>
    <Button Margin="10,0,10,0">按钮2</Button>
    <Button>按钮3</Button>
    <Button>按钮1</Button>
    <Button Margin="10,0,10,0">按钮2</Button>
    <Button>按钮3</Button>
    <Button>按钮1</Button>
    <Button Margin="10,0,10,0">按钮2</Button>
    <Button>按钮3</Button>
</StackPanel>