Главная » Silverlight » Контейнер Grid

0

Элемент Grid (Решетка) — наиболее мощный контейнер в Silverlight. Он так часто используется, что при добавлении на страницу нового документа XAML рабочая среда Visual Studio автоматически добавляет дескриптор Grid в качестве контейнера верхнего уровня, над которым определен только корневой элемент UserControl.

Объект Grid позиционирует дочерние элементы в невидимой решетке, состоящей из строк и столбцов. В ячейке решетки может находиться больше одного элемента (в этом случае они перекрываются), однако обычно размещают по одному элементу на ячей­ку. Дочерний элемент в свою очередь может быть контейнером, содержащим группу элементов управления.

Совет. Обычно объект Grid невидим. Чтобы решетка была видна на экране, нужно присвоить свойству Grid. ShowGridLines значение true. На практике свойство ShowGridLines используется не для того, чтобы сделать страницу эстетически более привлекательной, а для облегчения отладки страницы. Когда решетка видна, легче проконтролировать ширину столбцов и высоту строк.

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

Строки и столбцы создаются путем заполнения коллекций Grid.RowDefinitons и Grid.ColumnDefinitions нужными объектами. Например, если должно быть две стро­ки и три столбца, на страницу нужно добавить следующие дескрипторы.

<Grid ShowGridL±nes="True" Background="White"> <Grid.RowDefinitions> <RowDefinitionX/RowDefinition> <RowDefinitionX/RowDefinition> </Grid.RowDefinitions>

<Grid.ColumnDefinitions> <ColumnDefinition></ColumnDefinition> <ColumnDefinitionx/ColumnDefinition> <ColumnDefinitionx/ColumnDefinition> </Grid.ColumnDefinitions>

</Grid>

Элементы DowDefinition и ColumnDefinition могут не содержать никакой информа­ции. Если оставить их пустыми (как в приведенной выше разметке), объект Grid поделит пространство равномерно между всеми строками и столбцами. Все ячейки будут иметь одинаковые размеры, зависящие только от количества ячеек и размеров контейнера.

Для размещения дочернего элемента в ячейке используются подключенные свой­ства Row (Строка) и Column (Столбец). Их значения отсчитываются от нуля. Приведенная ниже разметка задает размещение в решетке четырех кнопок.

<Grid ShowGridLines="True" Background="White">

<Button Grid.Row="0" Grid.Column="0" Content="Top Left"></Button>

<Button Grid.Row="0" Grid.Column="l" Content="Middle Left"></Button>

<Button Grid.Row=" 1" Grid.Column="2" Content="Bottom Right"></Button>

<Button Grid.Row=" 1" Grid.Column=" 1" Content="Bottom Middle"></Button>

</Grid>

Каждый дочерний элемент должен быть явно размещен в одной из ячеек. Это позво­ляет разместить в ячейке более одного элемента (что редко имеет смысл) или оставить ячейку пустой (довольно часто так и делают). Кроме того, это позволяет объявлять раз­мещение элементов в произвольной последовательности. Однако рекомендуется опреде­лять позиции в определенном порядке: слева направо в каждой строке и сверху вниз по номерам строк.

Из приведенного выше правила существует одно исключение. Если не установить свойство Grid.Row или Grid.Column, то считается, что оно равно 0. Следовательно, если не установить оба свойства, элемент будет размещен в левой верхней ячейке.

учитывает базовый набор свойств компоновки, приведенный в табл. 3.3. Это означает, что вы можете добавлять внешние полоски вокруг содержи­мого ячеек, изменять режимы установки размеров ячеек, выравнивать внутренние элементы по краям ячеек и т.д. Если элемент больше ячейки в одном из направлений, часть содержимого отсекается (см. рис. 3.12).

Настройка строк и столбцов

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

поддерживает три стратегии установки размеров.

•       Абсолютные размеры. Каждому столбцу и каждой строке присваивается точ­ный размер в пикселях. Это наименее полезная стратегия, поскольку она недо­статочно гибкая и не учитывает изменение размеров содержимого и контейнера.

•       Автоматические размеры. Каждая строка и каждый столбец получают разме­ры, точно необходимые им для вывода содержимого. Это одна из наиболее по­лезных стратегий.

