WPF Основные элементы управления, верстка

1.

WPF Основные элементы
управления, верстка

2.

WPF
• WPF (Windows Presentation
Foundation) — один из компонентов
ядра .NET Framework, который
позволяет разработчикам создавать
богатые, различные Windows
приложения.

3.

Windows Forms: в чем разница?
• Адаптивная верстка.
• Привязка данных (Data Binding).
• Возможность использовать элементы Windows
Forms.
• Стили.
• Настройка анимаций.
• WPF требует большего времени на компоновку
интерфейса, но подобные недостатки по
времени выравниваются описанными выше
преимуществами.

4.

Начало работы
• File -> New -> Project -> WPF App
(.NET Framework)
• Указать название проекта в Project
Name, проверить расположение
папки с проектом.
• Привыкаем к горячим клавишам
(Ctrl+Shift+N)!

5.

Собственно, вот.
• Панель инструментов.
• Визуальное
представление
интерфейса.
• Разметка интерфейса в
XAML.
• Обозреватель решения.
• Панель свойств.

6.

XAML
• XAML (eXtensible Application Markup Language) язык разметки, используемый для
инициализации объектов в технологиях на
платформе .NET.
• Не обязательно использовать.
• Возможность отделить графический
интерфейс от логики приложения.
• Компактность, понятность, код на XAML
относительно легко поддерживать.
• <TextBlock>Теги, теги, теги!</TextBlock>
• Скорость верстки пропорциональна скорости
печати, так что тренируем слепую печать)

7.

Элементы компоновки (контейнеры)
• Grid, UniformGrid,
StackPanel, WrapPanel,
DockPanel и Canvas.
• Различные
контейнеры могут
содержать внутри
себя другие
контейнеры.

8.

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

9.

Grid: размещение элементов
• Чтобы задать позицию элемента
управления с привязкой к определенной
ячейке Grid, в разметке элемента нужно
прописать значения
свойств Grid.Column и Grid.Row, тем
самым указывая, в каком столбце и строке
будет находиться элемент.
• Если мы хотим растянуть элемент
управления на несколько строк или
столбцов, то можно указать
свойства Grid.ColumnSpan и Grid.RowSpan.
• По умолчанию элемент находится в первой
строке первого столбца, то есть Grid.Row =
“0” и Grid.Column = “0”, указывать не
обязательно.

10.

Grid: размеры
• Автоматические размеры – подгоняют размер
столбца/строки под его содержимое.

11.

Grid: размеры
• Абсолютные размеры – занимают ровно
столько места, сколько указано. Излишки
«обрезаются».

12.

Grid: размеры
• Пропорциональные размеры (с символом *) – размер меняется в зависимости
от оставшегося место в соответствии с пропорциональным коэффициентом.

13.

Grid: размеры
• Можно комбинировать все типы
размеров. В этом случае от
ширины/высоты грида
отнимается ширина/высота
столбцов/строк с абсолютными
или автоматическими
размерами, и затем оставшееся
место распределяется между
столбцами/строками с
пропорциональными
размерами.

14.

StackPanel
• Располагает все элементы в ряд либо
по горизонтали, либо по вертикали в
зависимости от ориентации.
• По умолчанию значение
Orientation = “Vertical”.
• Может содержать в себе и другие
элементы/контейнеры.
• Не гибок в адаптивной верстке.

15.

Атрибуты выравнивания
• Элементы внутри контейнеров
могут быть выровнены по разным
краям, центру, либо растягиваться
по всей ширине.
• За вертикальное и горизонтальное
выравнивание отвечают свойства
VerticalAlignment и
HorizontalAlignment,
соответственно.
• Контейнеры тоже можно выравнивать.

16.

StackPanel vs Grid: что использовать?
• Грамотная верстка требует комбинированного
подхода.
• В первую очередь, стоит определиться, как
элементы должны меняться при изменении размеров
окна.
• Если «растягивание» только вредит общей
компоновке – выбираем StackPanel.
• Если в окне есть контентная часть, которая важна
пользователю и должна отображать больше данных
при изменении размеров окна – Grid.
• Но бывают и исключения...

17.

А может парочку примеров?
• Нет смысла
растягивать поля для
ввода. Чтобы
пользователь их не
искал по всем углам,
контейнер
выравнивается по
центру – StackPanel.

18.

А может парочку примеров?
• Чем больше окно, тем больше данных
можно показать пользователю – Grid.

19.

А может парочку примеров?
• С фото та же история –
используем Grid.

20.

Основные элементы управления
• Интерфейс состоит из элементов
управления, которые непосредственно
взаимодействуют с пользователем
или отображают какую-либо
информацию.
• TextBlock – элемент для вывода
текстовой информации.
• TextBox – элемент для ввода
текстовой информации.
• Button – кнопка (она и в WPF кнопка)
• ... дальше – больше! (по мере
необходимости)