005. Avalonia UI - Templated Controls

Описание

00:00 Введение в информационную панель
• Создание информационной панели с включённой громкостью.
• Проблема повторяющегося пользовательского интерфейса: большой текст, маленькое описание.
• Необходимость использования шаблонных элементов управления.

00:38 Шаблонные элементы управления в Avalonia
• Пользовательские элементы управления ограничены одним видом и сложно поддаются изменению.
• Шаблонные элементы управления Luculus позволяют создавать несколько пользовательских интерфейсов для одного элемента управления.
• Пример использования: кнопка с большим и маленьким текстом.

01:31 Начало работы с шаблонными элементами
• Отсутствие документации по использованию шаблонных элементов.
• Начало работы с таблицей деталей и панелью стека.
• Добавление пользовательского элемента управления в проект.

02:32 Создание шаблонного элемента управления
• Создание класса, реализующего шаблон для управления.
• Наследование стилей и возможность обновления конструктора.
• Управление визуальным оформлением через стиль.

03:53 Проектирование пользовательского интерфейса
• Создание панели стека с двумя надписями.
• Настройка фона и цвета текста.
• Использование динамических ресурсов для цветов.

05:03 Настройка цветов и стилей
• Определение цветов: средне-синий, светло-голубой, тёмно-синий, лососевый.
• Привязка цветов к динамическим ресурсам.
• Установка цвета переднего плана по умолчанию.

07:07 Включение стиля в приложение
• Важность включения стиля в приложение для отображения элементов управления.
• Использование style include для включения файла стиля.
• Настройка размера шрифта и выравнивания.

08:36 Использование шаблонных элементов в приложении
• Добавление пространства имён для элементов управления.
• Вставка элементов управления в визуальное представление.
• Добавление набивки и изменение цветов.

10:38 Адаптация стилей для кнопок
• Перемещение стиля панели стека в верхнее окно.
• Добавление класса small для маленьких кнопок.
• Изменение цвета кнопок и добавление стиля наведения курсора.

11:55 Завершение настройки цветов
• Создание ярко-синей кисти для наведения курсора.
• Повторение процесса настройки цветов для других состояний кнопок.

12:34 Проверка работы программы
• Компиляция и запуск программы.
• Проверка визуального представления: кнопки, зависания, фон.
• Исправление ошибки с серым цветом.

13:31 Динамическое изменение текста
• Использование прикреплённых свойств для динамического изменения текста.
• Регистрация стилизованных свойств в контроллере.
• Сравнение свойств стиля и прямых свойств.

14:38 Работа с прикреплёнными свойствами
• Примеры прикреплённых свойств: ширина, поле, сетка.
• Определение стилизованных свойств и их прикрепление к дочерним элементам.

15:36 Создание стилизованных свойств
• Добавление стилизованных свойств в класс.
• Автоматическое создание свойств с получателем и установщиком.
• Настройка значения по умолчанию для свойств.

18:16 Привязка шаблона
• Привязка шаблона к свойствам «большой текст» и «небольшой текст».
• Обновление текста в пользовательском интерфейсе.

20:12 Управление стилями элементов
• Привязка фона к свойству фона шаблона.
• Повторное использование стиля кнопок.
• Преимущества использования шаблонных элементов управления.

23:01 Настройка стиля кнопок
• Настройка шаблона кнопок: фон на этикетке, отступы, радиус закругления.
• Удаление рамки и добавление отступов.
• Корректировка углового радиуса и отступов для улучшения внешнего вида.

24:32 Изменение стиля пользовательского интерфейса
• Простота изменения стиля элементов управления через классы.
• Добавление класса к кнопке изменяет стиль всего элемента управления.
• Настройка поля элемента управления на 5%.

25:22 Визуальное сравнение элементов
• Сравнение изображения с измерителем громкости Юлиана.
• Использование одного шаблонного элемента управления для создания похожих элементов.

26:09 Преимущества шаблонных элементов управления
• Шаблонные элементы управления помогают экономить время при создании повторяющегося интерфейса.
• Пример создания комбинированного элемента с надписью, текстовым полем и кнопкой.

27:07 Эффективность шаблонных элементов
• Простота копирования элемента управления label и изменения его внешнего вида через класс.
• Преимущества инструментов Avalonia для настройки пользовательского интерфейса.

27:59 Аналогия с WPF
• Ресурсы в Avalonia аналогичны WPF: они находятся в ресурсах приложения.
• Привязка свойств шаблонов и стилизованных свойств.

28:57 Принцип работы стилизованных свойств
• Наблюдение за изменениями стилизованных свойств через Observable.
• Обновление пользовательского интерфейса при изменении свойств.

30:15 Преимущества MVVM
• Преимущества привязки модели представления MVVM: автоматическое обновление интерфейса.
• Возможность использования селекторов шаблонов для изменения внешнего вида элементов при наведении курсора.
• Просмотр всех стилей управления в одном окне.