14. Avalonia UI Real World (Styling Tab Control)

Описание

00:00 Экспорт фона в SVG
• Переход от страницы настроек к странице действий.
• Использование Affinity Designer для создания макета.
• Экспорт фона в формате SVG для дальнейшего кодирования.

00:58 Работа с градиентами в SVG
• Проблемы с экспортом градиентов в SVG из-за отсутствия слоёв эффектов.
• Применение градиентов к иконкам вместо сплошных цветов.
• Настройка прозрачности градиентов.

01:54 Экспорт и проверка фона
• Экспорт фона с настройками: «Сохранить как», выбор SVG, отключение растрирования, включение сглаживания преобразований.
• Проверка цвета фона в браузере.

02:53 Создание заголовка страницы действий
• Использование модели представления для заголовка страницы действий.
• Привязка к viewmodel и настройка пространства имён.

04:07 Добавление фона в Avalonia
• Добавление фона из папки с активами в ресурсы Avalonia.
• Компиляция и проверка отображения фона.

04:33 Стилизация текста в виде кривых
• Экспорт текста в виде кривых для улучшения отображения.
• Изменение текста на ресурс Avalonia и компиляция.

05:38 Настройка высоты изображения
• Проверка высоты изображения и корректировка стиля SVG.
• Переход к настройке вкладок.

06:38 Создание элемента управления вкладками
• Использование элемента управления вкладками из документации Avalonia.
• Привязка элементов управления к viewmodel.

08:32 Стилизация элемента управления вкладками
• Создание нового стиля для элемента управления вкладками.
• Переопределение элемента управления и создание собственного шаблона.

10:37 Настройка цветов кнопок
• Приглушение цветов кнопок для более незаметного интерфейса.
• Изменение активного градиента и цвета кнопок.
• Фиксация изменений и обновление кнопок.

12:21 Добавление кнопки и исправление вкладки
• Добавление новой кнопки в стиль приложения и её название «менее заметные кнопки».
• Исправление вида вкладки и выбор элемента списка в выбранном состоянии.
• Перекомпиляция файла после внесения изменений.

13:03 Работа с GitHub и кодом
• Инструкция по работе с GitHub: скачивание кода, открытие через GitHub Desktop.
• Обзор изменений в коде: изменение переднего плана с основного на основной фоновый.

14:03 Стилизация элемента управления вкладками
• Добавление динамического градиента фона и рамки для визуализации элемента управления.
• Анализ структуры шаблона: элемент управления шаблоном, панель dock, презентатор элементов и презентатор содержимого.

15:02 Создание вкладки и стилизация
• Создание вкладки внутри элемента управления вкладками.
• Копирование правил для стилизации элемента вкладки.
• Переход от вертикального представления к горизонтальному.

15:59 Анализ подчёркивания и панели переноса
• Объяснение появления подчёркивания и его связи с панелью переноса.
• Замена панели «обернуть панель» на панель «перенос».

18:30 Поиск разделителя табуляции
• Поиск класса для разделителя табуляции в файле класса управления вкладками.
• Переименование элемента в «разделитель вкладок».

20:04 Настройка стиля разделителя вкладок
• Настройка границы и цвета подчёркивания.
• Удаление полей и отступов между элементами панели.
• Настройка цвета переднего плана и отступов внутри элемента.

23:16 Завершение настройки
• Изменение цвета подчёркивания на цвет фона.
• Преобразование панели в сетку для копирования стиля.

24:07 Настройка панели
• Панель должна скрываться и отображаться в зависимости от состояния выбора.
• Устанавливается фон и граница элемента управления.
• Градиент по умолчанию используется для основного фона.

25:19 Работа с цветом и текстом
• Цвет должен оставаться неизменным для корректной работы.
• Обновляется текст и выделяется жирным шрифтом.
• Радиус угла и стиль оформления устанавливаются вручную.

26:24 Изменение фона при выборе
• При выборе элемента меняется передний и задний план.
• Фон привязывается к выбранному состоянию.
• Активный градиент используется для более заметного выделения.

27:21 Настройка кисти для выделения границ
• Кисть для выделения границ привязывается к определённому месту.
• Стиль кисти устанавливается по умолчанию для наведения курсора мыши.
• Переопределение стиля кисти в разделе «Стили».

29:30 Отключение элемента
• Отключённый элемент имеет фон градиента по умолчанию.
• Передний план устанавливается как основной фон.
• Обновление кода для управления вкладками.

30:46 Проблемы с элементом табуляции
• Элемент табуляции не обновляется должным образом.
• Презентатор визуального контента переопределяется неправильно.
• Исправление стиля элемента табуляции.

33:45 Настройка отступов и заголовков
• Добавляются отступы для улучшения внешнего вида.
• Заголовок размещается правильно, избегая плавающего эффекта.
• Проверка согласованности отступов на других элементах управления.

34:59 Проверка страницы настроек

35:41 Оформление вкладки

35:54 Заполнение панели действий

36:18 Проблемы с визуальным эффектом

37:18 Создание внутренней страницы