IS InkkSlinger Docs StackPanel
Docs

Controls

StackPanel

StackPanel is the framework's one-axis flow panel. It arranges children in declaration order, either top-to-bottom or left-to-right, and sizes itself from the combined desired size of those children.

Quick start

Use StackPanel when your layout is fundamentally a simple list or strip of elements. It works well for button columns, form sections, option groups, tool rows, and any small composition where child order is the layout.

Minimal vertical stack

<StackPanel>
  <TextBlock Text="Project name" Margin="0,0,0,6" />
  <TextBox Width="240" Margin="0,0,0,10" />
    <Button Content="Create" Width="120" />
</StackPanel>

Horizontal button row

<StackPanel Orientation="Horizontal">
    <Button Content="Save" Margin="0,0,8,0" />
    <Button Content="Publish" Margin="0,0,8,0" />
    <Button Content="Close" />
</StackPanel>

Section with nested groups

<StackPanel Margin="16">
  <TextBlock Text="Audio settings" Margin="0,0,0,10" />

  <StackPanel Margin="0,0,0,12">
    <TextBlock Text="Output device" Margin="0,0,0,4" />
    <ComboBox Width="260" />
  </StackPanel>

  <CheckBox Content="Mute when inactive" Margin="0,0,0,6" />
  <CheckBox Content="Start minimized" />
</StackPanel>

Default recommendation: choose StackPanel for small, readable one-dimensional flows. If you need rows plus columns, proportional sizing, or a true page shell, start with Grid or DockPanel instead.

How StackPanel layout works

StackPanel measures children one at a time and accumulates their size along the stacking axis. In the non-stacking axis, it keeps the largest child size it sees.

Vertical orientation

Children are measured with the available width, but effectively infinite height. Desired width becomes the widest child. Desired height becomes the sum of child heights.

Horizontal orientation

Children are measured with the available height, but effectively infinite width. Desired width becomes the sum of child widths. Desired height becomes the tallest child.

  • The default Orientation is Vertical.
  • Declaration order is the visual order.
  • StackPanel does not insert spacing automatically. Use child Margin for gaps.
  • The panel hosts any number of child elements through its inherited Children collection.
<StackPanel Orientation="Vertical">
  <Border Height="48" Background="#223245" Margin="0,0,0,8" />
  <Border Height="72" Background="#182636" Margin="0,0,0,8" />
  <Border Height="40" Background="#30485F" />
</StackPanel>

That stack wants enough width for the widest border and enough height for all three borders plus their margins.

Arrange behavior and stretching

During arrange, StackPanel gives each child its desired size in the stacking axis, but the full panel size in the cross axis. The child's own alignment properties then decide whether it stretches or sizes to content inside that slot.

Cross-axis stretch by default

Because HorizontalAlignment and VerticalAlignment default to Stretch, children usually expand across the non-stacking axis unless you change alignment or set an explicit size.

Content-sized stacking axis

Each child keeps its desired size in the stacking direction. A vertical stack does not force every child to the same height, and a horizontal stack does not force every child to the same width.

Vertical stack with left-aligned children

<StackPanel Width="320">
    <Button Content="Short action"
          Width="140"
          HorizontalAlignment="Left"
          Margin="0,0,0,8" />
    <Button Content="Stretched action" />
</StackPanel>

Horizontal stack with vertically centered content

<StackPanel Orientation="Horizontal" Height="48">
  <TextBlock Text="Latency"
             VerticalAlignment="Center"
             Margin="0,0,10,0" />
  <TextBox Width="120"
           VerticalAlignment="Center" />
</StackPanel>

Practical rule: a StackPanel controls sequencing, not equalization. If you need uniform row heights, shared columns, or precise alignment between separate child groups, a Grid is usually the better panel.

Orientation

The panel exposes a single layout-specific dependency property, Orientation. Changing it switches both measurement and arrangement rules.

Vertical

The default. Children flow from top to bottom. Width is driven by the widest child. Height is driven by the sum of child heights.

Horizontal

Children flow from left to right. Width is driven by the sum of child widths. Height is driven by the tallest child.

Set orientation in XAML

<StackPanel Orientation="Horizontal">
    <Button Content="Back" Margin="0,0,8,0" />
    <Button Content="Forward" />
</StackPanel>

Set orientation from code

var toolbar = new StackPanel
{
    Orientation = Orientation.Horizontal
};

toolbar.AddChild(new Button { Content = "Refresh" });
toolbar.AddChild(new Button { Content = "History" });

StackPanel inside a ScrollViewer

