10. Avalonia UI Real World Mockup To Real Styles

10. Avalonia UI Real World Mockup To Real Styles

Видео: 10. Avalonia UI Real World Mockup To Real Styles

RuTube

Ленинский Букварь

Опубликовано: 17.04.2026 | Продолжительность: 00:25:22

00:00 Начало работы над оформлением страницы настроек Обсуждение оставшихся задач по оформлению страницы настроек. Проблемы с заполнением полей со списком и текстовых полей. Решение уменьшить размер шрифта на кнопках обычного размера. 01:03 Исправление проблем с темами Windows Проблема с автоматическим выбором темы Windows Light при запуске приложения. Необходимость исправления отображения текста при наведении курсора в тёмной теме. Возвращение переднего плана на прежнее значение для устранения проблемы. 01:59 Создание классов для заголовков Создание трёх классов для заголовков: h подразделы один и два. Настройка размера веса и цвета шрифта для заголовков. Удаление полей и отступов для улучшения внешнего вида. 03:02 Настройка шрифтов и отступов для подзаголовков Изменение размера шрифта для подзаголовков. Увеличение отступов на верхней части для более плотного расположения элементов. Создание градиента оповещения для улучшения внешнего вида. 04:35 Применение стилей к подкаталогам Повторное использование стиля подзаголовка для всех подкаталогов. Создание нового стиля для окна со списком с добавлением полей. Настройка цвета успех и градиента для кнопок. 06:35 Настройка градиентов и цветов Создание градиента успеха с зелёным цветом. Настройка предупреждающего градиента с красным цветом. Компиляция изменений для проверки результатов. 09:01 Настройка интервалов между кнопками Добавление интервала между кнопками для улучшения визуального восприятия. Ручная настройка отступов для устранения лишних пространств. Проверка и корректировка интервалов между элементами. 11:05 Оформление полей списка Создание нового стиля для полей списка. Установка фона и рамки для полей списка. Настройка толщины границы и переднего плана для улучшения внешнего вида. 12:13 Стилизация элементов списка Добавление эффектов наведения курсора и выбора. Стилизация выбранного элемента: передний план остаётся прежним фон выделяется при наведении курсора. Использование хэштега для подчёркивания презентатора контента. 14:30 Работа с текстовым полем Создание текстового поля с границами как у кнопок. Настройка толщины границы и кисти border brush. Исправление эффекта зависания текста. 15:15 Анализ шаблона текстового поля Изучение содержимого шаблона текстового поля. Настройка прозрачности фона по умолчанию. Добавление текста в текстовое поле для тестирования. 16:34 Работа с водяными знаками Добавление водяного знака с именем пользователя. Проблемы с плавающим водяным знаком при удалении текста. Решение проблемы путём добавления текста сверху. 18:06 Настройка стиля текстового поля Определение строк и столбцов для текста. Изменение цвета текста на белый. Настройка стиля при наведении курсора и фокусировке. 21:15 Завершение настройки текстового поля Проверка стиля в тёмном и светлом режимах. Исправление цвета при фокусировке. Подготовка к работе с полями со списком. 22:14 Создание поля со списком Создание базового стиля для поля со списком. Добавление подкладки и кисти для окантовки. Привязка поля со списком к источнику элемента. 24:43 Финальные настройки Исправление заголовка настроек. Коррекция порядка градиентов для стильного вида. Завершение работы над пользовательским интерфейсом.,

#

Категория видео: Обучение