Упражнение 8. Панель Grid
В панели UniformGrid все ячейки имеют одинаковый размер. В некоторых случаях этого может быть недостаточно, тогда применяют более развитую панель Grid, у которой соседние строки могут иметь разную высоту, а соседние столбцы - разную ширину. Элемент Grid самый гибкий и универсальный из всех менеджеров размещения. Он восполняет применительно к окнам широко используемую в HTML функциональность элемента Table. Недаром мастер заготовки WPF -приложения первоначально включает в разметку именно элемент Grid.
Размещение в сетке Grid состоит из двух этапов: вначале выполняется определение строк и столбцов, а затем производится задание потомков и распределение их по слотам. Самый простой способ использования Grid, это задать свойства RowDefinitions и ColumnDefinitions, добавить несколько дочерних элементов и с помощью присоединенных к ним свойств Grid.Row и Grid.Column указать, какого потомка в какой слот (заготовленное место, ячейка) поместить. Но существуют и более тонкие настройки Grid, которые мы и рассмотрим в данном упражнении.
Создание заготовки приложения
Добавьте к решению новый проект WpfApp8 типа WPF Application и назначьте его стартовым
Заполните файл разметки Window1.xaml следующим кодом
<Window x:Class="WpfApp8.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Упражнение 8. Панель Grid"
Height="300" Width="300"
Background="LightGray"
>
<TabControl>
<TabItem Header="Grid 0">
</TabItem>
<TabItem Header="Grid 1">
</TabItem>
<TabItem Header="Grid 2">
</TabItem>
<TabItem Header="Grid 3">
</TabItem>
<TabItem Header="Grid 4">
</TabItem>
<TabItem Header="Grid 5">
</TabItem>
<TabItem Header="Grid 6">
</TabItem>
<TabItem Header="Grid 7">
</TabItem>
</TabControl>
</Window>
Запустите приложение
Первоначальный код является заготовкой для демонстрации вариантов работы с панелью Grid и в данном упражнении мы последовательно заполним все вкладки заготовки, изучая и иллюстрируя ее свойства. В ячейки сетки будем помещать кнопки и другие контейнеры, чтобы ощутить ее реакцию. Но нестоит забывать, что сама сетка как контейнер остается невидимой (если не задать ее фон), видна только выполнямая ею работа по размещению потомков.
Простое применение Grid
Заполните вкладку Grid 0 приведенным ниже кодом и запустите приложение
<TabItem Header="Grid 0">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Button Grid.Row="0" Grid.Column="0" Background="LightPink">Первый</Button>
<Button Grid.Row="1" Grid.Column="0" Background="Lime">Второй</Button>
<Button Grid.Row="1" Grid.Column="1" Background="Aquamarine">Третий (длинное содержимое)</Button>
<Button Grid.Row="0" Grid.Column="1" Background="Yellow">Четвертый</Button>
</Grid>
</TabItem>
Две секции <Grid.RowDefinitions> и <Grid.ColumnDefinitions> определяют строки и столбцы сетки. Дескрипторы <RowDefinition /> и <ColumnDefinition/> задают количество строк и столбцов. Здесь они применяются без параметров, поэтому устанавливают равные условия для всех слотов (зарезервированного места) сетки. Далее следуют размещаемые элементы, в качестве которых мы используем разноцветные кнопки. Порядок следования потомков здесь не играет значения, поскольку каждому из них явно указывается закрепленный за ним слот. Если содержимое потомка не умещается в отведенный слот, то по умолчанию оно усекается.
Поизменяйте размеры окна, чтобы почувствовать работу панели при данных настройках