суббота, 10 августа 2013 г.

WPF DockPanel

Сегодня решил поднять старую тему, о которой рассказывал очень давно — про WPF. Последний раз я об этой теме писал еще в далеком 2010 году, 22 декабря (WPF — описание). После этого временно забыл про WPF, теперь вот снова вспоминаю.

Первый вопрос, который лично я задал себе во время реализации интерфейса — как выровнять блоки интерфейса так, как мне надо? В первом приближении — как пристыковать большие блоки к верху, низу, правой, левой стороне?

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

В WPF есть несколько больших контейнеров для расположения в них других контролов. Самым подходящим для моих идей является DockPanel — Панель закрепления. С ее помощью можно сделать то, что мне нужно — закрепить контролы по краям формы.

Для иллюстрации — вставьте в проект WPF (в XAML) следующий код:

<DockPanel >
<TextBox Text="Top" DockPanel.Dock="Top" Background="LightSkyBlue" Height="50"/>
<TextBox Text="Left" DockPanel.Dock="Left" Background="Lavender" Width="50" />
<TextBox Text="Right" DockPanel.Dock="Right" Background="LightGoldenrodYellow" Width="50" />
<TextBox Text="Bottom" DockPanel.Dock="Bottom" Background="LavenderBlush" Height="50" />
<TextBox Text="Other" Background="AliceBlue" />
</DockPanel>

И запустите. У вас появится вот такое окно:


С помощью свойства DockPanel (которое принимает четыре значения — Left, Right, Top, Bottom) можно указывать привязку. По умолчанию привязывается к левой стороне окна. Если привязку не указать — то контрол растягивается на всю свободную область окна, как раз то, что нужно.

Так что такой контрол (без привязки) должен идти последним. Иначе он привяжется к левой области экрана (или контрола, который уже привязан к левой границе окна). Например, если запустить следующий код, то получится не тот результат, который мы хотим:

<DockPanel>
<TextBox Text="Top" DockPanel.Dock="Top" Background="LightSkyBlue" Height="50"/>
<TextBox Text="Left" DockPanel.Dock="Left" Background="Lavender" Width="50" />
<TextBox Text="Other" Background="AliceBlue" />
<TextBox Text="Right" DockPanel.Dock="Right" Background="LightGoldenrodYellow" Width="50" />
<TextBox Text="Bottom" DockPanel.Dock="Bottom" Background="LavenderBlush" Height="50" />
</DockPanel>

Получится вот что:


Поэтому будьте внимательны с DockPanel. Вещь полезная. Напоминаю, что в DockPanel можно засунуть еще один DockPanel. На практике не проверял, обязательно проверю. И еще. Имена для контролов я не задаю, так как использую MVVM, а там имена не нужны.

Комментариев нет:

Отправить комментарий