HorizontalAlignment and VerticalAlignment in VB.NET

HorizontalAlignment property has four values: Left, Center, Right, and Stretch. HorizontalAlignment property use to present data from Left to Right. VerticalAlignment property has also four values Top, Center, Bottom, and Stretch. VerticalAlignment property use to present data from Top to Bottom.
  • 5560
 

 HorizontalAlignment

HorizontalAlignment property has four values: Left, Center, Right, and Stretch.
HorizontalAlignment property use to present data from Left to Right.

VerticalAlignment

VerticalAlignment property has also four values Top, Center, Bottom, and Stretch.
VerticalAlignment property use to present data from Top to Bottom.

StackPanel and Grid control both can use HorizontalAlignment and VerticalAlignment property.

Step 1 : Click on start and follow the processor to open WPF application.

Start
-> Microsft Visual Studio 2010 -> File -> New -> Project.

When you click on image it will show  New Project Dialog Box is a follow.

Then click ok.

MainWindow.Xaml file appear in Visual Studio 2010.

Step 2 : Add two Stack Panel  and one  in Design View from  Toolbox it will automatically add in Grid . You just drag drop or double click from Toolbox to Design view and adjust it using HorizontalAlignment and Margin property.

Step 3 : Add four Button in each Stack Panel and Grid control.

Code  should be like this:

<Window x:Class="WpfApplication1.MainWindow"
       xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
       xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
       Title="MainWindow" Height="450" Width="525">
    <Grid>
        <StackPanel Height="100" HorizontalAlignment="Center"  Margin="97,12,0,0"Name="stackPanel1" VerticalAlignment=

"Top" Width="200">
            <Button Content="Button" Name="button1"  />
            <Button Content="Button" Name="button2" />
            <Button Content="Button" Name="button3" />
            <Button Content="Button" Name="button4" />
        </StackPanel>
        <StackPanel Height="103" HorizontalAlignment="Center"  Margin="97,144,0,0"Name="stackPanel2" VerticalAlignment=

"Top" Width="200">
            <Button Content="Button"  Name="button5"  />
            <Button Content="Button"  Name="button6"  />
            <Button Content="Button"  Name="button7"  />
            <Button Content="Button"  Name="button8"  />
        </StackPanel>
        <StackPanel Height="100" HorizontalAlignment="Left" Margin="200,261,0,0" 
Name
="stackPanel3" VerticalAlignment="Top" Width="200">
            <Button Content="Button"  Name="button9"  />
            <Button Content="Button"  Name="button10"  />
            <Button Content="Button"  Name="button11"  />
            <Button Content="Button"  Name="button12"  />
        </StackPanel>
    </Grid>
</
Window>

Step: 4 Now we will edit the code and use HorizontalAlignment and VerticalAlignment.

Simple Defination:  StackPanel control behave like a stack mean controls are used  one after another( show control sequentially). It internal control can be arrange in horizontally or vertically. It's default flow of direction is vertical. StackPanel use the namespace is System.Windows.Controls.

Grid control is by default for WPF Project  in visual studio. It display other control in row and column cell format. If you work on Grid cell you will feel that you are working on table in HTML. As compare to StackPanel control use can manage other control in Grid control easily.At the end we use Grid control, that also contain four button.

In first StackPanel we use only HorizontalAlignment property to describe you to how its work. HorizontalAlignment show the data from Left to Right.

First Button set from left in StackPanel using 
HorizontalAlignment="Left".
Second Button set in center in StackPanel using 
HorizontalAlignment="Center".
Third Button set from Right in StackPanel using 
HorizontalAlignment="Right".

Fourth Button use to show how stretch value of HorizontalAlignment property work using
HorizontalAlignment=" Stretch ". It take its place to fit. It is default value for both properties (HorizontalAlignment and VerticalAlignment), although various controls override the setting in their styles.

In second StackPanel, all button used Vertical Alignment, but StackPanel used Orientation property with Horizontal value.
 Orientation is used to get or set the value that indicates the dimension by which child element of StackPanel are Stacked. VerticalAlignment show the data from Top to Bottom.

First Button set from top in StackPanel using VerticalAlignment="Top".
Second Button set from center in StackPanel using 
VerticalAlignment="Center".
Third Button set from bottom in StackPanel using 
VerticalAlignment="Bottom".

Fourth Button use to show how stretch value of VerticalAlignment property work using
VerticalAlignment=" Stretch ". It take its place to fit.As I explained you above it is default value for both properties.

In Grid panel we use both HorizontalAlignment and VerticalAlignment property to describe you to how its work. 

First Button set from left - top in Grid you should use both HorizontalAlignment and VertivcalAlignment  together like this
 
