Главная » Silverlight » Верстка

0

При создании пользовательского интерфейса половина дела — размещение со­держимого таким образом, чтобы оно выглядело привлекательно и было гибким и практичным. В приложениях, хостируемых браузерами, это весьма каверзная зада­ча, поскольку приложение может использоваться на самом разнообразном оборудова­нии с разными характеристиками. Что хуже всего, разработчик приложения не может задать размеры окна браузера, в котором будет выведено содержимое Silverlight.

К счастью, Silverlight наследует наиболее важную особенность своей старшей се­стры WPF — чрезвычайно гибкую модель компоновки. На ее основе разработчик орга­низует содержимое, размещая его в наборе контейнеров. Каждый контейнер обладает собственной логикой размещения элементов: один накладывает элементы друг на дру­га, другой —- размещает их в ячейках невидимой решетки, третий — позиционирует их на основе жестко закодированной системы координат и т.д. Если вы достаточно амбициозны, можете даже создать контейнеры, обладающие пользовательской логикой размещения.

В этой главе рассматривается использование контейнеров для создания визуально­го "скелета" страницы Silverlight. Значительную часть времени вы потратите на иссле­дование трех базовых контейнеров Silverlight: StackPanel (Панель для размещения в ряд), Grid (Решетка) и Canvas (Холст). Освоив их, вы сможете расширять возможности приложений, создавая новые пользовательские контейнеры. Кроме того, вы увидите, как можно создать приложение, выходящее за рамки окна браузера и занимающее весь экран.

Новые средства. В Silverlight 3 система верстки не изменилась. Однако в текущую версию Silverlight Toolkit добавлено два специализированных контейнера верстки, играющие важную роль в WPF, — WrapPanel и DockPanel. Оба они рассматриваются в данной главе.

Контейнеры

Окно Silverlight может содержать только один элемент. Чтобы вывести на экран не­сколько элементов и создать более полезный интерфейс, нужно разместить на страни­це контейнер и добавить в него другие элементы. Модель размещения определяется ис­пользуемым контейнером.

Каждый контейнер Silverlight является панелью, производной от абстрактного клас­са System. Windows .Controls. Panel (рис. 3.1).

Класс Panel добавляет два открытых свойства: Background (Фон) и Children (Дочерние элементы). Свойство Background — это кисть, используемая для прорисовки фона панели, а свойство Children содержит коллек­цию элементов, хранящихся на панели (т.е. элемен­тов первого уровня вложенности; каждый элемент может в свою очередь содержать вложенные элемен­ты). Кроме того, класс Panel содержит ряд встроен­ных средств, предназначенных для создания пользо­вательских контейнеров (см. далее).

Сам по себе базовый класс Panel ничего не делает, он служит основой более специализированных клас­сов. Платформа Silverlight предоставляет три класса, производных от Panel, которые можно использовать для верстки страницы. Кроме того, в Silverlight Tbolkit добавлено два класса. Как и большинство визуальных элементов Silverlight, эти классы (табл. 3.1) находятся в пространстве имен System.Windows.Controls.

Таблица 3.1. Базовые панели Silverlight

Имя класса

StackPanel

Описание

Размещение элементов по вертикали или горизонтали; этот контейнер обычно используется в небольших разделах большой, сложной, страницы

WrapPanel

Размещение элементов с помощью переносимых строк; при горизонтальной ориентации WrapPanel располагает элементы по строкам слева направо и далее в следующей строке; при вертикальной ориентации элементы располагаются сверху вниз и далее в следующем столбце; этот контейнер доступен только в Silverlight Toolkit

DockPanel

Выравнивание элементов по краю контейнера; этот контейнер доступен только в Silverlight Toolkit

Grid Canvas

Размещение элементов в строках и столбцах невидимой таблицы; наиболее гибкий и часто используемый контейнер

Абсолютное позиционирование элементов с помощью фиксированных координат; самый простой, но наименее гибкий контейнер

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

Примечание. Существует еще один специальный контейнер virtualizingStackPanel, не приведенный в табл. 3.1. Он размещает элементы так же, как StackPanel, но использует для этого технологию оптимизации памяти, называемую виртуализация. С его помощью элементы могут быть сведены в список (как в ListBox), содержащий десятки тысяч пунктов. Существенного ухудшения производительности при этом нет, потому что создаются только объекты, видимые на экране. Контейнер VirtualizingStackPanel можно использовать для создания пользовательских шаблонов и элементов управления (см. главу 13), однако размещать с его помощью элементы на странице нерационально, поэтому в данной главе он не рассматривается.

