четверг, 20 мая 2010 г.

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, но уже статейка получилась довольно большая, так что расскажу об этом контейнере завтра. А пока – тренируйтесь, изменяйте код, в общем – практикуйтесь.

2 комментария:

  1. В программинге не силен, но нравится с каким запалом ты блог наполняешь) Удачи, у тебя все получится!

    ОтветитьУдалить
  2. Спасибо =)
    Сессия - информации много накопал, вот и выкладываю.

    ОтветитьУдалить