Wpf布局之StackPanel！

文章目录

前言
一、引言
二、使用步骤

前言

Wpf布局之StackPanel！

一、引言

StackPanel面板在水平或垂直的堆栈中放置元素。这个布局容器通常用于更大、更复杂窗口中的一些区域。

二、使用步骤

StackPanel默认是垂直堆叠

c 复制代码

<Grid>
    <StackPanel>
        <Button Height="100" Width="100" Content="按钮1"/>
        <Button Height="100" Width="100" Content="按钮2"/>
        <Button Height="100" Width="100" Content="按钮3"/>
    </StackPanel>
</Grid>

效果图

可以将Orientation属性设置为Horizontal，就可以变成水平堆叠

c 复制代码

<Grid>
    <StackPanel Orientation="Horizontal">
        <Button Height="100" Width="100" Content="按钮1"/>
        <Button Height="100" Width="100" Content="按钮2"/>
        <Button Height="100" Width="100" Content="按钮3"/>
    </StackPanel>
</Grid>

效果如图

上面的按钮都是紧挨在一起的，如果想要让按钮之间留点缝隙，可以使用Margin属性，当Margin属性的值设置为一个代表着为所有的边都设置相同的宽度。

c 复制代码

<Grid>
    <StackPanel Orientation="Horizontal">
        <Button Margin="10" Height="100" Width="100" Content="按钮1"/>
        <Button Margin="10" Height="100" Width="100" Content="按钮2"/>
        <Button Margin="10" Height="100" Width="100" Content="按钮3"/>
    </StackPanel>
</Grid>

效果图

也可以为每条边单独设置一个值，值设置的顺序是从左开始顺时针，即左、上、右、下。

c 复制代码

<Grid>
    <StackPanel Orientation="Horizontal">
        <Button Margin="5,10,15,20" Height="100" Width="100" Content="按钮1"/>
        <Button Height="100" Width="100" Content="按钮2"/>
        <Button Height="100" Width="100" Content="按钮3"/>
    </StackPanel>
</Grid>

效果图

也可以只为左右设置相同的值或者上下设置相同的值。下面代码中Margin="5,15"，代表着左右值边距都设置为5，上下边距都设置为15。

c 复制代码

<Grid>
    <StackPanel Orientation="Horizontal">
        <Button Margin="5,15" Height="100" Width="100" Content="按钮1"/>
        <Button Height="100" Width="100" Content="按钮2"/>
        <Button Height="100" Width="100" Content="按钮3"/>
    </StackPanel>
</Grid>

效果图