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="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 Canvas with a StackPanel. The new code looks like
Listing 2.
<StackPanel >
<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"
/>
</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 = 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.