Grid

44

Элемент управления Grid — это наиболее мощный контейнер компоновки в WPF. Большая часть того, что можно достичь с помощью других элементов управления компоновкой, также возможно и в Grid. Контейнер Grid является идеальным инструментом для разбиения окна на меньшие области, которыми можно управлять с помощью других панелей. Фактически Grid настолько удобен, что при добавлении в Visual Studio нового документа XAML для окна автоматически добавляются дескрипторы Grid в качестве контейнера первого уровня, вложенного внутрь корневого элемента Window.

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

Хотя Grid задуман как невидимый элемент, можно установить свойство Grid.ShowGridLines в true и получить наглядное представление о нем. Это средство на самом деле не предназначено для украшения окна. В действительности это средство для облегчения отладки, которое предназначено для того, чтобы наглядно показать, как Grid разделяет пространство на отдельные области. Благодаря ему, появляется возможность точно контролировать то, как Grid выбирает ширину колонок и высоту строк.

Создание компоновки на основе Grid — двухшаговый процесс. Сначала выбирается необходимое количество колонок и строк. Затем каждому содержащемуся элементу назначается соответствующая строка и колонка, тем самым помещая его в правильное место. Ниже приведено простое определение <Grid>:

<Grid ShowGridLines="True">
        <!-- Устанавливаем две строки -->
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <!-- Устанавливаем три столбца -->
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <!-- Размещаем элементы в сетке -->
        <Button Grid.Row="0" Grid.Column="0" Background="Red">Red Button</Button>
        <Button Grid.Row="0" Grid.Column="1" Background="Purple"
                Foreground="White">Purple Button</Button>
        <Button Grid.Row="1" Grid.Column="1" Background="Khaki">Khaki Button</Button>
        <Button Grid.Row="1" Grid.Column="2" Background="LightGreen">Green Button</Button>
    </Grid>
Компоновка с помощью Grid

Для помещения индивидуальных элементов в ячейку используются присоединенные свойства Row и Column. Оба эти свойства принимают числовое значение индекса, начинающееся с 0.

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

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

Контейнер Grid помещает элементы в предопределенные строки и колонки. Это отличает его от таких контейнеров компоновки, как WrapPanel и StackPanel, создающих неявные строки и колонки в процессе размещения дочерних элементов. Чтобы создать сетку, состоящую из более чем одной строки и одной колонки, необходимо определить строки и колонки явно, используя объекты RowDefinition и ColumnDefinition.

При использовании Grid на поверхности проектирования Visual Studio вы обнаружите, что он работает несколько иначе, чем другие контейнеры компоновки. При перетаскивании элемента на Grid среда Visual Studio позволяет поместить его в точную позицию. Visual Studio выполняет подобный фокус, устанавливая свойство Margin элемента.

При установке полей Visual Studio использует ближайший угол. Например, если ближайшим к элементу является верхний левый угол Grid, то Visual Studio устанавливает верхнее и левое поля для позиционирования элемента (оставляя правое и нижнее поля равными 0). Если вы перетаскиваете элемент ниже, приближая его к нижнему левому углу, то Visual Studio устанавливает вместо этого нижнее и левое поля и устанавливает свойство VerticalAlignment в Bottom. Это очевидно влияет на то, как перемещается элемент при изменении размера Grid.

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

Однажды поняв, как работает Grid, вы сможете исправлять эти проблемы. Первый трюк заключается в конфигурировании Grid перед добавлением элементов за счет определения новых строк и колонок. (Коллекции RowDefinitions и ColumnDefinitions можно редактировать с использованием окна Properties (Свойства).) Однажды настроив Grid, вы можете перетаскивать в него нужные элементы и конфигурировать их настройки полей и выравнивание в окне Properties, либо редактируя XAML-разметку вручную.

Пройди тесты
Лучший чат для C# программистов