April 2, 2020

Grid #1

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

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

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

И так, для начала нам нужно открыть <Grid></Grid> скобки( обычно они изначально открыты в wpf-файле ). Далее нужно установить кол-во строк в нашей сетке, это делается при помощи Grid.RowDefinitions

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

Число <RowDefinition/> говорит о кол-во строк в нашей разметке. В приведенном выше примере, мы создали 3 строки.

Число столбцов, указывается аналогично, только вместо слова Row указывается слово Column

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

Записав этот код в xaml, мы получим следующую заметку

Синие разделители видны только в среде разработки, поэтому не переживайте за внешний вид программы.

Теперь попробуем разместить xaml-элемент( например Button ) во 2 строчке и 2 столбце.

!!Важно!!

Строки и столбцы, так же как и элементы массива начинают считаться с нуля. Поэтому вторая строка и второй столбец будут являться 1 и 1.

И так, для этого нам нужно написать следующий код

<Button Grid.Column="1" Grid.Row="1"></Button>

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

На этом все, удачи программисты!