Элементы управления пользовательского интерфейса Silverlight (User Interface Controls) - StackPanel

StackPanel

Элементы управления StackPanel обычно скомбинированы с другими элементами управления внешним видом. Они позволяют выстраивать объекты друг над другом либо рядом друг с другом (как книги на полке).

Одним из удобств StackPanel является то, что вам не нужно предоставлять позицию объектов, содержащихся в StackPanel - они позиционированы относительно предыдущего объекта в Stack.

В следующем примере мы расположим TextBlock над TextBox, который в свою очередь будет находиться над элементом Button, а последний в свою очередь - над CheckBox:

<StackPanel Background="Beige" Orientation="Vertical" >
  <TextBlock Text="Your name?" 
     HorizontalAlignment="Left" Margin="10,2,0,1"/>
  <TextBox Width="150" Height="30"
     HorizontalAlignment="Left" Margin="10,2,0,1"/>
  <Button Content="Submit this information" 
     HorizontalAlignment="Left"
    Margin="10,2,0,1" Height="30" Width="150" />
  <CheckBox Content="With Zing!" HorizontalAlignment="Left"
     Margin="10,2,0,1" />
</StackPanel> 

В данном коде мы можем кое-что рассмотреть. Верхняя и нижняя линии отображают объявление StackPanel в файле Xaml. StackPanel объявлен с двумя атрибутами: цветом фона BackgroundColor (Beige) и Orientation (ориентацией) , которая может принимать значения Vertical или Horizontal.

Существует множество других атрибутов, присущих почти всем элементам управления, которые вы можете настроить. Данные атрибуты, наряду с другими методами, перечислены в документации,

Рис. 1-7. Документация, демонстрирующая членов Stack Panel

Установив свойство Orientation в Vertical, мы выстраиваем его содержимое друг над другом вместо построения в строку.

В пределах StackPanel объявлены четыре объекта и порядок их объявления определит порядок их выстраивания. У каждого свойство TextAlignment установлено в Left тем самым они будут выровненны, и у каждого будет установлено свойство Margin. Давайте более детально рассмотрим свойство Margin при помощи определения в документации:

public Thickness Margin { get; set; }

Свойство Margin на самом деле явялется объектом типа Thickness. Как уже отмечалось ранее, мы объявляем объект Thickness в Xaml одним из трех путей:

Во-первых, вы можете предоставить значение типа double, которое будет значением отступа со всех сторон (слева, сверху, справа и снизу) объекта. То есть, вы можете написать

<Button Content="Submit this information" 
 HorizontalAlignment="Left"
 Margin="100" Height="30" Width="150" /> 

Тем самым изолировав кнопку отступом в 100 со всех сторон,

Рис. 1-8. Отступы кнопки 

Обратите внимание на то, что для расположения кнопки на таком расстоянии надо учитывать размеры кнопки!

Вторым способом объявления Thickness (и в данном случае Margin) является предоставления суммы значений всех сторон (то есть, пары сторон - верхняя и нижняб левая и правая - будут иметь одинаковые размеры,

<Button Content="Submit this information" 
HorizontalAlignment="Left"
Margin="50,20" Height="30" Width="150" /> 

Результатом данного объявления является то, что левый и правый отступ равны 25, и верхний и нижний отступ равны 10.

Наконец, вы можете объявить каждую в отдельности, только необходимо помнить о последовательности:

Рис. 1-9. Отступы являются объектом Thickness

То есть - Left (левый), Top (верхний), Right (правый), Bottom (нижний); либо в данном случае, левый отступ равен 10, верхний отступ равен 2, правый - 0 и нижний - 1.

Как только четыре элемента управления расположены в Stack Panel и выровненны, StackPanel несет ответственность за их расположение,

Рис. 1-10. Stack Panel в действии 

Обратите внимание на то, что StackPanel ответственен за цвет своего фона и за выстраивание своего содержимого (четыре элемента управления) но каждый элемент ответственен за свое расположение и отступы.