Технология SilverLight для чайников. Урок 3. Контейнеры.
Очень часто при создании WEB-интерфейса встает проблема, что бы сделать интерфейс привлекательным, гибким и практичным. Все упирается в то, что приложение может использоваться на разном оборудовании с разными характеристиками. Хуже всего то, что разработчик не может задать размер окна браузера в котором будет выведено содержимое SilverLight. К счастью, из положения есть выход: контейнеры.
Каждый контейнер обладает своей логикой размещения элементов. Вот лишь несколько способов такого размещения:
-
Наложить элементы друг на друга.
-
Разместить в ячейках невидимой решетки.
-
Позиционировать на основе жестко закодированной системы координат.
В окно SilverLight помещается только один элемент. Что бы вывести несколько элементов, нужно разместить на странице контейнер и поместить их туда. Каждый контейнер это панель, происходящая от абстрактного класса System.Windows.Controls.Panel. Этот класс имеет два открытых свойства Background и Children.
В SilverLight есть пять контейнеров:
-
StackPanel. Размещает элементы по вертикали или горизонтали.
-
WrapPanel. Размещает элементы с помощью переносимых строк или столбцов.
-
DockPanel. Выравнивает элементы по краю контейнера.
-
Grid. Размещает элементы в ячейках невидимой сетки.
-
Canvas. В этом контейнере элементы позиционируются с помощью фиксированных координат.
Один контейнер может быть так же размещен в другом.
А теперь от теории перейдем к практике. И так, создаем новое приложение SilverLight. При создании через Visual Studio 2010 в проект автоматически вставляется панель Grid:
Давайте для начала поиграемся с фоном панели. Фон на самом деле это не просто цвет, а гораздо более мощный объект: кисть (Brush). С помощью этого объекта фон не только можно залить одним цветом, но и более экзотическими видами заливки, например, градиентом или растровым изображением. Но мы пока зальем фон одним цветом. И так, кинем на форму пару кнопок:
И определим для них обработчики нажатия:
|
private void button1_Click(object sender, RoutedEventArgs e) { LayoutRoot.Background = new SolidColorBrush(Colors.Cyan); }
private void button2_Click(object sender, RoutedEventArgs e) { LayoutRoot.Background = new SolidColorBrush(Colors.Yellow); } |
Запустив программу, мы увидим нечто вроде этого:
Цвета можно задать и с помощью палитры RGB при помощи метода Color.FromArgb(A,R,G,B), где аргумент A - это прозрачность.
Для удобства размещения элементов можно добавить в сетку (компонент Grid) строки и столбцы:
Контейнер StackPanel позволяет автоматически размещать элементы по вертикали или горизонтали:
Если мы запустим наш пример, то увидим, что при изменении размера страницы контейнеры могут сжиматься и растягиваться. Вот например сжатое окно:
А вот мы его расширили:
В StackPanel можно поменять ориентацию размещения:
Еще элементы внутри контейнера можно выравнивать, используя свойство HorizontalAlignment или VerticalAlignment:
Скриншоты, помеченные знаком *, являются цитатами и иллюстрациями программного продукта "Microsoft Visual Studio 2010 Professional", авторское право на который принадлежит корпорации Microsoft..