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 Создание внутренней страницы
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 Создание внутренней страницы