Grid

один из Компонентов где размещаются другие UI элемента

<Grid>

</Grid>

он нужен чтоб разделять рабочие область на на отдельные области

Строки

для разделение на строки используется свойство Grid.RowDefinitions и сам элемент RowDefinition которое добавляет строки

<Grid.RowDefinitions>
    <RowDefinition/>
    <RowDefinition/>
</Grid.RowDefinitions>

у RowDefinition можно указать высоту Height="20" или Height="2*" по умолчанию стоит Height="1*" тут * это пропорции что позволяет равно разделять всё по частям. Например если стоит Height="2*"

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

Как это работает:

1. У нас две строки

2. В сумме у них 2* + 1* = 3* (всего 3 части)

3. Первая строка получает 2/3 (две трети) высоты

4. Вторая строка получает 1/3 (одну треть) высоты

Колонки

для разделение на колонки используется свойство Grid.ColumnDefinitions и сам элемент ColumnDefinition которое добавляет колонки

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
</Grid>

у ColumnDefinition можно указать высоту Width="20" или Width="2*" по умолчанию стоит Width="1*" тут * это пропорции что позволяет равно разделять всё по частям. Работает также как высота у строк

Размещая элементов

Размещая элементы в Grid то можно указать у них такие свойства:

• Grid.Row — указывает на какой будет строке элемент
• Grid.RowSpan — указывает сколько строк будет занимать элемент
• Grid.Column — указывает в колонке будет элемент
• Grid.ColumnSpan — указывает сколько колонок будет занимать элемент

Пример

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="2*"/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
        
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>

    <Button Grid.Column="0" Grid.Row="1" Grid.RowSpan="2" Content="Привет мир!" FontSize="24"/>

</Grid>