In this article we will learn how to use StackPanel control in WPF using VB.NET.
StackPanel control
The StackPanel has a collection of Children that it literally shoves one after the other. You set the orientation to either horizontal or vertical to control where the items go.
Properties - This control has the following properties.
Figure 1.
Orientation - The Orientation property can be set to Horizontal or Vertical.
Width - Width property is used to define the width of the StackPanel control.
Height - Height property is used to define the height of the StackPanel control.
Creating a StackPanel in XAML
<StackPanel Height="100" Name="StackPanel2" Width="200" />
</StackPanel>
For example
Drag and drop some control like StackPanel and button controls on the form.
Set StackPanel orientation property Orientation="Vertical"
The form looks like this.
Figure 2.
XAML code
<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="288" Width="314">
<Grid Width="299" Height="259">
<StackPanel Height="243" HorizontalAlignment="Left" Margin="10,10,0,0"Name="StackPanel1" VerticalAlignment="Top"
Width="275" Orientation="Vertical">
<Button Content="Button1" Height="37" Name="Button1" Width="273"Background="Aqua" Foreground="Blue" />
<Button Content="Button2" Height="33" Name="Button2" Width="272"Background="Crimson" Foreground="Chartreuse" />
<Button Content="Button3" Height="33" Name="Button3" Width="271"Foreground="DarkRed" Background="Chartreuse" />
<Button Content="Button4" Height="35" Name="Button4" Width="268"Background="DarkMagenta" Foreground="DeepPink" />
<Button Content="Button5" Height="34" Name="Button5" Width="270"Foreground="Green" Background="DarkRed" />
<Button Content="Button6" Height="39" Name="Button6" Width="266"Background="DarkGoldenrod" Foreground="DarkSlateGray" />
</StackPanel>
</Grid>
</Window>
Now change the property Orientation Orientation="Horizontal
The form looks like this.
Figure 3.
Adding Scrolling
Adding scrolling is easy, We simply put the StackPanel (or anything else we want to automatically scroll) inside a ScrollViewer.
XAML code
<ScrollViewer>
<StackPanel Height="243" HorizontalAlignment="Stretch" Margin="10,10,0,0"Name="StackPanel1" VerticalAlignment="Stretch"
Width="472" Orientation="Horizontal"CanHorizontallyScroll="False" CanVerticallyScroll="False">
<Button Content="Button1" Height="37" Name="Button1" Width="78" Background="Aqua"Foreground="Blue" />
<Button Content="Button2" Height="33" Name="Button2" Width="87"Background="Crimson" Foreground="Chartreuse" />
<Button Content="Button3" Height="33" Name="Button3" Width="82"Foreground="DarkRed" Background="Chartreuse" />
<Button Content="Button4" Height="35" Name="Button4" Width="81"Background="DarkMagenta" Foreground="DeepPink" />
<Button Content="Button5" Height="34" Name="Button5" Width="76" Foreground="Green"Background="DarkRed" HorizontalAlignment="Right" />
<Button Content="Button6" Height="39" Name="Button6" Width="63"Background="DarkGoldenrod" Foreground="DarkSlateGray" />
</StackPanel>
</ScrollViewer>
The form looks like this.
Figure 4.
Now stretch the form.
Figure 5.