WPF. Часть 2. Layout.

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

Во-первых, надо сказать что все, что связано с интерфейсом, в WPF называют Layout. Это слово можно перевести как «компоновка», а понять – как модель организации пользовательского интерфейса (в самом широком смысле этого слова).

Понятие интерфейса тесно связано с контейнерами. Контейнер – это та область, в которую можно положить что-либо (даже еще несколько контейнеров). Например – в контейнеры можно класть кнопки, чекбоксы, текстовые блоки и т.д.

Первый контейнер, с которым мы сегодня познакомимся называется StackPanel. Эту панель можно описать так: StackPanel – это таблица либо из одного столбца и множества строк, либо из одной строки и множества столбцов. Это зависит от параметра Orientation. Если он принимает значение «Horizontal» - то панель будет одной строкой и множеством (сколько вы захотите) столбцов. Если параметр изменить на «Vertical» - то панель станет одним столбцом и множеством строк. Выбирайте то, что вам надо.

Пример с горизонтальным расположением элементов (потренируйтесь – измените этот параметр):

<Window x:Class="WpfApplication6.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" WindowStartupLocation="CenterScreen">

    <StackPanel Orientation="Horizontal">

        <Button Content="Кнопка 1"/>

        <TextBlock Text="Текстовый блок1 " />

        <CheckBox Content="Переключатель " />

        <Button Content="Кнопка 2"/>

        <TextBlock Text="Текстовый блок2 " />

    StackPanel>

Window>

WindowStartupLocation="CenterScreen" - при этом параметре окно будет появляться посередине экрана.

Одной особенностью StackPanel является то, что при масштабировании окна то, что мы вложили в StackPanel, не меняет своего положения.

Следующий контейнер, который я хочу рассмотреть – это WrapPanel. Это почти то же самое, что и StackPanel, но при масштабировании элементы сдвигаются так, чтобы занять свободное место в окне. Вставляйте в окно XAML следующий код и тестируйте:

 <Window x:Class="WpfApplication6.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" WindowStartupLocation="CenterScreen">

    <WrapPanel Orientation="Vertical">

        <Button Content="Кнопка 1"/>

        <Button Content="Кнопка 2"/>

        <Button Content="Кнопка 3"/>

        <Button Content="Кнопка 4"/>

        <Button Content="Кнопка 5"/>

        <Button Content="Кнопка 6"/>

        <CheckBox Content="ЧекБокс 1"/>

        <CheckBox Content="ЧекБокс 2"/>

        <TextBlock Text="Текст Текст"/>

        <RadioButton Content="Переключатель 1"/>

        <RadioButton Content="Переключатель 2"/>

    WrapPanel>

Window>

Еще один элемент, но уже другого смысла, называется DockPanel. Внутри этого контейнера можно описывать элементы, но они будут прилеплены к краям формы в зависимости от свойства DockPanel.Dock (которое может принимать значения Bottom, Left, Right, Top) можно приклеить элементы к соответствующим краям формы. Если мы поставим свойство LastChildFill в определении DockPanel в True – то последний определенный элемент (который мы не привяжем ни к какому краю) будет занимать всю свободную область формы. Вставьте код в редактор XAML и протестируйте:

<Window x:Class="WpfApplication6.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" WindowStartupLocation="CenterScreen">

    <DockPanel LastChildFill="True">

        <Button Content="Dock=Top" DockPanel.Dock="Top"/>

        <Button Content="Dock=Bottom" DockPanel.Dock="Bottom"/>

        <Button Content="Dock=Left" DockPanel.Dock="Left"/>

        <Button Content="Dock=Right" DockPanel.Dock="Right"/>

        <Button Content="LastChildFill=True"/>

    DockPanel>

Window>

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