Grid 和 StackPanel 的区别

• 下载源代码

Grid与Stack Panel

您是WPF新手，并且对使用grid和stack panel感到困惑吗？ 如果您的答案是肯定的，那么您来对地方了。

当我开始WPF开发时，我对XAML一无所知，我脑海中的第一个困惑是关于Grid和Stack panel的用法。有什么区别，应该使用哪个？

让我来指导您。过去，布局曾经很简单，但是现在我们希望它们具有适应性，以使其能够在多个设备上运行。 首先，请记住它们都是容器。

容器用于在Windows平台基础控件中进行定位。 它们具有children属性，因此可以容纳多个元素。 通过将任何控件嵌入到布局控件中，您实际上是在调用Children集合属性的Add方法。

Grid

当您创建一个新项目时，默认情况下会为您提供grid。 该grid具有一行和一列，并使其成为一个覆盖整个空间的大单元格。 Grid就像一个矩阵，您可以通过告诉它行和列来放置元素。

在此示例中，我将制作一个3x3的grid，即9个单元格，然后我们可以将元素放置在任何特定的单元格中。

通过编写以下代码来创建三行和三列

       <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

Height和width用于定义特定行和列的大小，并且任何单元格都可以具有任何大小。

大小可以用以下三种方式表示

1. 显式像素，但不首选 – 100
2. Auto - 使用它包含的元素的最大值来定义宽度/高度
3. * (星号大小) - 利用所有可用空间
   • 1* - 在所有可用空间中，将给予1个“份额”
   • 2* - 在所有可用空间中，将给予2个“份额”
   • 3* - 在所有可用空间中，将给予3个“份额”
   • * - 在所有可用空间中，将给予整个份额

以下代码将生成一个包含数字的矩阵，您可以通过using Grid.Row="" & Grid.Column=""属性来访问它们，并且可以在其中包含所需的元素。

 <Page.Resources>
        <Style TargetType="TextBlock">
            <Setter Property="FontSize" Value="42" />
            <Setter Property="Foreground" Value="Black" />
        </Style>
    </Page.Resources>

    <Grid Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <TextBlock>1</TextBlock>
        <TextBlock Grid.Column="1">2</TextBlock>
        <TextBlock Grid.Column="2">3</TextBlock>
        <TextBlock Grid.Row="1">4</TextBlock>
        <TextBlock Grid.Row="1" Grid.Column="1">5</TextBlock>
        <TextBlock Grid.Row="1" Grid.Column="2">6</TextBlock>
        <TextBlock Grid.Row="2">7</TextBlock>
        <TextBlock Grid.Row="2" Grid.Column="1">8</TextBlock>
        <TextBlock Grid.Row="2" Grid.Column="2">9</TextBlock>
    </Grid>

这将生成以下输出

Stack Panel

Stack Panel的作用就像一个接一个放置的事物堆栈。 它可以是水平或垂直的。 与Grid不同，您无法访问堆栈面板中的特定位置，每个下一个元素将按顺序一个接一个地放置。

如果选择水平方向，则Stack Panel默认具有垂直方向，默认从左到右流动。

以下代码将生成一个stack panel，其中包含三个垂直堆叠在一起的彩色矩形。

    <StackPanel Orientation="Vertical">
              <Rectangle Height="200" Width="Auto" Fill="Yellow"></Rectangle>
              <Rectangle Height="200" Width="Auto" Fill="Green"></Rectangle>
              <Rectangle Height="200" Width="Auto" Fill="Blue"></Rectangle>
     </StackPanel>

由于默认使用垂直方向，因此无需提及方向。 此代码将生成以下输出

以下代码将生成水平方向的stack panel

    <StackPanel Orientation="Horizontal">
        <Rectangle Height="Auto" Width="100" Fill="Yellow"></Rectangle>
        <Rectangle Height="Auto" Width="100" Fill="Green"></Rectangle>
        <Rectangle Height="Auto" Width="100" Fill="Blue"></Rectangle>
    </StackPanel>

这将具有以下输出

结论

您可以清楚地自己观察到它们之间的区别，现在您可以决定何时使用哪个。

Stack panels可以在stack panel内部放置stack panels，它们可以组合起来以制作漂亮的布局。 在制作列表类型布局时，首选使用Stack panels，以便每个元素可以一个接一个地堆叠，并且可以在多个屏幕上相应地进行调整。

当您要定义一个特定的单元格，并且不希望元素按顺序排列时，可以使用Grids。

Grid将重叠控件，但是StackPanel会堆叠它们。 两者都有各自的用法，您可以根据需要做出选择。