09. Avalonia UI Real World (Styling CheckBox)
00:00 Исправление кнопок меню • Добавили класс `subtle` для кнопок меню, чтобы придать им сдержанный стиль. • Страница настроек стала выглядеть лучше. 00:47 Работа с галочками • Убрали обычную кнопку, чтобы сосредоточиться на галочках. • Добавили несколько галочек для предварительного просмотра. 01:45 Создание сетки и панелей • Создали сетку с двумя столбцами и панель стека. • Добавили флажок и удалили стандартный стиль флажка. 02:30 Анализ структуры флажка • Изучили структуру флажка на GitHub, используя шаблон Avalonia Fluent. • Выделили рамку, прямоугольник и элемент content presenter. 04:24 Проблемы со стилизацией • Попытались изменить стиль рамки, но столкнулись с ошибками. • Обнаружили, что свойства не переопределяются должным образом. 06:22 Переопределение шаблона • Создали шаблонный элемент управления `checkbox` и удалили его. • Переопределили тему элемента управления, чтобы управлять стилем флажков. 08:15 Визуализация стилей флажков • Визуально отобразили стили для разных состояний флажков: не отмечен, отмечен, промежуточное состояние, отключён. • Добавили отключённое состояние для каждой кнопки. 10:13 Упрощение стиля флажков • Удалили рамку вокруг флажка, чтобы упростить элемент. • Привязали текст к фоновому цвету, чтобы текст был одинаковым для отмеченных и неотмеченных элементов. 11:00 Завершение работы со стилями • Привели в порядок текст, удалив ненужные стили. • Обеспечили, чтобы текст был одинаковым независимо от состояния флажка. 12:00 Настройка стилей управления • Удаление стилей переднего плана и промежуточного уровня. • Оставление стилей для content presenter без изменений. • Исключение стилей для отключённого состояния презентатора контента. 13:12 Работа с контуром галочки • Изменение кисти для границы галочки для добавления цвета. • Настройка толщины контура и градиента фона. • Коррекция сетки для идеального совпадения с пикселями. 15:05 Настройка радиуса скругления и привязки шаблона • Установка радиуса скругления углов на 7 пикселей. • Замена динамических ресурсов на привязку к шаблону. • Решение проблемы с ошибкой при привязке шаблона. 17:20 Добавление значка и центрирование • Добавление значка из библиотеки иконок Phosphor. • Центрирование значка по вертикали и горизонтали. • Настройка выравнивания текста над иконкой. 18:57 Стилизация иконки и настройка прозрачности • Стилизация иконки галочки для заполнения блока. • Настройка прозрачности иконки по умолчанию. • Создание эффекта вырезания элемента управления. 20:54 Стилизация состояний элемента управления • Создание состояния без галочки и состояния при наведении. • Настройка цвета обводки и переднего плана при наведении. • Планирование работы над состоянием «отмечено» в будущем. 21:54 Создание состояния «отмечено» • Добавление градиентного фона для состояния «отмечено». • Подбор цвета рамки под цвет фона. • Завершение настройки значка и других элементов для состояния «отмечено». 22:51 Настройка флажка и наведения • Изменение прозрачности флажка для создания метки. • Добавление наведения, но цвет слишком голубой, требуется синий. • Проверка работы стилей по умолчанию. 23:45 Проблемы с наведением • Обнаружение бага: невозможность навести курсор на область между кнопкой и центром. • Решение проблемы путём добавления фона. 25:36 Промежуточное состояние • Определение промежуточного состояния между «выбрано» и «не выбрано». • Замена галочки на метку для выделения текста. • Настройка цвета и контура для промежуточного состояния. 26:33 Стилизация неопределённого состояния • Использование значка «бриллиант» для неопределённого состояния. • Настройка непрозрачности и цвета контура. • Упрощение стилей при наведении. 29:17 Отступы и область клика • Задание отступов для области клика. • Проверка работы эффектов при наведении. 30:52 Стилизация состояний при нажатии • Стилизация состояний при удержании флажка. • Изменение фона и непрозрачности границы. • Настройка глифа и контура в активном состоянии. 33:41 Завершение стилизации • Проверка переходов между состояниями. • Коррекция цветов при щелчке. • Уточнение стилей для перехода между состояниями. 35:35 Настройка состояний переключателя • Определение двух состояний: неопределённого и отмеченного. • Использование глифа для задания неопределённого состояния. • Добавление двоеточия для обозначения отмеченного состояния. 36:05 Проблемы с переходами между состояниями • Трудности с переходом из отмеченного в неопределённое состояние. • Решение игнорировать промежуточное состояние и добавить новый стиль. 37:02 Настройка порядка состояний 38:22 Проблемы с отображением неопределённого состояния 41:15 Стилизация трёх состояний 43:36 Настройка неактивного состояния 45:54 Завершение работы над переключателем 46:49 Планы на будущее
00:00 Исправление кнопок меню • Добавили класс `subtle` для кнопок меню, чтобы придать им сдержанный стиль. • Страница настроек стала выглядеть лучше. 00:47 Работа с галочками • Убрали обычную кнопку, чтобы сосредоточиться на галочках. • Добавили несколько галочек для предварительного просмотра. 01:45 Создание сетки и панелей • Создали сетку с двумя столбцами и панель стека. • Добавили флажок и удалили стандартный стиль флажка. 02:30 Анализ структуры флажка • Изучили структуру флажка на GitHub, используя шаблон Avalonia Fluent. • Выделили рамку, прямоугольник и элемент content presenter. 04:24 Проблемы со стилизацией • Попытались изменить стиль рамки, но столкнулись с ошибками. • Обнаружили, что свойства не переопределяются должным образом. 06:22 Переопределение шаблона • Создали шаблонный элемент управления `checkbox` и удалили его. • Переопределили тему элемента управления, чтобы управлять стилем флажков. 08:15 Визуализация стилей флажков • Визуально отобразили стили для разных состояний флажков: не отмечен, отмечен, промежуточное состояние, отключён. • Добавили отключённое состояние для каждой кнопки. 10:13 Упрощение стиля флажков • Удалили рамку вокруг флажка, чтобы упростить элемент. • Привязали текст к фоновому цвету, чтобы текст был одинаковым для отмеченных и неотмеченных элементов. 11:00 Завершение работы со стилями • Привели в порядок текст, удалив ненужные стили. • Обеспечили, чтобы текст был одинаковым независимо от состояния флажка. 12:00 Настройка стилей управления • Удаление стилей переднего плана и промежуточного уровня. • Оставление стилей для content presenter без изменений. • Исключение стилей для отключённого состояния презентатора контента. 13:12 Работа с контуром галочки • Изменение кисти для границы галочки для добавления цвета. • Настройка толщины контура и градиента фона. • Коррекция сетки для идеального совпадения с пикселями. 15:05 Настройка радиуса скругления и привязки шаблона • Установка радиуса скругления углов на 7 пикселей. • Замена динамических ресурсов на привязку к шаблону. • Решение проблемы с ошибкой при привязке шаблона. 17:20 Добавление значка и центрирование • Добавление значка из библиотеки иконок Phosphor. • Центрирование значка по вертикали и горизонтали. • Настройка выравнивания текста над иконкой. 18:57 Стилизация иконки и настройка прозрачности • Стилизация иконки галочки для заполнения блока. • Настройка прозрачности иконки по умолчанию. • Создание эффекта вырезания элемента управления. 20:54 Стилизация состояний элемента управления • Создание состояния без галочки и состояния при наведении. • Настройка цвета обводки и переднего плана при наведении. • Планирование работы над состоянием «отмечено» в будущем. 21:54 Создание состояния «отмечено» • Добавление градиентного фона для состояния «отмечено». • Подбор цвета рамки под цвет фона. • Завершение настройки значка и других элементов для состояния «отмечено». 22:51 Настройка флажка и наведения • Изменение прозрачности флажка для создания метки. • Добавление наведения, но цвет слишком голубой, требуется синий. • Проверка работы стилей по умолчанию. 23:45 Проблемы с наведением • Обнаружение бага: невозможность навести курсор на область между кнопкой и центром. • Решение проблемы путём добавления фона. 25:36 Промежуточное состояние • Определение промежуточного состояния между «выбрано» и «не выбрано». • Замена галочки на метку для выделения текста. • Настройка цвета и контура для промежуточного состояния. 26:33 Стилизация неопределённого состояния • Использование значка «бриллиант» для неопределённого состояния. • Настройка непрозрачности и цвета контура. • Упрощение стилей при наведении. 29:17 Отступы и область клика • Задание отступов для области клика. • Проверка работы эффектов при наведении. 30:52 Стилизация состояний при нажатии • Стилизация состояний при удержании флажка. • Изменение фона и непрозрачности границы. • Настройка глифа и контура в активном состоянии. 33:41 Завершение стилизации • Проверка переходов между состояниями. • Коррекция цветов при щелчке. • Уточнение стилей для перехода между состояниями. 35:35 Настройка состояний переключателя • Определение двух состояний: неопределённого и отмеченного. • Использование глифа для задания неопределённого состояния. • Добавление двоеточия для обозначения отмеченного состояния. 36:05 Проблемы с переходами между состояниями • Трудности с переходом из отмеченного в неопределённое состояние. • Решение игнорировать промежуточное состояние и добавить новый стиль. 37:02 Настройка порядка состояний 38:22 Проблемы с отображением неопределённого состояния 41:15 Стилизация трёх состояний 43:36 Настройка неактивного состояния 45:54 Завершение работы над переключателем 46:49 Планы на будущее