ARTICLE

StackPanel in WPF

Posted by Mahesh Chand in Articles | WPF on December 21, 2009

Tags: StackPanel in WPF, WPF Stack Panel, XAML

In this article, you will learn how to use a StackPanel in WPF using C#.

Tweet
18037
1

Reader Level: Beginner

Download Files:

StackPanelSample.zip

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.

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.

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>

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>

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.

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 = stackpanel-in-wpf;

orangeCircle.Height = stackpanel-in-wpf;

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.