Разработка пользовательских элементов управления в wpf

Разработка

пользовательских элементов

управления в WPF

Павел Музыка

Ведущий разработчик C#

20 июня 2013 года

О себе

Окончил Калужский Филиал

МГТУ им. Н. Э. Баумана

В промышленной разработке с 2005 года

В компании CUSTIS c февраля 2012 года

Сертифицированный разработчик

MS SQL, WinForms и WPF

2/81

О вас

Откуда?

Почему пришли на этот семинар?

Что знаете про WPF?

Какой опыт разработки на WPF?

3/81

План

Кастомизация контролов в WPF

Визуальная структура контролов

Варианты кастомизации

Создание собственного контрола

Мастер-класс по созданию Custom Control

4/81

Где я?

Кастомизация контролов в WPF

Визуальная структура контролов

Варианты кастомизации

Создание собственного контрола

Мастер-класс по созданию Custom Control

5/81

Визуальное vs Логическое дерево

Логический родитель для Button – это Grid

Визуальный родитель для Button – это Grid

6/81

Визуальное vs Логическое дерево

Логический родитель для TextBlock – это Button

Визуальный родитель для TextBlock – это НЕ Button

7/81

Визуальное дерево != Логическое дерево

8/81

Логическое дерево

Описывает отношения между элементами

на пользовательском интерфейсе

Используется для:

наследования значений DependencyProperty

разрешения ссылок DynamicResources

поиска названий элементов для биндинга

маршрутизации событий

FrameworkElement.Parent – возвращает

логического родителя

9/81

Визуальное дерево

Состоит из объектов, потомков Visual

и Visual3D

Используется для:

рендеринга

наследования прозрачности

наследования визуальных преобразований

наследования свойства IsEnabled

RelativeSource (FindAncestor)

VisualTreeHelper.GetParent (reference) –

возвращает визуального родителя

10/81

Шаблоны (Template)

У Button есть собственный шаблон

со своей структурой, определяющий,

как рисовать кнопку

Шаблон задает структуру визуального

дерева внутри элемента

Шаблон НЕ задает структуру логического

дерева

11/81

Визуальное дерево

12/81

Логическое

дерево

Визуальное

дерево

13/81

Наследование свойств

14/81

Где я?

Кастомизация контролов в WPF

Визуальная и логическая структуры

Варианты кастомизации

Создание собственного контрола

Мастер-класс по созданию Custom Control

15/81

Варианты кастомизации

Богатое содержимое (Rich content)

Стили (Styles)

Шаблоны данных (DataTemplate)

Шаблоны контролов (ControlTemplate)

Триггеры (Triggers)

Присоединенные свойства (Attached properties)

16/81

Задача

Кнопка подтверждения должна

содержать внутри себя флаг

проверки перед выполнением

действия.

?

17/81

Богатое содержимое

Применимо для потомков Content Control

Content – любой объект

Не меняет исходное поведение контрола

Используется по месту в случае

необходимости точечно изменить

представление

18/81

Богатое содержимое

19/81

Свойство по умолчанию

20/81

Свойство по умолчанию

21/81

Варианты кастомизации

Богатое содержимое (Rich content)

Стили (Styles)

Шаблоны данных (DataTemplate)

Шаблоны контролов (ControlTemplate)

Триггеры (Triggers)

Присоединенные свойства (Attached properties)

22/81

Задача

На всех кнопках шрифт должен

быть «SketchFlow Print»

Размер шрифта «30»

Цвет текста «Красный»

Цвет границы «Красный»

?

23/81

Стили (Styles)

Стиль – это набор значений свойств,

который можно применить к одному

или нескольким элементам управления

Позволяет в одном месте задавать

свойства для однотипных элементов

Не меняет визуальную структуру элемента

управления

Не меняет поведение элемента

управления

24/81

Стили (Styles)

25/81

Варианты кастомизации

Богатое содержимое (Rich content)

Стили (Styles)

Шаблоны данных (DataTemplate)

Шаблоны контролов (ControlTemplate)

Триггеры (Triggers)

Присоединенные свойства (Attached properties)

26/81

Задача

Сделать список для выбора

нескольких состояний

для настройки фильтра заказов.

27/81

?

Шаблоны данных (DataTemplate)

