WPF StackPanel control in VB.NET

In this article we will learn how to use StackPanel control in WPF using VB.NET.
  • 3501

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.

sp1.gif 

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.

 

sp2.gif
 

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.


sp3.gif 


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.


sp4.gif 


Figure 4.

 

Now stretch the form.

 

sp5.gif 


Figure 5.

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.