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>