WPF StackPanel in XAML

StackPanel is used to arrange child elements into a single line that can be oriented horizontally or vertically. The StackPanel element in XAML represents a StackPanel. The following code snippet creates a StackPanel at design-time using XAML.

<StackPanel Width="300" Height="200" Background="LightBlue" />

The Orientation property represents the direction of children that can be vertical or horizontal. The default property of Orientation is vertical. The following code snippet sets the Orientation property to Horizontal.

<StackPanel Width="300" Height="200" Background="LightBlue"             Orientation="Horizontal" />

Note: If child elements on a StackPanel do not fit in the StackPanel area, the go outside of the visible area. If you with to wrap the child elements when they are outside of the StackPanel area, use WrapPanel instead.

Let's see an example. The code listed in Listing 1 places five ellipse elements in a Canvas.

<Canvas >
    <Ellipse Width="100" Height="100" Fill="Red" />
    <Ellipse Width="80" Height="80" Fill="Orange" />
    <Ellipse Width="60" Height="60" Fill="Yellow" />
    <Ellipse Width="40" Height="40" Fill="Green" />
    <Ellipse Width="20" Height="20" Fill="Blue" />
</Canvas>

Listing 1

Listing 1 generates Figure 1.

Figure 1

Now in Listing 1, let's replace Canvas with a StackPanel. The new code looks like Listing 2.

<StackPanel >
    <Ellipse Width="100" Height="100" Fill="Red" />
    <Ellipse Width="80" Height="80" Fill="Orange" />
    <Ellipse Width="60" Height="60" Fill="Yellow" />
    <Ellipse Width="40" Height="40" Fill="Green" />
    <Ellipse Width="20" Height="20" Fill="Blue" />
</StackPanel>

Listing 2

The new output looks like Figure 2, where you can see all elements are stacked in vertical direction.

Figure 2

Now let's change the Orientation property to horizontal by changing StackPanel code to the following.

<StackPanel Orientation="Horizontal" >

 The new output looks like Figure 3.

Figure 3

The StackPanel class in WPF represents a StackPanel. The code listed in Listing 3 creates a StackPanel dynamically, sets its properties and add five ellipses.

private void CreateDynamicStackPanel()
{
    // Create a StackPanel and set its properties
    StackPanel dynamicStackPanel = new StackPanel();
    dynamicStackPanel.Width = 300;
    dynamicStackPanel.Height = 200;
    dynamicStackPanel.Background = new SolidColorBrush(Colors.LightBlue);
    dynamicStackPanel.Orientation = Orientation.Horizontal;

    // Create Ellipses and add to StackPanel
    Ellipse redCircle = new Ellipse();
    redCircle.Width = 100;
    redCircle.Height = 100;
    redCircle.Fill = new SolidColorBrush(Colors.Red);
    dynamicStackPanel.Children.Add(redCircle);

    Ellipse orangeCircle = new Ellipse();
    orangeCircle.Width = 80;
    orangeCircle.Height = 80;
    orangeCircle.Fill = new SolidColorBrush(Colors.Orange);
    dynamicStackPanel.Children.Add(orangeCircle);

    Ellipse yellowCircle = new Ellipse();
    yellowCircle.Width = 60;
    yellowCircle.Height = 60;
    yellowCircle.Fill = new SolidColorBrush(Colors.Yellow);
    dynamicStackPanel.Children.Add(yellowCircle);

    Ellipse greenCircle = new Ellipse();
    greenCircle.Width = 40;
    greenCircle.Height = 40;
    greenCircle.Fill = new SolidColorBrush(Colors.Green);
    dynamicStackPanel.Children.Add(greenCircle);

    Ellipse blueCircle = new Ellipse();
    blueCircle.Width = 20;
    blueCircle.Height = 20;
    blueCircle.Fill = new SolidColorBrush(Colors.Blue);
    dynamicStackPanel.Children.Add(blueCircle);

    // Display StackPanel into a Window
    RootWindow.Content = dynamicStackPanel;
}

Listing 3

The output of Listing 3 generates Figure 4.

Figure 4

When there is not enough space on a StackPanel vertically or horizontally, you may add scrolling feature to a StackPanel. The CanHorizontallyScroll and CanVerticallyScroll properties are used to add scrolling functionality to a StackPanel.