Главная » Разработка для Windows Phone 7 » Grid всемогущий

0

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

Grid напоминает HTML-таблицу, но имеет несколько отличий. Grid не выполняет форматирования, за него всецело отвечает компоновка. В Grid нет понятия заголовков или встроенных разделителей ячеек. Кроме того, в отличие от HTML-таблиц, использование Grid приветствуется.

Grid имеет определенное число строк и столбцов. Строки могут быть разной высоты, столбцы – разной ширины. Дочерний элемент Grid обычно занимает одну определенную строку и столбец, но также может охватывать несколько строк и несколько столбцов. Звучит красиво (и так оно и есть), но бесплатный сыр бывает только в мышеловке, за все приходится платить. В StackPanel или Canvas дочерние элементы можно добавлять произвольным образом, для Grid необходимо четко знать, сколько строк и столбцов требуется для размещения всех дочерних элементов. Строки и столбцы можно добавлять из кода во время выполнения, но если Grid полностью описывается в XAML, их количество необходимо знать заранее.

Реализация вложения в Grid вполне тривиальна, но не стоит увлекаться, особенно если в приложении выполняется частое обновление компоновки. Слишком сложное вложение может создавать сложности для компоновки.

Grid определяет два свойства: RowDefinitions и ColumnDefinitions (Описания столбцов). Это коллекции объектов RowDefinition (Описание строки) и ColumnDefinition (Описание столбца), соответственно. Эти объекты определяют высоту каждой строки и ширину каждого столбца. Они могут быть заданы тремя способами:

•                                   с применением ключевого слова «Auto»

•                                   заданием определенного количества пикселов

•                                   с помощью символа «звездочка» и числа со «звездочкой»

Чаще всего используются первый и последний варианты. Первый указывает на то, что размер ячейки будет соответствовать размеру помещаемого в нее элемента. (Размер этого элемента Grid выясняет в ходе вызова метода MeasureOverride с использованием неограниченных размеров.) Строки и столбцы, отмеченные звездочкой, используются для пропорционального распределения оставшегося пространства.

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

Конкретная строка и столбец элемента определяется присоединенными свойствами Grid.Row и Grid.Column. Отсчет строк и столбцов ведется с нуля, начиная сверху слева. С помощью присоединенных свойств Grid.RowSpan и Grid.ColumnSpan можно задать количество строк и столбцов, занимаемых элементом.

Рассмотрим пример:

Проект Silverlight: SimpleGrid Файл: MainPage.xaml (фрагмент)

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <Grid.RowDefinitions>

<RowDefinition Height="Auto" /> <RowDefinition Height="*" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="2*" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions>

<TextBlock Grid.Row="0"

Grid.Column="0" Grid.ColumnSpan="2" Text="Heading at top of Grid" HorizontalAlignment="Center" />

<Image Grid.Row="1"

Grid.Column="0"

Source="Images/BuzzAldrin0nTheMoon.png" />

<Ellipse Grid.Row="1"

Grid.Column="1"

Stroke="{StaticResource PhoneAccentBrush}" StrokeThickness="6" />

<TextBlock Grid.Row="2"

Grid.Column="0" Grid.ColumnSpan="2" Text="Footer at bottom of Grid" HorizontalAlignment="Center" />

</Grid>

В данном примере я просто добавил описания строк и столбцов в существующую сетку для содержимого. Для каждого элемента Grid явно заданы Grid.Row и Grid.Column, но они могут быть опущены, если имеют нулевые значения. И верхний, и нижний элементы TextBlock занимают по два столбца, что обеспечивает их центрирование относительно всей сетки.

Два столбца распределены таким образом, что первый из них в два раза шире второго. Ширина первого столбца определяет размер Image, после чего в ячейке выполняется центрирование этого изображение по вертикали:

Попробуем задать свойства HorizontalAlignment и VerticalAlignment для этого Grid. Обнаружится, что размер сетки ограничен оригинальными размерами растрового изображения.

У Grid под именем ContentPanel имеется собственное присоединенное свойство Grid.Row, но оно относится ко второй строке родительского Grid, который называется LayoutRoot. Первую строку этого Grid занимает StackPanel с двумя заголовками.

И теперь, наконец, мы достигли такой концентрации знаний по Silverlight и XAML, когда уже ничего в MainPage.xaml не должно представлять загадки.

Источник: Чарльз Петзольд, Программируем Windows Phone 7, Microsoft Press, © 2011.

По теме:

  • Комментарии