StackPanel располагает все элементы в ряд либо по горизонтали, либо по вертикали в зависимости от ориентации. Например, расположим элементы по вертикали:
<Page x:Class="LayoutApp.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:LayoutApp" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <StackPanel> <Rectangle Fill="LightBlue" Height="40" /> <Rectangle Fill="LightGreen" Height="40" /> <Rectangle Fill="LightPink" Height="40" /> </StackPanel> </Page>
По умолчанию свойство Orientation
элемента StackPanel использует значение Vertical
, то есть создается вертикальный ряд, в
который помещаются все вложенные элементы сверху вниз. Мы также можем задать горизонтальный стек. Для этого нам надо указать свойство
Orientation="Horizontal"
:
<Page x:Class="LayoutApp.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:LayoutApp" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <StackPanel Orientation="Horizontal"> <Rectangle Fill="LightBlue" Width="60" /> <Rectangle Fill="LightGreen" Width="60" /> <Rectangle Fill="LightPink" Width="60" /> </StackPanel> </Page>
При горизонтальной ориентации все вложенные элементы располагаются слева направо. Если мы хотим, чтобы наполнение стека начиналось справа налево, то необходимо
задать свойство FlowDirection="RightToLeft"
:
<StackPanel Orientation="Horizontal" FlowDirection="RightToLeft"> <Rectangle Fill="LightBlue" Width="60" /> <Rectangle Fill="LightGreen" Width="60" /> <Rectangle Fill="LightPink" Width="60" /> </StackPanel>
По умолчанию это свойство имеет значение LeftToRight - то есть слева направо.
Нередко бывает, что StackPanel с элементами не вмещается в область графического окна. И в этом случае StackPanel помещается в ScrollView, который создает полосы прокрутки.