After getting an understanding of the WPF grid panel we are moving toward the WPF stack panel. As the name is self-explanatory, this panel is used to stack elements inside it each element is stacked based on horizontal and vertical alignment.
There are two orientations which are available for stack panels, horizontal and vertical.
If you select the horizontal orientation then all the UI elements or WPF components which you placed inside the stack panel as a child were aligned from left to right. This means 1st element took the whole row and the second element will divide the row into two parts and so on continue.
Code:
<Window x:Class="JWPF.MainWindow" 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" xmlns:local="clr-namespace:JWPF" mc:Ignorable="d" Title="MainWindow" Height="250" Width="400"> <StackPanel Orientation="Horizontal"> <Button>WPF Stack Layout Horizontal Orientation</Button> <Button>Button Example 1</Button> </StackPanel> </Window>
If you select the vertical orientation then all the UI elements or WPF components which you placed inside the stack layout as a child were aligned from top to bottom. This means 1st element took the whole column and the second element will divide the column into two parts from top to bottom and so on continue.
Code:
<Window x:Class="JWPF.MainWindow" 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" xmlns:local="clr-namespace:JWPF" mc:Ignorable="d" Title="MainWindow" Height="250" Width="400"> <StackPanel> <Button>WPF Stack Layout Vertical Orientation</Button> <Button>Button Example 1</Button> <Button>Button Example 2</Button> <Button>Button Example 3</Button> </StackPanel> </Window>
Basically, the WPF stack layout defines one direction, either left to right or top to bottom. If you want to work in two directions then you have to create a nested stack layout. This means the stack panel inside of the other stack panel has opposite orientations to get X & Y intersection-based UI placement.
Note: By default, WPF Stack Layout is vertically oriented, Which means top to bottom placement.