Основы работы с XAML и контейнерами компоновки

Xaml –ключевой элемент WPF, а потому чтобы начать создавать простые приложения на wpf необходимо для начала освоить элементарные принципы работы с Xaml. Xaml очень напомирает Html, есть такое же подобие тэгов как и в Html. Если тэг где-то открылся, значит, он обязательно должен закрыться в каком то месте разметки.

Для примера создадим новое WPF-приложение. Для этого нажмём в VS (visual studio) Ctrl-Shift-N, либо в меню File перейдём в подменю New, нажмём New Project. Появится окно, подобное представленному на рис.1 (в зависимости от версии VS, содержание окна может быть разным).

Рисунок 1. Создаём новое WPF-приложение.

Здесь нам надо выбрать WPF Application, внизу ввести директорию хранения проекта приложения, а так же название для приложения. Жмём Ок.

VS должна создать файл логики, где хранятся ваши функции и прочий код (*.cs), и файл который описывает дизайн формы (*.xaml). Если перейти в xaml файл, то вы увидите пустое окно, внизу окна должна быть Xaml разметка, типа такой:

<Window x:Class="WpfApplication5.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="MainWindow" Height="350" Width="525">

<Grid>

</Grid>

</Window>

Наша форма пока не содержит пользовательских элементов, и потому Xaml разметка настолько мала. Если вас заинтересовал Xaml код, то советую не обращать пока внимание на верхние 3 строки, а то отобьёте себе желание изучать WPF, посчитав это китайской грамотой.

Если анализировать код, то у нас есть корневой объект Window, в Xaml разметке одной формы он может быть только в единственном экземпляре, что логично: окно то у нас одно. Объект Window может содержать один объект, такой как контейнеры компоновки (Grid – один из видов таких контейнеров). Контейнеры компоновки в свою очередь содержат другие компоненты. Далее речь пойдёт про контейнеры компоновкиЯ надеюсь, все вы программировали под WinForms, и потому знаете что кинув компонент на форму, дизайнер чётко пропишет позиции компонента, заданные в свойствах Left, Top. А теперь забудьте об этом, в WPF нет чётко прописанных позиций компонентов. Вместо этого любой пользовательский элемент должен находиться в своём контейнере. Данная необходимость (я о использовании контейнеров компоновки) даёт возможность расположенным внутри этих контейнеров компонентам позиционироваться вместе с изменением размеров формы. Всего контейнеров компоновки 5: Grid, StackPanel, WrapPanel, Canvas, DockPanel. Каждый контейнер служит для своих целей, рассмотрим каждый из них по порядку.

Grid

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

Как уже сказано выше, Grid содержит ячейки, количество и высоту ячеек необходимо определить программисту, например, вот так будет выглядеть Xaml разметка Grid’a с тремя строками:

<Grid> <Grid.RowDefinitions> <RowDefinition Height="*" ></RowDefinition> <RowDefinition Height="auto" ></RowDefinition> <RowDefinition Height="100" ></RowDefinition> </Grid.RowDefinitions></Grid>

Как видим, у Grid’a для задания строк имеется свойство RowDefinitions в которое нужно помещать уже сами ячейки (RowDefinition), и здесь же задаётся высота ячейки. В Height можно указывать как числовое значение, так и «*» или «auto». * означает что строка займёт всё оставшееся свободное место. Auto значит что места будет выделено ровно столько, сколько необходимо компоненту, который в этой строке будет содержаться.
Мы определили строки, но в эти строки нужно поместить компоненты, у каждого компонента есть свойство Grid.Row, в которое нужно вписать номер строки в гриде, которую компонент должен занять (отсчёт начинается от "0").
Для примера, после закрывающегося тэга Grid.RowDefinitions, но внутри Grid’a допишем:

<TextBox Grid.Row="0" > textBox </TextBox> <Button Grid.Row="1" > Button </Button> <Label Background="Aqua" Grid.Row="2" ></Label>

Здесь мы у каждого компонента дописали в какой именно ячейке должен позиционироваться элемент.
На рис.2. можно увидеть результат.

Рисунок 2. Grid и его Rows.

Grid наравне со строками может содержать и столбцы, которые описываются внутри

В качестве примера:

<Grid><Grid.RowDefinitions> <RowDefinition Height="*" ></RowDefinition> <RowDefinition Height="auto" ></RowDefinition> <RowDefinition Height="100" ></RowDefinition> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition></ColumnDefinition> <ColumnDefinition></ColumnDefinition> </Grid.ColumnDefinitions> <TextBox Grid.Row="0" > textBox </TextBox> <Button Grid.Row="0" Grid.Column="1" > Button </Button> <Label Background="Aqua" Grid.Row="2" ></Label> <Ellipse Fill="Bisque" Grid.Row="1" Grid.Column="1" Height="50" ></Ellipse> </Grid>

На рис.3. виден результат.

Ads by Radio CanyonAd Options

Рисунок 3. Grid и его столбцы.

И да, если у компонента не указано в какую строку/столбец он должен поместиться, то автоматом эти свойства устанавливаются равными 0. Так же, если вы создали Grid, но при этом не указали RowDefinitions/ColumnsDefinitions, по умолчания подразумевается, что Grid создаётся с одной строкой и одним столбцом.