StackPanel Overview in WPF

Layouts in WPF

WPF layout, a mostly used component of an application, is basically used to arranging controls on fixed pixels. Users can not resize the places which are placed in these layouts. There are five built-in panels i.e. Stack Panel, Canvas, Wrap Panel, Grid and Dock Panel resides in System.Windows.Controls namespace.

Stack Panel:

A very popular panel because of its simplicity and usefulness. As its name suggests it simply place its children into a stack. This panel is used in the same way as stacks in C programming. It places its children from the right/bottom most side, previous element will move when new one comes, and so on.

By default the orientation property of any stackpanel is vertical, if we want to show our contents in horizontal then we have to change the orientation of stackpanel. As in above diagram I have placed three button in both of the views one by one. By using simple code in xaml I can use a stack panel as in above window.

<StackPanel>
<Button Content="First " Width="70"></Button>
<Button Content="Second " Width="70"></Button>
<Button Content="Third " Width="70"></Button>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Button Content="First " Height="50"></Button>
<Button Content="Second " Height="50"></Button>
<Button Content="Third " Height="50"></Button>
</StackPanel>

There are some cases in which we have to use nested stack panel like to show a person’s image and some information. 

<StackPanel>
<Image Source="...." Name="image"></Image>
<StackPanel >
<Label Content="Name"></Label>
<Label Content="Age"></Label>
<Label Content="Father Name"></Label>
</StackPanel>
</StackPanel>

Wrap panel