•       Пропорциональные размеры. Контейнер делится по ширине и высоте на оди­наковые части. Это наиболее часто используемая стратегия установки размеров. На рис. 3.12 видно, что размеры каждой ячейки увеличиваются пропорциональ­но размерам контейнера Grid.

Для обеспечения максимальной гибкости перечисленные выше стратегии установки размеров можно комбинировать. Например, можно создать несколько строк с автома­тически изменяемыми размерами, а затем предоставить одной или двум оставшимся строкам возможность занять оставшееся место.

Стратегия установки размеров задается с помощью свойства Width объекта ColumnDefinition или свойства Height объекта RowDefinition. Например, следующий элемент устанавливает фиксированную ширину столбца в 100 пикселей.

На рис. 3.12 показано, как простой контейнер Grid выглядит при двух разных раз­мерах панели. Обратите внимание на то, что свойство ShowGridLines имеет значение True, поэтому видны штриховые линии, разделяющие ячейки.

Рис. 3.12. Простая решетка

<ColumnDefinition Width="100"x/ComumnDefinition>

Для задания режима автоматической установки размеров текущего столбца исполь­зуется значение Auto.

<ColumnDefinition Width="Auto"<>/ColumnDefinition>

Для установки пропорциональных размеров используется символ звездочки.

<ColuranDefinition Width="*"<>/ColumnDefinition>

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

Чтобы поделить оставшееся пространство неравномерно, размеру можно присвоить вес, задаваемый перед звездочкой. Например, чтобы решетка содержала две пропорци­ональные строки и высота первой строки была равна половине высоты второй, можно применить следующую разметку.

<RowDefinition Height="*"></RowDefinition>

<RowDefinition Height="2*"></RowDefinition>

Объект Grid присвоит второй строке высоту, в два раза большую, чем первой. Вес задается произвольным числом.

Вложение контейнеров

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

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

<Grid ShowGridLines="True" Background="SteelBlue" HorizontalAlignment="Center" VerticalAlignment="Center">

<Grid.RowDefinitions> <RowDefinition Height="*"></RowDefinition> <RowDefinition Height="Auto"></RowDefinition>

</Grid.RowDefinitions>

<TextBlock Margin="10" Grid.Row="0" Foreground="White" Text="TecroBbM пример с вложенными контейнерами">

</TextBlock>

<StackPanel Grid.Row="l" HorizontalAlignment="Right" Orientation="Horizontal"> <Button Margin="10,10,2,10" Padding="3" Content="OK">

</Button>

<Button Margin="2,10,10,10" Padding="3" Content="OTMeHa">

</Button>

</StackPanel>

</Grid>

Обратите внимание на то, что в контейнере Grid не объявлены столбцы. Это до­пустимо, если используется только один столбец, причем его размер устанавливается пропорционально (в результате чего он занимает по ширине весь контейнер Grid). На рис. 3.13 показана страница, созданная приведенной выше разметкой.

Рис. 3.13. Базовое диалоговое окно

Примечание. В данном примере свойство Padding создает небольшой промежуток между рамками кнопок и их содержимым. Управление содержимым с помощью свойства Padding рассматривается в главе 5.

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

Предположим, вы решили, что кнопки ОК и Отмена нужно центрировать в нижней части страницы. Для этого достаточно изменить свойство выравнивания в контейнере StackPanel.

<StackPanel Grid.Row="l" HorizontalAlignment="Center" …>

Аналогично этому, если понадобится изменить размеры содержимого в первой стро­ке, весь контейнер Grid будет увеличен и кнопки "подвинутся", освобождая место для первой строки. Добавив на страницу стили (см. главу 12), можно сделать разметку более чистой и компактной.

Совет. Если дерево вложенных элементов слишком запутанное, легко потерять из виду общую структуру. Программа Visual Studio предоставляет удобные средства просмотра дерева элементов и позволяет легко перейти вниз по дереву к нужному элементу, чтобы просмотреть или отредактировать его. Это делается в окне Document Outline (Структура документа), которое можно открыть, выбрав команду ViewOOther Windows^Document Outline (ВидОДругие окнаоСтруктура документа).

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

По теме:

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