Задает визуальную структуру

для представления объекта данных

Чаще всего используется для стилизации

списков

Может применяться совместно

с DataTemplateSelector, что позволяет

менять представление в зависимости

от типа и/или значений данных

28/81

Шаблоны данных (DataTemplate)

29/81

Новые требования

Рядом со статусом «Отправлен»

должно быть поле для ввода

даты отправки.

Рядом со статусом «В пути»

должен быть комбобокс

для выбора получателя.

30/81

?

Новые требования!

31/81

DataTemplateSelector

Класс-потомок от DataTemplateSelector

Позволяет в зависимости от данных

использовать различные шаблоны

Существуют также StyleSelector’ы

Примеры кода объемные, можно

посмотреть после семинара

32/81

33/81

Варианты кастомизации

Богатое содержимое (Rich content)

Стили (Styles)

Шаблоны данных (DataTemplate)

Шаблоны контролов (ControlTemplate)

Триггеры (Triggers)

Присоединенные свойства (Attached properties)

34/81

Задача

Сделать овальные кнопки с текстом.

35/81

?

Шаблоны контролов

Позволяют менять визуальную структуру

элемента управления, не создавая своего

контрола

Используются, когда надо изменить

внешний вид и внешнее поведение

контрола, но не надо менять его

внутреннюю логику работы

36/81

Шаблоны контролов

37/81

Варианты кастомизации

Богатое содержимое (Rich content)

Стили (Styles)

Шаблоны данных (DataTemplate)

Шаблоны контролов (ControlTemplate)

Триггеры (Triggers)

Присоединенные свойства (Attached properties)

38/81

Задача

Сделать овальные кнопки с текстом

«активными», так чтобы при

наведении мыши менялся фон.

?

39/81

?

Триггеры (Triggers)

Позволяют устанавливать свойства

элементов управления в зависимости

от событий или состояний

Позволяют использовать анимацию

40/81

Триггеры (Triggers)

41/81

Варианты кастомизации

Богатое содержимое (Rich content)

Стили (Styles)

Шаблоны данных (DataTemplate)

Шаблоны контролов (ControlTemplate)

Триггеры (Triggers)

Присоединенные свойства (Attached properties)

42/81

Присоединенные свойства

Это DependencyProperty, которые

объявлены как Attached и не имеют CLR

свойства-обертки

Концепция, созданная для XAML

Могут быть присвоены любому объекту

Вместо CLR свойства-обертки имеются

два метода Get<Свойство>(object)

и Set<Свойство>(object, value)

43/81

Вариант применения – 1

Тип, в котором объявлено свойство,

спроектирован как родитель (контейнер)

для элементов, в которых это свойство

установлено

44/81

Вариант применения – 2

Тип, в котором объявлено свойство,

спроектирован как дочерний для различных

родителей (контейнеров) или моделей

содержимого

45/81

Вариант применения – 3

Тип, в котором объявлено свойство,

является сервисом. Объекты,

устанавливающие это свойство, будут

рассматриваться в контексте сервиса

46/81

Варианты кастомизации

Богатое содержимое (Rich content)

Стили (Styles)

Шаблоны данных (DataTemplate)

Шаблоны контролов (ControlTemplate)

Триггеры (Triggers)

Присоединенные свойства (Attached properties)

47/81

Где я?

Кастомизация контролов в WPF

Визуальная и логическая структуры

Варианты кастомизации

Создание собственного контрола

Мастер-класс по созданию Custom Control

49/81

Создание собственного контрола

Должно быть обосновано именно

создание нового класса

Должен быть обоснован выбор

базового класса

Должен полноценно работать

в визуальном редакторе Visual Studio

50/81

Создание собственного контрола

Должно быть обосновано именно

создание нового класса

Должен быть обоснован выбор

базового класса

Должен полноценно работать

в визуальном редакторе Visual Studio

51/81

Обоснование нового класса

Объединить поведение нескольких

элементов в одном и повторно

использовать на разных формах

Расширить или изменить поведение

существующего контрола

Если это невозможно или слишком дорого

сделать на триггерах

Расширить или изменить как визуальную

структуру, так и поведение контрола

Если для этого не подходит ControlTemplate

52/81

Создание собственного контрола

Должно быть обосновано именно

