10. Avalonia UI Real World (Mockup To Real Styles)
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 Финальные настройки • Исправление заголовка настроек. • Коррекция порядка градиентов для стильного вида. • Завершение работы над пользовательским интерфейсом.
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 Финальные настройки • Исправление заголовка настроек. • Коррекция порядка градиентов для стильного вида. • Завершение работы над пользовательским интерфейсом.