Главная » Разработка для Windows Phone 7 » Вопросы компоновки Windows Phone 7

0

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

•                                 Background типа Brush

•                                  Children типа UIElementCollection

•                                 IsItemsHost (Является хостом элементов) типа bool

С первым свойством все понятно, и третье является свойством только для чтения и касается роли класса в ListBox (Окно списка) и подобных классах.

Самым значимым является свойство Children. В предыдущей главе мы видели свойство Child типа UIElement в классе Border. Свойство Children, определяемое классом Panel, типа UIElementCollection. Громадная разница!

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

Поэтому сам класс Panel является абстрактным. Рассмотрим иерархию класса Panel со всеми производными от него классами:

Object

DependencyObject (абстрактный) UIElement (абстрактный)

FrameworkElement (абстрактный) Panel (абстрактный) Canvas

InkPresenter (запечатанный)

Grid

StackPanel

VirtualizingPanel (абстра ктн ый)

VirtualizingStackPanel PanoramaPanel MapLayerBase (абстрактный)

MapLayer (запечатанный)

Silverlight обеспечивает для Windows Phone три стандартных типа панелей: StackPanel (вероятно, самый простой вид панелей), Grid (основной вариант для наиболее типовых компоновок) и Canvas (Холст). Canvas в большинстве случаев следует избегать, однако, он имеет некоторые особые свойства, делающие его незаменимым в ряде ситуаций.

Набор инструментов Silverlight for Windows Phone Toolkit включает WrapPanel (Панель с переносом), очень подобную правой части Windows Explorer.

В следующей главе я покажу пример использования InkPresenter (Элемент отображения рукописного ввода). Опция VirtualizingPanel (Виртуализирующая панель) обсуждается в

главе 17 в связи с элементами управления списками. Все остальные (как следует из их имен) используются для специальных целей с элементами управления Panorama (Панорама) и Map (Карта).

Вы уже видели Grid и StackPanel в стандартном MainPage.xaml и, вероятно, догадались, что панели могут быть вложенными. Панели являются основными архитектурными элементами Silverlight-страницы.

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

Grid с одной ячейкой

Как правило, Grid состоит из строк и столбцов, но в предыдущих главах было продемонстрировано, что множество дочерних элементов могут размещаться в Grid с одной ячейкой. Приведу простой пример для справки:

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

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <TextBlock Text="TextBlock aligned at right bottom" HorizontalAlignment="Right" VerticalAlignment="Bottom" />

<Image Source="Images/BuzzAldrinOnTheMoon.png" />

<Ellipse Stroke="{StaticResource PhoneAccentBrush}" StrokeThickness="2 4" />

<TextBlock Text="TextBlock aligned at left top" HorizontalAlignment="Left" VerticalAlignment="Top" />

</Grid>

Каждый из четырех элементов имеет в своем распоряжении всю область содержимого:

StackPanel занимает всю площадь сетки для содержимого, даже если это пространство больше, чем необходимо для размещения его дочерних элементов. Это можно без труда проверить с помощью свойства Background элемента StackPanel. StackPanel заполняет родительский контейнер, потому что по умолчанию свойства HorizontalAlignment и VerticalAlignment имеют значение Stretch.

Чтобы StackPanel занимал именно столько пространства, сколько необходимо, и размещался в сетке для содержимого определенным образом, измените значения свойств HorizontalAlignment или VerticalAlignment. На рисунке проиллюстрирован пример, когда свойству Background задано значение Pink, и свойству VerticalAlignment – Center.

В данном конкретном приложении свойство HorizontalAlignment элемента StackPanel вообще не оказывает никакого влияния на компоновку.

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

По теме:

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