017. Avalonia UI - Control Themes Styling
00:00 Исправление ошибок меню • Меню не работает, нужно исправить ошибку. • Уменьшить размер заголовков и разместить меню так, чтобы оно выглядело как другое меню. • Выяснить причину сбоя при переплете. 01:00 Настройка открытия меню • Сделать меню открытым по умолчанию. • Установить значение «список открыт» равным true для постоянного отображения меню в модели просмотра. 02:10 Работа с диспетчером • Добавить диспетчер для безопасного изменения пользовательского интерфейса. • Переместить сетку и базовый элемент управления в поток диспетчера. • Убедиться, что анимационная галочка остаётся в потоке пользовательского интерфейса. 04:11 Стилизация интерфейса • Стилизовать интерфейс для соответствия измерителю громкости Julian. • Изменить заголовок, сделав его тонким и красивым. • Изучить шаблон управления для расширителя. 08:20 Работа с темами управления • Использовать темы управления как ресурсы для стилизации. • Создать новый шаблон управления для маленького расширителя. • Применить тему управления к настоящему расширителю. 11:30 Настройка кнопки переключения • Сделать фон кнопки переключения прозрачным. • Скопировать шаблон исходной кнопки переключения и добавить его к своей кнопке. • Переместить стрелку на правую сторону кнопки. 12:59 Завершение настройки • Убрать отступы над стрелкой. • Сделать стрелку на всю высоту. • Добавить содержимое обратно в заголовок, убедившись, что он свернут как можно тоньше. 13:41 Удаление синей рамки и замена презентатора контента • Удаление синей рамки связано с классом Expander CS, который читает название и применяет шаблон. • Замена презентатора контента на элемент управления контентом, чтобы лишить Expander возможности управлять шаблоном. 14:27 Перемещение содержимого • Перемещение содержимого вверх по порядку для правильного отображения. 14:35 Создание стрелки с помощью потоковой геометрии • Объяснение синтаксиса пути и команд для создания стрелки: «м» открывает путь, «l» создаёт линейную команду, «v» — вертикальную линию, «c» — кривую. • Пример создания стрелки с перемещением на ноль, затем на одну и другую линию, и выполнением команды «Закрыть». 16:03 Настройка обводки и завершение фигуры • Изменение обводки фильтра для отображения контура стрелки. • Удаление команды «z» для незавершённой фигуры. 16:54 Перерисовка стрелки • Перерисовка стрелки с нуля, начиная с перемещения курсора на 12 градусов вправо. • Корректировка углов для устранения лишнего пространства. 18:55 Добавление линии границы • Вставка панели стека и добавление прямоугольника для заливки в нижней части расширителей. • Настройка высоты прямоугольника и отступов для соответствия оригиналу. 20:22 Стилизация кнопок и заголовков • Стилизация кнопок и заголовков, добавление эффектов наведения курсора. 20:55 Вращение стрелки • Использование рендеринг-трансформации для вращения стрелки при расширении и сжатии. • Привязка к свойству toggle buttons is checked и создание конвертера значений для преобразования логического значения в рендеринг-трансформацию. 22:09 Реализация конвертера значений • Создание класса checked to rotation converter для преобразования логического значения в угол в градусах. • Обработка недопустимых значений и возврат уведомления о привязке. 24:10 Завершение работы • Добавление ресурса преобразователя значений в пользовательский элемент управления. • Проверка работы стрелки, которая вращается в зависимости от состояния элемента управления. • Подведение итогов и завершение занятия.
00:00 Исправление ошибок меню • Меню не работает, нужно исправить ошибку. • Уменьшить размер заголовков и разместить меню так, чтобы оно выглядело как другое меню. • Выяснить причину сбоя при переплете. 01:00 Настройка открытия меню • Сделать меню открытым по умолчанию. • Установить значение «список открыт» равным true для постоянного отображения меню в модели просмотра. 02:10 Работа с диспетчером • Добавить диспетчер для безопасного изменения пользовательского интерфейса. • Переместить сетку и базовый элемент управления в поток диспетчера. • Убедиться, что анимационная галочка остаётся в потоке пользовательского интерфейса. 04:11 Стилизация интерфейса • Стилизовать интерфейс для соответствия измерителю громкости Julian. • Изменить заголовок, сделав его тонким и красивым. • Изучить шаблон управления для расширителя. 08:20 Работа с темами управления • Использовать темы управления как ресурсы для стилизации. • Создать новый шаблон управления для маленького расширителя. • Применить тему управления к настоящему расширителю. 11:30 Настройка кнопки переключения • Сделать фон кнопки переключения прозрачным. • Скопировать шаблон исходной кнопки переключения и добавить его к своей кнопке. • Переместить стрелку на правую сторону кнопки. 12:59 Завершение настройки • Убрать отступы над стрелкой. • Сделать стрелку на всю высоту. • Добавить содержимое обратно в заголовок, убедившись, что он свернут как можно тоньше. 13:41 Удаление синей рамки и замена презентатора контента • Удаление синей рамки связано с классом Expander CS, который читает название и применяет шаблон. • Замена презентатора контента на элемент управления контентом, чтобы лишить Expander возможности управлять шаблоном. 14:27 Перемещение содержимого • Перемещение содержимого вверх по порядку для правильного отображения. 14:35 Создание стрелки с помощью потоковой геометрии • Объяснение синтаксиса пути и команд для создания стрелки: «м» открывает путь, «l» создаёт линейную команду, «v» — вертикальную линию, «c» — кривую. • Пример создания стрелки с перемещением на ноль, затем на одну и другую линию, и выполнением команды «Закрыть». 16:03 Настройка обводки и завершение фигуры • Изменение обводки фильтра для отображения контура стрелки. • Удаление команды «z» для незавершённой фигуры. 16:54 Перерисовка стрелки • Перерисовка стрелки с нуля, начиная с перемещения курсора на 12 градусов вправо. • Корректировка углов для устранения лишнего пространства. 18:55 Добавление линии границы • Вставка панели стека и добавление прямоугольника для заливки в нижней части расширителей. • Настройка высоты прямоугольника и отступов для соответствия оригиналу. 20:22 Стилизация кнопок и заголовков • Стилизация кнопок и заголовков, добавление эффектов наведения курсора. 20:55 Вращение стрелки • Использование рендеринг-трансформации для вращения стрелки при расширении и сжатии. • Привязка к свойству toggle buttons is checked и создание конвертера значений для преобразования логического значения в рендеринг-трансформацию. 22:09 Реализация конвертера значений • Создание класса checked to rotation converter для преобразования логического значения в угол в градусах. • Обработка недопустимых значений и возврат уведомления о привязке. 24:10 Завершение работы • Добавление ресурса преобразователя значений в пользовательский элемент управления. • Проверка работы стрелки, которая вращается в зависимости от состояния элемента управления. • Подведение итогов и завершение занятия.