Layout Panel in WPF: Part 1

In WPF when you create an application the container has its own layout logic like one can stack the element and other arrange them in a grid etc. The layout panels basically use to avoid the common pitfalls means the arranging of layout of the controls of an application is based on fixed pixel coordinates which is work in a limited environment, if you want to use it on different screen resolution or with different font sizes it fails.

In WPF "How to lay out the application's controls ?" this question is most important at the design time of a WPF application. In WPF control placement is facilitated  through a number of layout elements and the goal is making sure that your layout can adapt itself gracefully to different windows sizes.

Panel and layout works simultaneously we use panel class like in WPF we have so many panel-derived classes which we used to arrange layout of the controls. As you know a class has to be in some namespace. So, the panel-derived classes founds in the "System.Windows.Controls" namespace. Now lets talk about the different layout panels, the following are the most common layout panels:

1. StackPanel

2. WrapPanel

3. DockPanel

4. Grid

5. UniformGrid

6. Canvas

Now let the brief introduction of above mentioned  panels step by step:

• StackPanel: StackPanel is one of the simplest layout containers. It stacks all its child element "according its own orientation" below or beside each other. This layout container is used for small section of a larger, more complex window like all WPF ItemsControls (ComboBox,ListBox,Menu) use a StackPanel as their internal layout panel. Basically it involves two main types of placing controls, vertical or horizontal. The given example will more clear you the StackPanel concept:

Example: Create a window, which contain five vertical child buttons.

The code you need to write is:

    <Window x:Class="Layout.SimpleStack"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Layout" Height="223" Width="354"
    >
        <StackPanel>
            <Label>Which color you want</Label>
            <Button>Red</Button>
            <Button>Blue</Button>
            <Button>Pink</Button>
            <Button>Green</Button>
            <Button>Black</Button>
        </StackPanel>
    </Window>

Output window

Example: Create a window, which contain five horizontal child buttons.

The code you need to write is:

    <Window x:Class="Layout.SimpleStack"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Layout" Height="223" Width="354"
    >
        <StackPanel Orientation="Horizontal">
            <Label>Which color you want</Label>
            <Button>Red</Button>
            <Button>Blue</Button>
            <Button>Pink</Button>
            <Button>Green</Button>
            <Button>Black</Button>
        </StackPanel>
    </Window>

Output window

Conclusion

I hope this part of my article helps you to clearing StackPanel concept. Next part is about the WrapPanel and DockPanel.