StackPanel

StackPanel - элемент-контейнер, который размещает элементы в ряд по вертикали или горизонтали (по умолчанию используется вертикальное размещение). Вот как можно расположить три кнопки по вертикали:

<StackPanel>
<Button Margin="10" Content="Button 1" FontSize="18"
Width="150" Height="45" />
<Button Margin="10" Content="Button 2" FontSize="18"
Width="150" Height="45" />
<Button Margin="10" Content="Button 3" FontSize="18"
Width="150" Height="45" />
</StackPanel>

Рис. л. р. 1.6. Результат размещения контролов на элементе разметки StackPanel.

Веб-разработчик может увидеть здесь некоторое сходство с блоковыми элементами HTML (например, DIV), которые размещаются с новой строки. Если Вы хотите разместить кнопки по вертикали, то достаточно присвоить атрибуту Orientation элемента StackPanel значение Horizontal:

<StackPanel Orientation="Horizontal">
<Button Margin="10" Content="Button 1" FontSize="18"
Width="150" Height="45" />
<Button Margin="10" Content="Button 2" FontSize="18"
Width="150" Height="45" />
<Button Margin="10" Content="Button 3" FontSize="18"
Width="150" Height="45" />
</StackPanel>

Рис. л. р. 1.6. Orientation элемента StackPanel в значении Horizontal.

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

Grid

Grid (сетка) используется очень часто. Возвращаясь к сравнению с элементами HTML, можно сказать, что данный контейнер похож на элемент TABLE (таблица), так как тоже использует столбцы и ряды. Небольшое отличие состоит в том, что в XAML мы сначала задаем структуру для Grid, а уже потом начинаем описывать элементы, которые будут находиться в сетке. Очень удобно, что у Grid есть атрибут ShowGridLines, который показывает линии сетки, что позволит нам наглядно увидеть пример с расположением кнопок (в реальных примерах вы можете не выводить сетку).

<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="60" />
<RowDefinition Height="60" />
<RowDefinition Height="60" />
</Grid.RowDefinitions>

<Grid.ColumnDefinitions>
<ColumnDefinition Width="175" />
<ColumnDefinition Width="175" />
<ColumnDefinition Width="175" />
</Grid.ColumnDefinitions>

<Button Grid.Column="0" Grid.Row="0" Content="Button 1" FontSize="18"
Width="150" Height="45" />
<Button Grid.Column="2" Grid.Row="0" Margin="10" Content="Button 2"
FontSize="18" Width="150" Height="45" />
<Button Grid.Column="1" Grid.Row="2" Margin="10" Content="Button 3"
FontSize="18" Width="150" Height="45" />
</Grid>

Если внимательно изучить код, то видим, что мы определили три колонки и три ряда и указали их размеры. Далее мы размещаем кнопки, указывая их положение при помощи Grid.Column и Grid.Row:

Рис. л. р. 1.7. Результат размещения контролов на элементе разметки Grid.

В Expression Blend размещать элементы удобнее, так как в нем реализован удобный редактор размещения. Поэтому Вам стоит изучить данную программу и использовать ее в своих разработках.

Дата добавления: 2015-08-13