Grid и VariableSizedWrapGrid

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

При создании нового проекта по шаблону Blank App разметка страницы в xaml уже содержит элемент Grid. Однако по умолчанию он содержит одну ячейку (или одну строку и один столбец), в которой размещаются все элементы управления. Для определения строк используется свойство RowDefinitions, а для определения столбцов - свойство ColumnDefinitions:

<Grid.RowDefinitions>
    <RowDefinition></RowDefinition>
    <RowDefinition></RowDefinition>
    <RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
    <ColumnDefinition></ColumnDefinition>
    <ColumnDefinition></ColumnDefinition>
    <ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>

Каждая строка задается с помощью вложенного элемента RowDefinition, то есть в данном случае в гриде определено 3 строки. А каждый столбец объявляется с помощью элемента ColumnDefinition, то есть здесь у нас три столбца. В итоге в данном случае у нас получается таблица 3х3.

Чтобы поместить элемент управления в определенную ячейку Grid, в разметке элемента управления надо указать свойства Grid.Column и Grid.Row. Они соответственно определяют столбец и строку, на пересечении которых будет размещаться элемент управления. Кроме того, если мы хотим растянуть элемент управления на несколько строк или столбцов, то можно указать свойства Grid.ColumnSpan и Grid.RowSpan, как в следующем примере:

<Page
    x:Class="LayoutApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:LayoutApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Rectangle Grid.Column="0" Grid.Row="0" Fill="LightGreen"/>
        <Rectangle Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="3" Fill="LightBlue"  />
        <Rectangle Grid.Column="2" Grid.Row="2" Fill="LightPink" />
    </Grid>
</Page>

В данном случае в ячейках грида размещены элементы Rectangle - прямоугольники с цветовой заливкой.

Если у элементов грида явным образом не указан номер строки (или столбца), то по умолчанию элемент помещается в самую первую строку (или столбец).

Размеры строк и столбцов

Пропорциональные размеры

В примере выше строки и столбцы определены без указания их размеров. Поэтому они по умолчанию принимают пропорциональные размеры. Мы можем явным образом задать пропорциональные размеры, используя символ * (звездочка):

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="0.5*" />
    </Grid.ColumnDefinitions>
    <Rectangle Grid.Column="0" Fill="LightPink"/>
    <Rectangle Grid.Column="1" Fill="LightBlue"  />
</Grid>

Здесь два столбца с пропорциональными размерами. Только второй столбец имеет половину от ширины первого столбца.

Если столбец имеет ширину, равную *, то данный столбец будет занимать все оставшееся место. Если у нас есть несколько столбцов, ширина которых равна *, то все доступное место делится поровну между всеми такими сроками и столбцами. Использование коэффициентов (0.5*) позволяет уменьшить или увеличить выделенное место на данный коэффициент. При этом все коэффициенты складываются (коэффициент * аналогичен 1*) и затем все пространство делится на сумму коэффициентов. То же самое касается высоты строк.

Так, в вышеприведенном примере сумма коэффициентов столбцов равна 1* + 0.5* = 1.5*. Если у нас грид имеет ширину 300 единиц, то для коэффициент 1* будет соответствовать пространству 300 / 1.5 = 200 единиц. Поэтому первый столбец будет иметь ширину в 200 единиц, второй - 200 * 0.5 = 100 единиц.

Автоматические размеры

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

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

Абсолютные размеры

В данном случае высота и ширина указываются в единицах, независимых от устройства

<ColumnDefinition Width="150" />
<RowDefinition Height="200" />

Можно комбинировать все типы размеров. В этом случае от ширины/высоты грида отнимается ширина/высота столбцов/строк с абсолютными или автоматическими размерами, и затем оставшееся место распределяется между столбцами/строками с пропорциональными размерами.

VariableSizedWrapGrid

VariableSizedWrapGrid также представляет контейнер табличного типа, однако позиционирование внутри контейнера в нем задают два свойства: MaximumRowsOrColumns и Orientation. MaximumRowsOrColumns указывает на максимальное количество строк или столбцов в гриде. А Orientation задает вертикальную или горизонтальную ориентацию. При вертикальной ориентации MaximumRowsOrColumns указывает на максимальное количество строк, а при горизонтальной - столбцов. Если количество элементов в строке (столбце) превышает максимальное, то для вмещения элементов создается новая строка (столбец).

Также с помощью свойств ItemWidth и ItemHeight можно задать ширину и высоту ячейки грида соответственно. Если эти свойства явным образом не заданы, то ширина и высота ячеек вычисляется на основе размеров элементов. Например:

<Page
    x:Class="LayoutApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:LayoutApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <VariableSizedWrapGrid MaximumRowsOrColumns="2" ItemHeight="120" ItemWidth="180">
        <Rectangle Fill="Red" Width="150" Height="120" />
        <Rectangle Fill="Blue" Width="150" Height="120" />
        <Rectangle Fill="Green" Width="180" Height="120" />
        <Rectangle Fill="Orange" Width="180" Height="120" />
    </VariableSizedWrapGrid>
</Page>

По умолчанию VariableSizedWrapGrid имеет вертикальную ориентацию, поэтому значение MaximumRowsOrColumns="2" в данном случае указывает на количество строк - не больше 2. Даже если на форме еще будет место для дополнительных строк, их будет не больше 2.

При горизонтальной ориентации ограничение было бы на количество столбцов:

<VariableSizedWrapGrid Background="White" MaximumRowsOrColumns="2" Orientation="Horizontal">

С помощью прикрепляемых свойств VariableSizedWrapGrid.ColumnSpan и VariableSizedWrapGrid.RowSpan можно растянуть элемент на несколько столбцов и строк:

<VariableSizedWrapGrid MaximumRowsOrColumns="3" ItemHeight="100" ItemWidth="100">
	<Rectangle Fill="Red" />
	<Rectangle Fill="Blue" VariableSizedWrapGrid.RowSpan="2"/>
	<Rectangle Fill="Green" VariableSizedWrapGrid.RowSpan="2" 
		VariableSizedWrapGrid.ColumnSpan="2"/>
	<Rectangle Fill="Yellow" VariableSizedWrapGrid.ColumnSpan="2"/>
</VariableSizedWrapGrid>