Working With StackPanel In WPF Using C#

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, they go outside of the visible area. If you wish 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="stackpanel-in-wpf" Height="stackpanel-in-wpf" 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 the 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 adds five ellipses.

privatevoid CreateDynamicStackPanel()
{
    // Create a StackPanel and set its properties
    StackPanel dynamicStackPanel = newStackPanel();
    dynamicStackPanel.Width = 300;
    dynamicStackPanel.Height = 200;
    dynamicStackPanel.Background = newSolidColorBrush(Colors.LightBlue);
    dynamicStackPanel.Orientation = Orientation.Horizontal;
    // Create Ellipses and add to StackPanel
    Ellipse redCircle = newEllipse();
    redCircle.Width = 100;
    redCircle.Height = 100;
    redCircle.Fill = newSolidColorBrush(Colors.Red);
    dynamicStackPanel.Children.Add(redCircle);
    Ellipse orangeCircle = newEllipse();
    orangeCircle.Width = 80;
    orangeCircle.Height = 80;
    orangeCircle.Fill = newSolidColorBrush(Colors.Orange);
    dynamicStackPanel.Children.Add(orangeCircle);
    Ellipse yellowCircle = newEllipse();
    yellowCircle.Width = 60;
    yellowCircle.Height = 60;
    yellowCircle.Fill = newSolidColorBrush(Colors.Yellow);
    dynamicStackPanel.Children.Add(yellowCircle);
    Ellipse greenCircle = newEllipse();
    greenCircle.Width = 40;
    greenCircle.Height = 40;
    greenCircle.Fill = newSolidColorBrush(Colors.Green);
    dynamicStackPanel.Children.Add(greenCircle);
    Ellipse blueCircle = newEllipse();
    blueCircle.Width = 20;
    blueCircle.Height = 20;
    blueCircle.Fill = newSolidColorBrush(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 a scrolling feature to a StackPanel. The CanHorizontallyScroll and CanVerticallyScroll properties are used to add scrolling functionality to a StackPanel.

How to Fill a Windows with StackPanel

If you need to fill a parent control or Window with a panel or scale to fit width or height or both, you use the VerticalAlignment,  HorizontalAlignment, Width, and Height properties of the StackPanel.

<Grid>
        <StackPanel Margin="0,0,0,0" VerticalAlignment="Stretch"
        HorizontalAlignment="Stretch"
        Width="Auto" Height="Auto"
        Background="#FFE44343"/>
</Grid>