Компоновка и позиционирование элементов

Контейнер Grid

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

Для более точной настройки места положения элементов элемент Grid использует свойства RowDefinitions и ColumnDefinitions. RowDefinitions задает определения строк, а ColumnDefinitions - определения столбцов. Например:

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

Каждая строка задается с помощью вложенного элемента RowDefinition, то есть в данном случае в гриде определено 3 строки.

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

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

<Page
    x:Class="HelloApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HelloApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
   <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Button Grid.Column="0" Grid.Row="0" Content="0 0" Height="120" />
        <Button Grid.Column="0" Grid.Row="1" Content="Объединение трех столбцов" Grid.ColumnSpan="3" Width="400" Height="120"  />
        <Button Grid.Column="2" Grid.Row="2" Content="2 2" Height="120"  />
    </Grid>
</Page>

Отсчет строк и столбцов начинается с нуля. Если мы не определим свойство Grid.Column, то по умолчанию элемент будет помещен в первый столбец. И также если мы не определим свойство Grid.Row, элемент будет размещаться в первой строке. Например:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition  />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Button>1</Button>
    <Button Grid.Column="1">2</Button>
    <Button Grid.Column="2">3</Button>
    <Button Grid.Row="1">4</Button>
    <Button Grid.Row="1" Grid.Column="1">5</Button>
    <Button Grid.Row="1" Grid.Column="2">6</Button>
    <Button Grid.Row="2">7</Button>
    <Button Grid.Row="2" Grid.Column="1">8</Button>
    <Button Grid.Row="2" Grid.Column="2">9</Button>
</Grid>

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

В предыдущем примере строки имеют одинаковую высоту, а столбцы - одинаковую ширину, которая определяется путем деления всего доступного пространства на количество строк/столбцов.

Но есть различные варианты настройки размеров.

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

Автоматические размеры задаются с помощью значения Auto, а столбец или строка занимает то место, которое им нужно:

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

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

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

<ColumnDefinition Width="120" />
<RowDefinition Height="80" />

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

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

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

Или, например, установим пропорциональную высоту строк:

<Grid.RowDefinitions>
    <RowDefinition Height="1*" />
    <RowDefinition Height="2*" />
    <RowDefinition Height="3*" />
</Grid.RowDefinitions>

В данном случае вся высота грида будет разделена на 6 частей, из которых под первую строку отводится одна часть, под вторую - две, а под третью - три.