Here we will see that how to create and use StackPanel control in WPF and XAML.
StackPanel control
The StackPanel in WPF is a simple and useful layout panel. 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.
Important Properties
This control has the following properties.
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="StackPanel1" Width="200" />
The form looks like this.
For example
Drag and drop some control like StackPanel and button controls on the form.
Set StackPanel orientation property Orientation="Vertical"
XAML code
<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>
Now change the property Orientation Orientation="Horizontal.
The form looks like this.
Figure1.gif
Adding Scrolling
Adding scrolling is easy, We simply put the StackPanel (or anything else we want to automatically scroll) inside a ScrollViewer.
<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>