Опубликован: 13.12.2011 | Доступ: свободный | Студентов: 1021 / 34 | Оценка: 4.29 / 4.57 | Длительность: 13:56:00
Самостоятельная работа 1:

Размещение элементов управления

< Лекция 1 || Самостоятельная работа 1: 123 || Лекция 2 >

Учебный элемент. Silverlight: размещение элементов

В первом учебном элементе мы рассмотрели базовые приемы программирования. Теперь разберем вопрос размещения элементов в Silverlight-приложениях. Размещение элементов на форме в Windows Forms было простым занятием. Мы просто перетаскивали нужный элемент с панели инструментов на форму и задавали ему нужные свойства. В приложениях, основанных на XAML, используется другой подход. Важно разобраться с основными принципами размещения элементов в XAML, так как это является основой для дальнейшего успешного программирования на Silverlight (и WPF).

Шаг 1. Принципы разметки

Silverlight использует гибкую систему для размещения видимых элементов управления на поверхности. Разметка в коде поддерживает два стиля размещения: динамический и абсолютный. Основными элементами, которые помогают размещать элементы являются:

  • Canvas
  • StackPanel
  • Grid

Рассмотрим каждый из этих элементов, чтобы получить о них более полное представление. Для демонстрации воспользуемся привычными нам кнопками, которые будет размещать на поверхности нашего приложения. Вы можете заново создать новый проект или продолжить работу над предыдущим примером. Будем вносить изменения в коде файла Home.xaml.

Canvas

Элемент Canvas является одним из базовых элементов разметки и позволяет размещать элементы привычным нам способом при помощи задания нужных координат (именно такой способ мы использовали в Windows Forms. Например, попробуем разместить три кнопки следующим образом:

<Canvas>
<Button Canvas.Top="50" Canvas.Left="50" Content="Button 1" FontSize="18" 
        Width="150" Height="45" />

<Button Canvas.Top="150" Canvas.Left="20" Content="Button 2" FontSize="18" 
        Width="150" Height="45" />

<Button Canvas.Top="70" Canvas.Left="80" Canvas.ZIndex="99"
        Content="Button 3" FontSize="18" Width="150" Height="45" />
</Canvas>

На экране мы увидим следующую картинку:

Результат размещения контролов на элементе разметки Convas

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

Как Вы видите, мы просто задаем координаты для кнопок. В случае необходимости мы также можем указать порядок ZIndex, если одна кнопка перекрывает другую. Подобная модель размещения элементов вполне годится при создании игр или демонстрации каких-то физических процессов. Также Canvas подойдет в тех случаях, когда элементы статичны и хорошо смотрятся в различных ситуациях. Но, на самом деле, существуют более удобные контейнеры, которые вытесняют Canvas, и избавляют программиста от множества проблем, возникаемых при разработке удобных приложений. К числу таких элементов относятся StackPanel или Grid.

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>
Результат размещения контролов на элементе разметки StackPanel

Рис. 2.8. Результат размещения контролов на элементе разметки 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>
Orientation элемента StackPanel в значении Horizontal

Рис. 2.9. 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:

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

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

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

< Лекция 1 || Самостоятельная работа 1: 123 || Лекция 2 >