StackPanel is a common scroll content host. In this framework, a plain stack panel hosted directly as ScrollViewer.Content participates in the default transform-based content scrolling path.

Default behavior

The panel stays arranged in place while the viewer applies scroll offsets through a local render transform. This avoids unnecessary layout invalidation for offset-only scroll changes.

When to use it

This is the normal choice for long vertical forms, sidebars, and simple stacked content that needs viewer-owned scrolling.

<ScrollViewer VerticalScrollBarVisibility="Auto">
  <StackPanel Margin="16">
    <TextBlock Text="General" Margin="0,0,0,12" />
    <CheckBox Content="Enable telemetry" Margin="0,0,0,8" />
    <CheckBox Content="Send crash reports" Margin="0,0,0,8" />
    <CheckBox Content="Download previews" Margin="0,0,0,8" />
    <CheckBox Content="Use hardware acceleration" />
  </StackPanel>
</ScrollViewer>

If you need item virtualization for large data sets, use an items control surface that provides VirtualizingStackPanel rather than a plain authored StackPanel.

Property reference

StackPanel surface

Orientation: Orientation.Vertical or Orientation.Horizontal. Default is Vertical.

Children: inherited read-only collection of hosted child elements.

Inherited properties used often

Background: inherited from Panel; fills the panel's layout slot.

Margin, Width, Height: affect the panel's own placement and size in its parent.

Child Margin: the normal way to create spacing between stacked children.

Child HorizontalAlignment and VerticalAlignment: control whether a child stretches or sizes to content inside its arranged slot.

Patterns and examples

Simple settings column

<StackPanel Width="340">
  <TextBlock Text="Notifications" Margin="0,0,0,12" />
  <CheckBox Content="Enable desktop alerts" Margin="0,0,0,8" />
  <CheckBox Content="Play sound on completion" Margin="0,0,0,8" />
  <CheckBox Content="Show badge count" />
</StackPanel>

Toolbar or command strip

<Border Background="#162330"
        BorderBrush="#2E4A62"
        BorderThickness="1"
        Padding="10">
  <StackPanel Orientation="Horizontal">
        <Button Content="Undo" Margin="0,0,8,0" />
        <Button Content="Redo" Margin="0,0,8,0" />
        <Button Content="Format" />
  </StackPanel>
</Border>

Labeled field group

<StackPanel Width="280">
  <TextBlock Text="Server" Margin="0,0,0,4" />
  <TextBox Margin="0,0,0,10" />

  <TextBlock Text="Port" Margin="0,0,0,4" />
  <TextBox Margin="0,0,0,10" />

    <Button Content="Connect"
          Width="120"
          HorizontalAlignment="Left" />
</StackPanel>

Sidebar navigation

<StackPanel Background="#101822">
    <Button Content="Home" Margin="0,0,0,6" />
    <Button Content="Search" Margin="0,0,0,6" />
    <Button Content="Queues" Margin="0,0,0,6" />
    <Button Content="Settings" />
</StackPanel>

Mixed content card

<Border Background="#172331"
        BorderBrush="#34506C"
        BorderThickness="1"
        Padding="14">
  <StackPanel>
    <TextBlock Text="Release notes" Margin="0,0,0,8" />
    <TextBlock Text="Build 142 shipped successfully." Margin="0,0,0,10" />
        <Button Content="View details"
            Width="120"
            HorizontalAlignment="Left" />
  </StackPanel>
</Border>

StackPanel vs other panels

Choose StackPanel when

You have a clear one-axis flow and child order is the main layout rule.

Choose another panel when

You need two-dimensional structure, wrapping, docking, or explicit coordinates.

  • Use Grid for aligned forms, dashboards, and layouts with rows and columns.
  • Use DockPanel for headers, sidebars, footers, and a fill region.
  • Use WrapPanel when items should continue onto the next line.
  • Use Canvas when X/Y position is explicit state.

Notes and pitfalls

The stacking axis is measured as unconstrained. This is intentional and useful, but it can surprise you if you expected grid-style space negotiation. Controls inside a stack often size to content in the stacking direction.

There is no built-in spacing property. Use child Margin to create gaps.

Do not treat StackPanel as a universal default. Nested stacks are easy to author, but they can make stretching, alignment, and scrolling behavior harder to reason about than a simple Grid.

Plain StackPanel is not a virtualizing items host. It is for explicitly authored children. For large scrolling data sets, prefer an items-control surface that uses VirtualizingStackPanel.

Order matters because order is layout. Reordering children changes both visual sequence and the panel's accumulated desired size.