#322 – Giving StackPanel Child Controls an Explicit Size

By default, a StackPanel will automatically size its child controls–either to fit their content, or to stretch them to fit the StackPanel‘s height or width.

You can also specify an explicit size for any child control, using the Height and Width properties.  These values override the HorizontalAlignment.Stretch or VerticalAlignment.Stretch property values.  (Note that Stretch is the default value for both of these properties).

    <StackPanel >
        <Label Content="Gene Autry the singing cowboy" Background="Pink"/>

        <!-- No explicit size and HorizontalAlignment defaults to Stretch. -->
        <!-- Height automatically fits content of button. -->
        <Button Content="I Like Gene" />

        <!-- Explicit height for label, width stretches -->
        <Label Content="Roy Rogers" Background="Aqua" Height="50"/>

        <!-- Explicith height and width for button -->
        <Button Content="I Like Roy Rogers Yes I Do" Height="50" Width="150"/>
    </StackPanel>

#320 – Default Size of StackPanel Child Controls

By default, a StackPanel uses the following logic for sizing its child controls.

If Orientation is vertical

  • Child height set to fit content
  • Child width stretched to fit width of the StackPanel

If Orientation is horizontal

  • Child width set to fit content
  • Child height stretched to fit height of the StackPanel

The example below shows a set of child controls, layed out vertically.

    <StackPanel>
        <Label Content="Gene Autry the singing cowboy" Background="Pink"/>
        <Button Content="I Like Gene" FontSize="18"/>
        <Label Content="Roy Rogers" Background="Aqua" FontSize="20"/>
        <Button Content="I Like Roy Rogers Yes I Do"/>
        <TextBox Text="This is a TextBox"/>

        <Label Content="Tex Ritter" Background="PaleGoldenrod"/>
        <Button Content="I Like Tex" FontSize="20" />
        <Label Content="Jorge Negrete" Background="Lavender"/>
        <Button Content="I Like Jorge Yes I Do"/>
    </StackPanel>

Setting the Orientation to horizontal gives us:

#319 – The StackPanel Stacks Controls Vertically or Horizontally

StackPanel is a container that allows arranging its child controls in a single column vertically or a single row horizontally.

Like other panels, StackPanel contains child elements that are instances of the UIElement class.

    <StackPanel>
        <Label Content="Gene Autry"/>
        <Button Content="I Like Gene"/>
        <Label Content="Roy Rogers"/>
        <Button Content="I Like Roy"/>
        <Label Content="Tex Ritter"/>
        <Button Content="I Like Tex"/>
        <Label Content="Jorge Negrete"/>
        <Button Content="I Like Jorge"/>
    </StackPanel>


By default, StackPanel stacks its controls vertically.  You can stack them horizontally using the Orientation property.  You can specify the orientation in XAML as either Horizontal or Vertical.

    <StackPanel Orientation="Horizontal">
        <Label Content="Gene Autry"/>
        <Button Content="I Like Gene"/>
        <Label Content="Roy Rogers"/>
        <Button Content="I Like Roy"/>
        <Label Content="Tex Ritter"/>
        <Button Content="I Like Tex"/>
        <Label Content="Jorge Negrete"/>
        <Button Content="I Like Jorge"/>
    </StackPanel>