Реализация пользовательских элементов управления (UserControl)
Программные решения для бизнеса
“
В этом уроке поговорим о пользовательских элементах управления или UserControl, разберем этапы работы над ним и создадим собственный элемент с оригинальным дизайном и поведением.
Глоссарий
Для успешного освоения материала рекомендуем вам изучить следующие понятия:
Control. Элемент, который предназначен для взаимодействия с пользователем или для отображения ему какой-либо информации
Windows Presentation Foundation. Аналог WinForms, система для построения клиентских приложений Windows с визуально привлекательными возможностями взаимодействия с пользователем, графическая (презентационная) подсистема в составе .NET Framework (начиная с версии 3.0), использующая язык XAML
Видеолекция
Конспект
Демонстрация создания элемента User Control в WPF
На данном занятии будет разработан пользовательский элемент управления (User Control). User Control предоставляет простой способ создания собственных элементов управления и является объединением нескольких уже существующих элементов управления в один элемент, допускающий простое повторное использование. В данном примере разрабатывается элемент ромб, внутри которого будет находиться изображение (требуется несколько таких элементов). По умолчанию демонстрируется черно-белое изображение, при наведении курсора на изображение демонстрируется его цветная версия. Под изображением располагается заголовок и описание, разделенные линией. При нажатии на изображение демонстрируется текст. Основные шаги реализации элемента User Control:
- Создание
- Реализация
- Использование
Создание элемента User Control
1. Добавляем элемент User Control
2. Создаем требуемые свойства элемента
-
ВажноК свойствам элемента относятся: заголовок, описание, цветная версия изображения, а также черно-белая версия, которая будет конвертироваться из цветного изображения
3. Устанавливаем DataContext
- ВажноУстановка DataContext (контекста данных) позволяет делать привязку элементов разметки к свойствам
Реализация элемента User Control
1. Добавляем элемент Grid
- ВажноGrid (сетка) разделяется на четыре строки заданной высоты. Обратите внимание на рабочую область, где демонстрируется вид приложения
2. Настраиваем представление основного элемента-ромба
- ВажноВ первой строке Grid будет располагаться ромб. Элемент ViewBox позволит растягивать ромб с изображением по размеру контейнера. Также внутри ViewBox будет находиться кнопка с переопределенным template (шаблоном)
3. Добавляем содержимое кнопки внутри ромба
- ВажноКнопка представляет собой элемент Path, для которого задаются координаты вершин, толщина и цвет границ
4. Настраиваем отображение заголовка
- ВажноЗаголовок размещается внутри элемента TextBlock, текст которого привязывается к свойству Header, а ширина — к текущим размерам ViewBox. Зеленая линия цвета DarkGreen добавляется для того, чтобы разделить заголовок и описание
5. Настраиваем отображение описания
- ВажноTextBlock для описания добавляется по аналогии с заголовком с тем лишь отличием, что цвет шрифта будет серым
6. Настраиваем поведение изображения
- ВажноПоведение изображения будет зависеть от значения свойства IsMouseOver. Если свойство принимает значение true, демонстрируется цветное изображение ColoredSource и черно-белое BlackWhiteSource в противном случае
7. Добавляем кнопку для вывода информации об изображении
8. Реализуем обработку клика
- ВажноОбработкой будет служить вывод информации об элементе в MessageBox
Использование User Control
1. Используем созданный элемент в интерфейсе
- ВажноНесколько созданных элементов располагаются на MainWindow в StackPanel с горизонтальной ориентацией. Следует обратить внимание, что для использования пользовательского элемента управления используется префикс local
2. Добавим изображения в проект
- ВажноИзображения для каждого элемента подгружаются из папки Assets, куда они предварительно добавляются (см. на область внутри черной рамки)
3. Добавим каждому элементу соответствующее изображение
- ВажноИзображения можно добавлять как вручную, так и путем выбора в окне свойств. В данном случае требуемое изображение выбирается из нескольких, хранящихся в папке Assets (см. на область внутри черной рамки)
4. Проверяем результат
A) Курсор не на изображениях
B) Курсор на изображении
C) Обработка нажатия
A) Курсор не на изображениях
B) Курсор на изображении
C) Обработка нажатия
“
Вы познакомились с созданием собственного элемента управления в WPF. Теперь давайте перейдем от теории к практике!
Интерактивное задание
Тест
Для закрепления полученных знаний пройдите тест
Выберите неверное утверждение относительно создания User Control в WPF:
Требуется показывать черно-белую версию изображения при наведении курсора и цветную версию в обратном случае. Какой из элементов разработанного User Control следует изменить?
Требуется заменить ромб на квадрат в представлении созданного User Control. Какой из элементов User Control следует изменить?
К сожалению, вы ответили неправильно
Прочитайте лекцию и посмотрите видео еще раз
Неплохо!
Но можно лучше. Прочитайте лекцию и посмотрите видео еще раз
Отлично!
Вы отлично справились. Теперь можете ознакомиться с другими компетенциями