XAML栈式布局

开发工具与关键技术：Visual Studio 2017

作者：邓崇富

撰写时间：2019 年 7 月 17 日

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

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

看看默认的布局方式：

1. 默认情况下，是水平布局。像不像一个栈底在上的栈，我们把每个控件不停地压进去呢？

2. 默认情况下，是Stretch，也就是拉伸方式来填充我们的控件屏幕。

3. 默认情况下，是居中布局。

例如下面的例子：

<Window x:Class="WPF课件练习.StackPanel"

        <!--此出省略引用的命名空间-->

        Title="栈式布局" Height="450" Width="800">

    <Window.Resources>

        <Style TargetType="GroupBox">

            <Setter Property="HorizontalAlignment" Value="Left"/>

        </Style>

    </Window.Resources>

    <Grid>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="97*"/>

            <ColumnDefinition Width="101*"/>

        </Grid.ColumnDefinitions>

        <Grid Grid.Column="0">

            <StackPanel Orientation="Vertical" VerticalAlignment="Stretch">

                <GroupBox Header="网站分类" Height="Auto" Width="200">

                    <StackPanel Orientation="Vertical">

                        <Button Content=".NET技术(16)" Style="{StaticResource ButtonStyle}"/>

                        <Button Content="编程语言(13)" Style="{StaticResource ButtonStyle}"/>

                        <Button Content="软件设计(3)" Style="{StaticResource ButtonStyle}"/>

                        <Button Content="Web前端(16)" Style="{StaticResource ButtonStyle}"/>

                        <Button Content="软件工程(26)" Style="{StaticResource ButtonStyle}"/>

                    </StackPanel>

                </GroupBox>

                <GroupBox Header="链接" Height="Auto" Width="200">

                    <StackPanel Orientation="Vertical">

                        <Button Content="反馈和建议" Style="{StaticResource ButtonStyle}"/>

                        <Button Content="官方博客" Style="{StaticResource ButtonStyle}"/>

                        <Button Content="电子期刊"  Style="{StaticResource ButtonStyle}"/>

                        <Button Content="人才服务" Style="{StaticResource ButtonStyle}"/>

                        <Button Content="博客模板" Style="{StaticResource ButtonStyle}"/>

                    </StackPanel>

                </GroupBox>

            </StackPanel>

        </Grid>

        <Grid Grid.Column="1">

            <CheckBox Content="选择" Width="50" Height="30" Margin="20,20,334,369"/>

            <RadioButton Content="确认" Width="50" Height="30" Margin="124,20,230,369" RenderTransformOrigin="1.78,2.1" />

            <Slider Width="200"  Value="100" Background="#FFE0A3A3" Margin="179,20,25,383"/>

           

        </Grid>

    </Grid>

</Window>

首先把窗体分成两列，设置每列所占窗体宽的比例，代码如下：

<Grid.ColumnDefinitions>

            <ColumnDefinition Width="97*"/>

            <ColumnDefinition Width="101*"/>

        </Grid.ColumnDefinitions>

然后把左边的部分内容放在第一列（注意：在WPF中布局的行和列都是从0开始的），把Grid.Column="0"的值设置为0，然后里面再放StackPanel布局控件，代码如下：

<Grid Grid.Column="0">

            <StackPanel Orientation="Vertical" VerticalAlignment="Stretch">

                <GroupBox Header="网站分类" Height="Auto" Width="200">

                    <StackPanel Orientation="Vertical">

                        <Button Content=".NET技术(16)" Style="{StaticResource ButtonStyle}"/>

                        <Button Content="编程语言(13)" Style="{StaticResource ButtonStyle}"/>

                        <Button Content="软件设计(3)" Style="{StaticResource ButtonStyle}"/>

                        <Button Content="Web前端(16)" Style="{StaticResource ButtonStyle}"/>

                        <Button Content="软件工程(26)" Style="{StaticResource ButtonStyle}"/>

                    </StackPanel>

                </GroupBox>

                <GroupBox Header="链接" Height="Auto" Width="200">

                    <StackPanel Orientation="Vertical">

                        <Button Content="反馈和建议" Style="{StaticResource ButtonStyle}"/>

                        <Button Content="官方博客" Style="{StaticResource ButtonStyle}"/>

                        <Button Content="电子期刊"  Style="{StaticResource ButtonStyle}"/>

                        <Button Content="人才服务" Style="{StaticResource ButtonStyle}"/>

                        <Button Content="博客模板" Style="{StaticResource ButtonStyle}"/>

                    </StackPanel>

                </GroupBox>

            </StackPanel>

        </Grid>

最后右边的部分内容则设置Grid.Column="1"的值为1，代码如下：

<Grid Grid.Column="1">

            <CheckBox Content="选择" Width="50" Height="30" Margin="20,20,334,369"/>

            <RadioButton Content="确认" Width="50" Height="30" Margin="124,20,230,369" RenderTransformOrigin="1.78,2.1" />

            <Slider Width="200"  Value="100" Background="#FFE0A3A3" Margin="179,20,25,383"/>

           

 </Grid>

还有就是可以在界面里面设置界面级的样式资源，直接在样式里设置TargetType的属性值为控件的名称即可，同时还可以通过在控件里引用样式资源字典里面的样式，格式如：Style="{StaticResource ButtonStyle} ，StaticResource后面紧跟资源字典里面的样式属性TargetType的值即可。

上面代码的运行效果如下：