Технология SilverLight для чайников. Урок 3. Контейнеры.

Очень часто при создании WEB-интерфейса встает проблема, что бы сделать интерфейс привлекательным, гибким и практичным. Все упирается в то, что приложение может использоваться на разном оборудовании с разными характеристиками. Хуже всего то, что разработчик не может задать размер окна браузера в котором будет выведено содержимое SilverLight. К счастью, из положения есть выход: контейнеры.

Каждый контейнер обладает своей логикой размещения элементов. Вот лишь несколько способов такого размещения:

• Наложить элементы друг на друга.

• Разместить в ячейках невидимой решетки.

• Позиционировать на основе жестко закодированной системы координат.

В окно SilverLight помещается только один элемент. Что бы вывести несколько элементов, нужно разместить на странице контейнер и поместить их туда. Каждый контейнер это панель, происходящая от абстрактного класса System.Windows.Controls.Panel. Этот класс имеет два открытых свойства Background и Children.

В SilverLight есть пять контейнеров:

• StackPanel. Размещает элементы по вертикали или горизонтали.

• WrapPanel. Размещает элементы с помощью переносимых строк или столбцов.

• DockPanel. Выравнивает элементы по краю контейнера.

• Grid. Размещает элементы в ячейках невидимой сетки.

• Canvas. В этом контейнере элементы позиционируются с помощью фиксированных координат.

Один контейнер может быть так же размещен в другом.

А теперь от теории перейдем к практике. И так, создаем новое приложение SilverLight. При создании через Visual Studio 2010 в проект автоматически вставляется панель Grid:

Давайте для начала поиграемся с фоном панели. Фон на самом деле это не просто цвет, а гораздо более мощный объект: кисть (Brush). С помощью этого объекта фон не только можно залить одним цветом, но и более экзотическими видами заливки, например, градиентом или растровым изображением. Но мы пока зальем фон одним цветом. И так, кинем на форму пару кнопок:

И определим для них обработчики нажатия:

Запустив программу, мы увидим нечто вроде этого:

Цвета можно задать и с помощью палитры RGB при помощи метода Color.FromArgb(A,R,G,B), где аргумент A - это прозрачность.

Для удобства размещения элементов можно добавить в сетку (компонент Grid) строки и столбцы:

Контейнер StackPanel позволяет автоматически размещать элементы по вертикали или горизонтали:

Если мы запустим наш пример, то увидим, что при изменении размера страницы контейнеры могут сжиматься и растягиваться. Вот например сжатое окно:

А вот мы его расширили:

В StackPanel  можно поменять ориентацию размещения:

Еще элементы внутри контейнера можно выравнивать, используя свойство HorizontalAlignment или VerticalAlignment:

Скриншоты, помеченные знаком *, являются цитатами и иллюстрациями  программного продукта "Microsoft Visual Studio 2010 Professional", авторское право на который принадлежит корпорации Microsoft..