При создании нового проекта по шаблону 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 частей, из которых под первую строку отводится одна часть, под вторую - две, а под третью - три.