создание нового класса

Должен быть обоснован выбор

базового класса

Должен полноценно работать

в визуальном редакторе Visual Studio

53/81

Выбор базового класса

при создании собственного

контрола

54/81

55/81

Вариант 1

56/81

UserControl

57/81

UserControl. Плюшки

Поддержка редактирования в визуальном

редакторе

Легкая компоновка существующих

контролов

Легко прикручивается дополнительная

логика за счет наличия code-behind

файлов

58/81

UserControl. Недостатки

Ограничены возможности кастомизации:

нельзя менять визуальную структуру

при использовании

Непригодность для «библиотечного»

использования

59/81

Вариант 2

60/81

Custom Control

61/81

Custom Control

62/81

Custom Control. Плюшки

Явное отделение представления от логики

Возможность изменения визуального

дерева при использовании

(применение собственных ControlTemplate)

Возможность подключать темы

для изменения цветового и стилевого

оформления

Пригодность для «библиотечного»

использования

63/81

Custom Control. Недостатки

Невозможно редактировать в визуальном

редакторе (хотя можно использовать

Expression Blend для этого)

Сложнее и дороже, чем UserControl

Требует более глубокого понимания

механизмов работы всей технологии WPF

Сложная отладка работы в визуальном

редакторе

64/81

Создание собственного контрола

Должно быть обосновано именно

создание нового класса

Должен быть обоснован выбор

базового класса

Должен полноценно работать

в визуальном редакторе Visual Studio

65/81

Поддержка работы

в визуальном редакторе

Visual Studio

66/81

Особенности работы

в визуальном редакторе Visual Studio

Значения свойств, отвечающих

за визуальную составляющую, должны

вызывать перерисовку контрола

моментально, а не только в момент вызова

конструктора

Создавайте DependencyProperty в своих

контролах и отслеживайте их изменения

Изменения любых свойств не должны

«ронять» весь визуальный редактор

67/81

Выявление ошибок работы

в визуальном редакторе

Сложная отладка:

Надо внедряться в служебный процесс

визуального редактора (XDesProc.exe)

Надо перехватывать все исключения,

в том числе исключения биндинга

Понимание всего процесса применения

шаблонов и стилей, последовательность

возникновения событий

68/81

Удобство пользователя

Пользователем Custom Control является

не бухгалтер, а другой разработчик!

Сделайте Custom Control так, как если бы

вам пришлось его использовать

Проверьте сами на другом проекте

Проверьте еще раз на еще одном проекте!

Придумайте реальный сценарий, который

«уронит» ваш контрол

Явно и доступно описывайте ограничения

применимости вашего контрола 69/81

70/81

Отдохнем?

Где я?

Кастомизация контролов в WPF

Варианты кастомизации

Создание собственного контрола

Мастер-класс по созданию Custom Control

71/81

Задача

72/81

Все текстовые поля должны

иметь кнопку для сброса

значения.

При нажатии на кнопку текст

должен сбрасываться.

?

Демонстрация в Visual Studio

73/81

Новые требования!

74/81

Кнопка сброса значения

должна быть видна не постоянно,

а только если указатель мыши

находится над контролом.

?

Демонстрация в Visual Studio

75/81

Новые требования!

76/81

• Необходимо иметь возможность

подписаться на событие сброса

текста. В параметрах события надо

иметь информацию о старом

значении.

?

Демонстрация в Visual Studio

77/81

Основные шаги

Создать проект WPF Custom Control Library

Добавить новый Custom Control (WPF)

Унаследовать контрол от TextBox

и скопировать исходное визуальное дерево

Изменить визуальное дерево, не ломая

логики родительского контрола

Добавить свою логику инициализации после

применения шаблона (переопределить

метод OnApplyTemplate)

78/81

Темы для дальнейшего изучения

Расширения разметки

Привязки данных (Data binding)

DependencyObject и DependencyProperty

Маршрутизируемые события

(RoutedEvents)

Поведения (behaviors)

79/81

Что почитать еще?

http://msdn.microsoft.com/

https://www.google.com/

http://wpfinspector.codeplex.com/

Учебник/курсы английского языка

80/81

Спасибо!

Вопросы?

81/81

Павел Музыка

pmuzyka@custis.ru