StackPanel Control in XAML

Like the Grid, the StackPanel is a layout control. Unlike the Grid, which requires you to declare the number of rows and columns initially, the StackPanel is used to lay out its contained controls in a linear manner across either a vertical or horizontal plane—one after another until they are all displayed.
The StackPanel has the advantage of being a bit simpler to use than the Grid because the developer does not have to declare the position of each control. This may seem trivial, but in cases where the potential exists for a grid with even as little as tens of rows and columns, the act of inserting a new control or controls somewhere in the middle (or even the beginning, for that matter) of the layout requires updating the RowDefinitions or ColumnDefinitions property of the Grid as well as the Grid.Row or Grid.Column property of each control that is being displaced by the addition of the new control. This makes StackPanel ideal for situations that don’t have the layout requirements to make using a Grid necessary.

These are some properties that are commonly specified for a StackPanel control:

• Height and Width: These properties control the size of the container. If these properties
are not specified by the page author, the control will size itself appropriately to contain
all of its content. When Height or Width is specified, any content that would push beyond
these bounds is clipped and not displayed.

• Background: This property controls the Brush that is used for the background of the control.

• DataContext: This property does not impact the way the control looks but can be
important when used with data binding, which I will discuss in a later chapter.

• Orientation: This property controls whether the StackPanel expands along a vertical
plane, which is its default, or along a horizontal plane.

Because StackPanel does not require the type of layout declaration needed by Grid, placing a StackPanel onto a page is as easy as using the following XAML:

<StackPanel Background="White" Orientation="Vertical">
</StackPanel>

I’ve included Orientation = "Vertical" in the XAML to make the orientation clear to the user, but because Vertical is the default value, it doesn’t necessarily have to be specified at all in this case. To arrange controls within the StackPanel, we simply include them in the XAML between the
< StackPanel > </StackPanel > tags, as in the following XAML:

<StackPanel Background="White" Orientation="Vertical">
           <TextBlock Text="Text Block 1" FontFamily="Segoe UI" FontSize="24" />
           <TextBlock Text="Text Block 2" FontFamily="Segoe UI" FontSize="24" />
           <TextBlock Text="..." FontFamily="Segoe UI" FontSize="24" />
           <TextBlock Text="Text Block 100" FontFamily="Segoe UI" FontSize="24" />
</StackPanel>

The controls will then be laid out in the order that they appeared in the XAML, as in Figure

                                      --->StackPanel with Vertical orientation

By changing Orientation = "Vertical" to Orientation = "Horizontal", you change the flow of the display
and end up looking more like Figure

                                   -->StackPanel with Horizontal orientation

One very common usage pattern for StackPanel is to nest StackPanel instances within another StackPanel, often using different orientations. For example, if I wanted to create a data entry form, I might use the following:

XAML to achieve the result shown in Figure:

<StackPanel Background="White" Orientation="Horizontal">
           <StackPanel Orientation="Vertical" Margin="5">
                      <TextBlock Text="Last Name" FontFamily="Segoe UI" FontSize="24" />
                      <TextBox />
           </StackPanel>
           <StackPanel Orientation="Vertical" Margin="5">
                      <TextBlock Text="First Name" FontFamily="Segoe UI" FontSize="24" />
                      <TextBox />
           </StackPanel>
</StackPanel>

                                          --->Nested StackPanels