Фон панели

Рис. 3.1. Иерархия класса Panel

Фон элемента Panel определяется с помощью свойства Background. Можно было бы ожидать, что свойство Background содержит какой-либо простой объект цвета. Однако оно содержит значительно более мощный объект: кисть Brush. С помощью кисти фон можно заполнить не только одноцветной заливкой (объект SolidColorBrush), но и более экзотичным содержимым, например градиентом (LinearGradientBrush) или растровым изображением (ImageBrush). В данном разделе рассматривается одноцветная заливка фона с помощью объекта SolidColorBrush. Более сложные кисти рассматриваются в главе 9.

Примечание. Все классы Brush находятся в пространстве имен System.Windows .Media.

Например, если нужно присвоить всей странице голубой фон, его можно определить на корневой панели с помощью следующего кода.

layoutRoot.Background =

new SolidColorBrush(Colors.AliceBlue);

Каждый объект Color является экземпляром структуры Color пространства имен System. Windows .Media. Кроме того, класс Colors предоставляет широкий диапазон пре­допределенных именованных цветов с помощью отдельного статического свойства для каждого цвета. Имена свойств основаны на именах цветов, поддерживаемых всеми со­временными браузерами. Приведенный выше код создает новый объект SolidColorBrush и присваивает ему голубой именованный цвет AliceBlue, предопределенный в классе Colors. Кисть можно присвоить кнопке, в результате чего ее фон станет голубым.

Совет. В Silverlight 3 добавлен класс SystemColor s. Он предоставляет объекты Color, которые совпадают с текущими предпочтениями пользователя, определенными в операционной системе. Например, объект SystemColors. ActiveColorBorder извлекает из системы цвет, используемый для прорисовки рамки активного окна. В некоторых случаях класс SystemColors желательно использовать для согласования приложения с текущей цветовой схемой, особенно при создании приложений, выполняемых не в браузере (см. главу 7).

Классы Colors и SystemColors предоставляют интуитивно очевидные имена цветов, однако это не единственный способ установки цвета. Для этого можно также создать объект Color и присвоить ему значение RGB. Каждый компонент значения RGB должен быть целым числом в диапазоне от О до 255.

int red = 0; int green = 255; int blue = 0;

layoutRoot.Background = new

SolidColorBrush(Color.FromArgb(255, red, green, blue));

Заливку можно сделать частично прозрачной, установив значение alpha при вызове метода Color. FromArgb (). При значении 255 заливка полностью непрозрачная, а при значении 0 — прозрачная.

Цвета чаще устанавливают в разметке XAML, а не в коде. В разметке можно, вместо определения объекта Brush, задать имя цвета или значение RGB. Преобразователь ти­пов автоматически создаст для свойства Background объект SolidColorBrush на основе заданного цвета. Ниже приведен пример использования именованного цвета.

<Grid x:Name="layoutRoot" Background="Red">

Эта разметка эквивалентна следующей, более многословной.

<Grid x:Name="layoutRoot"> <Grid.Background>

<SolidColorBrush Color="Red" /> </Grid.Background>

</Grid>

Для создания и применения кисти другого типа (например, LinearGradientBrush) необходима более длинная разметка.

Для применения цвета в коде используется менее удобный синтаксис, чем в XAML. В нем значения R, G и В определяются в шестнадцатеричном формате. Доступны два формата: #rrggbb и #aarrggbb. Второй формат содержит значение alpha. Для задания значений A, R, G и В нужны только две цифры, поскольку они приводятся в шестнадца­теричном формате. Приведенная ниже разметка создает тот же цвет, что и в предыду­щем примере, но на этот раз с помощью формата taarrggbb.

<Grid x:Name="layoutRoot" Background="#FFFF0000">

Значение alpha равно FF (т.е. 255), значение R— 255, a G и В — нулю. Следовательно, фон красный непрозрачный.

По умолчанию свойство Background панели имеет значение null, что эквивалентно следующей разметке.

<Grid x:Name="layoutRoot" Background="{x:Null}">

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

Примечание. Кисти поддерживают автоматическое извещение об изменениях. Это означает, что если подключить кисть к элементу управления, а затем изменить кисть, элемент управления будет обновлен.

Источник: Мак-Дональд, Мэтью. Silverlight 3 с примерами на С# для профессионалов. : Пер. с англ. —- М. : ООО «И.Д. Вильяме», 2010. — 656 с. : ил. — Парал. тит. англ.

По теме:

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