WPF - Layout

To define the layout of application, you can use the class that derive from panel, WPF having several Layout's.

1. StackPanel
2. WrapPanel
3. Canvas
4. DockPanel
5. Grid

StackPanel

   The Stack Panel is a simple container control that just shows one element after the other. The orientation of the Stack Panel are horizontal or vertical. When binding data to Stack Panel, If there not enough space to show the all items, then we can use the VirtualizingStackPanel, This property makes the Stack Panel That items are generated only when it is shown in the panel.

<Window x:Class="sample_wpf.MainWindow"

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

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

        Title="TestWindow" Height="190" Width="195">

    

        <StackPanel Orientation="Vertical">

            <Label>Technology</Label>           

            <Label>Language</Label>

            <TextBlock>C#</TextBlock>

            <TextBox>Rajesh</TextBox>

        </StackPanel>

  

</Window>

Output

WrapPanel

   The Wrap Panel positions the children from left to right, one after the other up to they fit into line and then continues the next line. The orientation of the Wrap panel can be horizontal or vertical

<Window x:Class="sample_wpf.MainWindow"

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

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

        Title="TestWindow" Height="129" Width="375">

        <WrapPanel Orientation="Horizontal" Margin="0,0,0,12">

            <Label Width="100">Technology</Label>

            <Label Width="100">Language</Label>

            <TextBlock Width="100">C#</TextBlock>

            <TextBox Width="100">Rajesh</TextBox>

        </WrapPanel>

</Window> 

Output

Canvas

   The Canvas we can specify the position of each control by defines the Left, Right, Top and Bottom attached property of each control present inside the canvas

<Window x:Class="sample_wpf.MainWindow"

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

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

        Title="TestWindow" Height="129" Width="375">

        <Canvas Background="BurlyWood" Grid.ColumnSpan="2">

            <Label Canvas.Right="30"  Width="100">Technology</Label>

            <Label Canvas.Left="20" Width="100">Language</Label>

            <TextBlock Canvas.Top="30" Canvas.Left="20" Width="100">C#</TextBlock>

            <TextBox Canvas.Left="20" Canvas.Top="60" Width="100">Rajesh</TextBox>

        </Canvas>

  

</Window>

  

Output

DockPanel

   The Dock Panel we can specify the position of each control by defines the Left, Right, Top and Bottom dock property of each control present inside the dock panel. It is same as Docking functionality present in windows forms.

<Window x:Class="sample_wpf.MainWindow"

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

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

        Title="TestWindow" Height="129" Width="375">

        

        <DockPanel Background="BurlyWood" Grid.ColumnSpan="2">

            <Label DockPanel.Dock="Left" Width="100">Technology</Label>

            <Label DockPanel.Dock="Bottom" Width="100">user</Label>

            <TextBlock DockPanel.Dock="Right" Width="100">C#</TextBlock>

            <TextBox DockPanel.Dock="Bottom"  Width="100">Rajesh</TextBox>

        </DockPanel>

   

</Window>

Output

Grid

   In Grid we can specify the controls in specify position by indicating the value of rows and columns in Grid. For every row we have to specify the RowDefinition and for column ColumnDefinition. To specify the size we can use three notation “Auto”, “*” and “size in int”

<Window x:Class="sample_wpf.MainWindow"

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

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

        Title="TestWindow" Height="129" Width="375">

    <Grid>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="132*" />

            <ColumnDefinition Width="221*" />

        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>

            <RowDefinition Height="auto"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>      

            <Label Grid.Row="0" Width="100">Technology</Label>

            <Label Grid.Column="1" Width="100">user</Label>

            <TextBlock Grid.Row="1" Grid.Column="0"  Width="100">C#</TextBlock>

        <TextBox    Grid.Row="1" Grid.Column="1" Width="100">Rajesh</TextBox>    

    </Grid>

</Window>

Output

From this article you can learn the various layout present in WPF, and place the controls inside the panel