WPF Lesson 2:-Layout in WPF Part 1 (Grid, Stack and Dock)

Layout in WPF Part 1 (Grid, Stack and Dock)

In this topic we describe the layouts supported by WPF. With the help of layout we can arrange our controls in our screen according to our own way.

Following are the some layout supported by WPF

1.  Grid Layout

The Grid layout arranges control in WPF in a tabular format which means in the form of Row and Column. It works same as we use table Tag in HTML.

We define Row in Grid Layout in WPF by using RowDefinition and Column by using ColumnDefinition.

For Example:-

We need 4 rows and 2 columns in Grid Layout. The code for this are as follows:-

<Window x:Class="WpfApplication2.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="Tech Altum" Height="500" Width="700">

    <Grid>

        <Grid.RowDefinitions>

            <RowDefinition/>

            <RowDefinition/>

            <RowDefinition/>

            <RowDefinition/>

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition/>

            <ColumnDefinition/>

        </Grid.ColumnDefinitions>

        <Label Grid.Row="0" Grid.Column="0” >Enter your Name</Label>

        <Label Grid.Row="1" Grid.Column="0” >Enter your Password</Label>

        <Label Grid.Row="2" Grid.Column="0” >Re-Type your Password</Label>

        <TextBox Grid.Row="0" Grid.Column="1" />

        <TextBox Grid.Row="1" Grid.Column="1" />

        <TextBox Grid.Row="2" Grid.Column="1" />

        <Button Grid.Row="3" Grid.Column="1">Submit your DATA</Button>

    </Grid>

</Window>

Note:-I am not discussing any alignment, height, width property here. I will discuss seperatly these topics in my next article.

The output of this example is as follows:-

Figure 1

2.                        Stack Layout

Stack panel layout arrange control either vertically or horizontally. At the time of stack layout creation you have to set the property Orientation either as Vertical or as Horizontal.

For Example:-

You can check the following code as example of stack layout:-

<Window x:Class="WpfApplication2.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="Tech Altum" Height="500" Width="700">

    <StackPanel Orientation="Vertical">

        <Label>What is your Favourite Colour</Label>

        <Button >Red</Button>

        <Button >Green</Button>

        <Button >Blue</Button>

        <Button >Pink</Button>

    </StackPanel>

</Window>

The output of this example as follows:-

Figure 2

3.                        DockPanel Layout

Dock panel is panel which allows you to arrange controls on left, right, top and bottom. At the time of control adding you have to set the property DockPanel.Dock either on left, right, top, and bottom.

<Window x:Class="WpfApplication2.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="Tech Altum" Height="500" Width="700">

    <DockPanel>

        <Button DockPanel.Dock="Left" >Left Button</Button>

        <Button DockPanel.Dock="Bottom">Bottom Button</Button>

        <Button DockPanel.Dock="Right">Right Button</Button>

        <Button DockPanel.Dock="Top">Top Button</Button>

        <Button>Extra Space</Button>

    </DockPanel>

</Window>

The output of it as follows:-

Figure 3

 hope you enjoyed the artical. i will discuss another layout in my next artical.