Компоновка
135Silverlight 5 --- Компоновка
При создании пользовательского интерфейса половина дела — размещение содержимого таким образом, чтобы оно выглядело привлекательно и было гибким и практичным. В приложениях, хостируемых браузерами, это весьма каверзная задача, поскольку приложение может использоваться на самом разнообразном оборудовании с разными характеристиками. Что хуже всего, разработчик приложения не может задать размеры окна браузера, в котором будет выведено содержимое Silverlight.
К счастью, Silverlight наследует наиболее важную особенность своей "старшей сестры" WPF — чрезвычайно гибкую модель компоновки. На ее основе разработчик организует содержимое, размещая его в наборе контейнеров. Каждый контейнер обладает собственной логикой размещения элементов: один накладывает элементы друг на друга, другой — размещает их в ячейках невидимой решетки, третий — позиционирует их на основе жестко закодированной системы координат и т.д. Если вы достаточно амбициозны, можете даже создать контейнеры, обладающие пользовательской логикой размещения.
Контейнеры
Окно Silverlight может содержать только один элемент. Чтобы вывести на экран несколько элементов и создать более полезный интерфейс, нужно разместить на странице контейнер и добавить в него другие элементы. Модель размещения определяется используемым контейнером.
Каждый контейнер Silverlight является панелью, производной от абстрактного класса System.Windows.Controls.Panel:
Класс Panel добавляет два открытых свойства: Background (Фон) и Children (Дочерние элементы). Свойство Background — это кисть, используемая для прорисовки фона панели, а свойство Children содержит коллекцию элементов, хранящихся на панели (т.е. элементов первого уровня вложенности; каждый элемент может в свою очередь содержать вложенные элементы). Кроме того, класс Panel содержит ряд встроенных средств, предназначенных для создания пользовательских контейнеров.
Сам по себе базовый класс Panel ничего не делает, а лишь служит основой более специализированных классов. Silverlight предоставляет три класса, производных от Panel, которые можно использовать для верстки страницы. Кроме того, в Silverlight Toolkit добавлено два класса. Как и большинство визуальных элементов Silverlight, эти классы находятся в пространстве имен System.Windows.Controls.
Все контейнеры, представленные в Silverlight являются полными аналогами таких же контейнеров в WPF, поэтому здесь они не рассматриваются. В следующей таблице приведены ссылки на соответствующее описание каждого контейнера в разделе по WPF.
Имя класса | Описание |
---|---|
StackPanel | Размещение элементов по вертикали или по горизонтали. Этот контейнер обычно используется в небольших разделах большой, сложной страницы. |
WrapPanel | Размещение элементов с помощью переносимых строк. При горизонтальной ориентации WrapPanel располагает элементы по строкам слева направо и далее в следующей строке. При вертикальной ориентации элементы располагаются сверху вниз и далее в следующем столбце. Этот контейнер доступен только в Silverlight Toolkit. |
DockPanel | Выравнивание элементов по краю контейнера. Этот контейнер доступен только в Silverlight Toolkit. |
Grid | Размещение элементов в строках и столбцах невидимой таблицы. Наиболее гибкий и часто используемый контейнер. |
Canvas | Абсолютное позиционирование элементов с помощью фиксированных координат. Самый простой, но наименее гибкий контейнер. |
Контейнеры могут быть вложенными. Типичный пользовательский интерфейс начинается с наиболее популярного контейнера Grid, содержащего другие контейнеры, которые упорядочивают небольшие группы элементов, такие как текстовые поля с надписями, элементы списков, пиктограммы на панелях инструментов, столбцы кнопок и т.п.
Существует еще один специальный контейнер - VirtualizingStackPanel, не приведенный в вышеуказанной таблице. Он размещает элементы так же, как StackPanel, но использует для этого технологию оптимизации памяти, называемую виртуализация. С его помощью элементы могут быть сведены в список (как в ListBox), содержащий десятки тысяч пунктов. Существенного ухудшения производительности при этом нет, потому что создаются только объекты, видимые на экране.