HorizontalAlignment="Left" andVerticalAlignment="Top".

Second Button set from left - bottom in Grid. Use these property 
HorizontalAlignment="Left"and VerticalAlignment="Bottom".

Third Button set from left - bottom in Grid. Use these property 
HorizontalAlignment="Right"and VerticalAlignment="Top".

Fourth Button set from left - bottom in Grid. Use these property 
HorizontalAlignment="Right"and VerticalAlignment="Bottom".

<
Window
xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml         

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc=

"http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"          x:Class="WpfApplication2.MainWindow"
x:Name="Window"
   Title="MainWindow"
   Width="640" Height="480">
    <Grid Background="Azure">
        <StackPanel Background="#FFE7E7E7"   Margin="8,0,0,173.667" x:Name=

           "stackPanel1"HorizontalAlignment="Left" Width="220">
            <Button Content="Top" Height="45" Width="35"  HorizontalAlignment=

             "Left"x:Name="button1" FontSize="8"   >
                <Button.Background>
                    <ImageBrush ImageSource="blue.jpg"/>
                </Button.Background>
            </Button>
            <Button Content="Center" Height="45" Width="35"  HorizontalAlignment=

                   "Center" x:Name="button2" FontSize="8" >
                <Button.Background>
                    <ImageBrush ImageSource="green1.jpg"/>
                </Button.Background>
            </Button>
            <Button Content="Right" Height="45" Width="35"  HorizontalAlignment=

                     "Right" x:Name="button3" FontSize="8" >
                <Button.Background>
                    <ImageBrush ImageSource="red.jpg"/>
                </Button.Background>
            </Button>
            <Button Height="45" Content="Stretch" HorizontalAlignment="Stretch" x:Name="button4" >
                <Button.Background>
                    <ImageBrush ImageSource="butterfly.jpg"/>
                </Button.Background>
            </Button>
        </StackPanel>
        <StackPanel Height="264.333" Background="#FFE9E9E5"  Orientation=

              "Horizontal"Margin="0,8,8,0" x:Name="stackPanel2"
                 VerticalAlignment="Top" Width="243.499"HorizontalAlignment="Right">
            <Button Height="45" Width="35" Content="Top" VerticalAlignment=

                "Top"  x:Name="button5" FontSize="8" FontWeight="Bold"  >
                <Button.Background>
                    <ImageBrush ImageSource="blue.jpg"/>
                </Button.Background>
            </Button>
            <Button Height="45" Width="35" Content="Center" VerticalAlignment=

                           "Center"x:Name="button6" FontSize="8"  >
                <Button.Background>
                    <ImageBrush ImageSource="green1.jpg"/>
                </Button.Background>
            </Button>
            <Button Height="45" Width="35" Content="Buttom"  VerticalAlignment=

                           "Bottom"x:Name="button7" FontSize="8"   >
                <Button.Background>
                    <ImageBrush ImageSource="red.jpg"/>
                </Button.Background>
            </Button>
            <Button Content="Stretch" x:Name="button8"   >
                <Button.Background>
                    <ImageBrush ImageSource="butterfly.jpg"/>
                </Button.Background>
            </Button>
        </StackPanel>
        <Grid Background="#FFE5E5C9" Height="165.667" Margin="217,272.333,215,0"x:Name=

                       "grid1" VerticalAlignment="Top" Width="200">
            <Button Height="45" Width="35" Content="R-TOP"  HorizontalAlignment=

                           "Left"   x:Name="button9"  VerticalAlignment="Top" FontSize="8" >
                <Button.Background>
                    <ImageBrush ImageSource="blue.jpg"/>
                </Button.Background>
            </Button>
            <Button Width="40" Height="45" Content="L-BOTTOM" VerticalAlignment=

                             "Bottom" HorizontalAlignment="Left"  x:Name="button10" FontSize="6.667"   >
                <Button.Background>
                    <ImageBrush ImageSource="green1.jpg"/>
                </Button.Background>
            </Button>
            <Button Width="40" Height="45" Content="R-BOTTOM" VerticalAlignment=

                           "Bottom" HorizontalAlignment="Right"  x:Name="button11" FontSize="6.733"   >
                <Button.Background>
                    <ImageBrush ImageSource="butterfly.jpg"/>
                </Button.Background>
            </Button>
            <Button Height="45" Width="40" Content="R-TOP"  HorizontalAlignment="Right"   
                   x
:Name="button12" VerticalAlignment="Top" FontSize="8" >
                <Button.Background>
                    <ImageBrush ImageSource="red.jpg"/>
                </Button.Background>
            </Button>
       </Grid>
    </Grid>
</
Window>

Output:

HV.gif

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.