StackPanel control WPF in VB.NET

Here we will see that how to create and use StackPanel control in WPF and XAML.
  • 3476

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.


sp1.gif


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>

Categories

More Articles

© 2019 DotNetHeaven. All rights reserved.