VP_lektsia_2_Komponovka

Лекция 2. Компоновка

Компоновка (layout) представляет собой процесс размещения элементов внутри контейнера.
Благодаря компоновке возможно настроить элементы интерфейса, позиционировать их определенным образом.
Например, элементы компоновки в WPF позволяют при ресайзе - сжатии или растяжении масштабировать элементы, что очень удобно, а визуально не создает всяких шероховатостей типа незаполненных пустот на форме

В WPF компоновка осуществляется при помощи специальных контейнеров. Фреймворк предоставляет нам следующие контейнеры:
Grid,
UniformGrid,
StackPanel,
WrapPanel,
DockPanel
Canvas.

Различные контейнеры могут содержать внутри себя другие контейнеры.
Кроме данных контейнеров существует еще ряд элементов, такие как TabPanel, которые могут включать другие элементы и даже контейнеры компоновки, однако на саму компоновку не столь влияют в отличие от выше перечисленных. Кроме того, если нам не хватает стандартных контейнеров, мы можем определить свои с нужной нам функциональностью.
Контейнеры компоновки позволяют эффективно распределить доступное пространство между элементами, найти для него наиболее предпочтительные размеры.
Все выше перечисленные контейнеры компоновки наследуются от абстрактного класса Panel.

Процесс компоновки
Процесс компоновки проходит два этапа:
измерение (measure)
расстановка (arrange).
На этапе измерения контейнер производит измерение предпочтительного для дочерних элементов места. Однако не всегда контейнер имеет достаточно места, чтобы расставить все элементы по их предпочтительным размером, поэтому их размеры приходится усекать.
Затем происходит этап непосредственной расстановки дочерних элементов внутри контейнера.

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

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

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

Пример
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:LayoutApp"
mc:Ignorable="d"
Title="Grid" Height="250" Width="350"> Grid.Column="0" Grid.Row="1" Content="Объединение трех столбцов" Grid.ColumnSpan="3" />

Атрибут ShowGridLines="True" у элемента Grid задает видимость сетки, по умолчанию оно равно False.

Установка размеров

UniformGrid Content="Left Bottom" />

GridSplitter
HorizontalAlignment="Center" VerticalAlignment="Stretch" />

StackPanel
Это более простой элемент компоновки. Он располагает все элементы в ряд либо по горизонтали, либо по вертикали в зависимости от ориентации

Window x:Class="LayoutApp.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:LayoutApp"
mc:Ignorable="d"
Title="StackPanel" Height="300" Width="300">

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:LayoutApp"
mc:Ignorable="d"
Title="StackPanel" Height="300" Width="300"> Orientation="Horizontal">

При горизонтальной ориентации все вложенные элементы располагаются слева направо.
Если мы хотим, чтобы наполнение стека начиналось справа налево, то нам надо задать свойство FlowDirection:
.
По умолчанию это свойство имеет значение LeftToRight - то есть слева направо.

DockPanel
Этот контейнер прижимает свое содержимое к определенной стороне внешнего контейнера. Для этого у вложенных элементов надо установить сторону, к которой они будут прижиматься с помощью свойства DockPanel.Dock.

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:LayoutApp"
mc:Ignorable="d"
Title="DockPanel" Height="250" Width="300">

WrapPanel
Эта панель, подобно StackPanel. Главное отличие от StackPanel - если элементы не помещаются в строке или столбце, создаются новые столбец или строка для не поместившихся элементов.
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:LayoutApp"
mc:Ignorable="d"
Title="WrapPanel" Height="250" Width="300">

Canvas
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="300" Width="300"> Content="Top 20 Left 40" Canvas.Top="20" Canvas.Left="40" />

Свойства компоновки элементов. Выравнивание
Свойство HorizontalAlignment
выравнивает элемент по горизонтали относительно правой или левой стороны контейнера и соответственно может принимать значения Left, Right, Center (положение по центру), Stretch (растяжение по всей ширине).
Свойство VerticalAlignment
выравнивание по вертикали с помощью свойства VerticalAlignment, которое принимает следующие значения: Top (положение в верху контейнера), Bottom (положение внизу), Center (положение по центру), Stretch (растяжение по всей высоте).

Отступы margin
Свойство Margin устанавливает отступы вокруг элемента. Синтаксис: Margin="левый_отступ верхний_отступ правый_отступ нижний_отступ". Например, установим отступы у одной кнопки слева и сверху, а у другой кнопки справа и снизу
HorizontalAlignment="Left" VerticalAlignment="Top"/>