01. Avalonia UI Real World (Images & Buttons)
00:00 Введение в Avalonia • Avalonia — кроссплатформенный UI для разработки приложений на Windows, Mac, Linux, мобильных устройствах, веб-приложениях и Tizen. • Автор ранее выпускал статьи об Avalonia и теперь планирует переделать своё коммерческое приложение Batch Process с помощью Avalonia. 00:58 Начало работы с Avalonia • Набросок интерфейса в Affinity Designer будет преобразован в Avalonia. • Установка Avalonia через Visual Studio или JetBrains Rider, который теперь бесплатен. 01:55 Создание проекта • Выбор между кроссплатформенным приложением, приложением MVVM и .NET-приложением. • Создание нового проекта «Пакетная обработка 3» в Rider. 03:45 Проверка работы приложения • Запуск приложения и проверка его работы. • Открытие предварительного просмотра интерфейса. 04:42 Структура приложения • Описание структуры приложения: боковая панель, главное окно с сеткой. • Настройка цвета фона с помощью палитры цветов. 05:40 Работа со стилями • Создание папки styles и документа со стилями Avalonia. • Включение стилей в XAML-файл приложения. 06:39 Ресурсы приложения • Создание ресурса primary background для цвета фона. • Обновление приложения после внесения изменений. 07:38 Использование панелей и сетки • Объяснение различий между панелями стека и сеткой. • Применение сетки для заполнения пространства и фиксированного размера одного из столбцов. 09:23 Применение сетки • Настройка расположения элементов в сетке. • Примеры использования сетки для заполнения пространства и фиксированного размера. 10:20 Использование привязок в пользовательском интерфейсе • Привязки заменяют фиксированные значения, например, FFOOO для красного цвета. • Динамические ресурсы ищутся в ресурсах приложения. • Интерфейс напоминает веб-разработку, используя конструкции, похожие на CSS и HTML. 11:16 Импорт логотипа в формате SVG • Создание папки assets и подпапки images. • Вставка логотипа в папку images и изменение типа сборки на ресурс Avalonia. 12:10 Настройка контейнера и отступов • Использование панели стека и универсального элемента-обёртки Border для добавления отступов. • Задание отступа в 20 пикселей. • Добавление сетки для заполнения оставшегося пространства. 13:08 Привязка SVG-изображения • Настройка источника и вкладки привязки для SVG-изображения. • Установка пакета avalonia.svg.skia для поддержки SVG. • Указание пути к файлу logo.svg. 15:05 Настройка размеров изображения • Задание ширины изображения 220 и изменение на auto для автоматического размера. • Настройка дизайнерского размера 800x450 и реальных размеров 1024x600. 16:55 Создание градиента фона • Добавление линейной градиентной кисти с ключом primary background gradient. • Указание начальной и конечной точек градиента в процентах. • Задание цветов градиента: 111214 и 151E3E. 18:33 Добавление кнопок • Добавление кнопок под изображением, настройка переднего плана на белый. • Выравнивание текста по горизонтали для заполнения кнопки. • Настройка интервала между кнопками в панели стека. 21:02 Добавление кнопки настроек • Создание сетки с параметрами auto и fill для нижней строки. • Размещение кнопки настроек во втором ряду с индексом 1. • Настройка Grid.Row для кнопки настроек. 21:46 Настройка боковой панели и кнопок • Замена кнопки на иконку в настройках. • Боковая панель воссоздана в виде физических элементов. • Внутренняя часть будет настоящей страницей с шаблонным кодом для переходов между страницами. 22:44 Стилизация кнопок • Добавление градиентного фона и установка ширины кнопки 200. • Горизонтальное выравнивание по растяжению для кнопки. • Использование метода setter для настройки свойств кнопки. 23:44 Настройка шрифта и цветов • Установка размера шрифта 20. • Создание сплошной кисти primary text для светлого оттенка. • Применение динамического ресурса primary text для цвета foreground. 24:48 Стилизация наведения курсора • Создание стиля для наведения курсора на кнопку. • Выбор шаблона «Презентация контента» для настройки цвета при наведении. • Изменение цвета переднего плана и фона при наведении. 27:07 Завершение настройки • Проверка эффекта наведения при увеличении масштаба кнопки. • Пересоборка проекта для применения стилей. • Планы по улучшению: увеличение шрифта, уменьшение отступов, добавление иконок, анимация. 28:03 Преимущества Avalonia • Быстрое создание приложения с хорошим внешним видом. • Простота и интуитивность интерфейса Avalonia. • Сравнение с другими UI-фреймворками, такими как Maui. 29:01 Рекомендации по обучению • Приглашение задавать вопросы и смотреть другие видеоуроки по Avalonia. • Рекомендация курса по WPF для понимания основ UI-разработки. • Обещание готового приложения к концу курса.
00:00 Введение в Avalonia • Avalonia — кроссплатформенный UI для разработки приложений на Windows, Mac, Linux, мобильных устройствах, веб-приложениях и Tizen. • Автор ранее выпускал статьи об Avalonia и теперь планирует переделать своё коммерческое приложение Batch Process с помощью Avalonia. 00:58 Начало работы с Avalonia • Набросок интерфейса в Affinity Designer будет преобразован в Avalonia. • Установка Avalonia через Visual Studio или JetBrains Rider, который теперь бесплатен. 01:55 Создание проекта • Выбор между кроссплатформенным приложением, приложением MVVM и .NET-приложением. • Создание нового проекта «Пакетная обработка 3» в Rider. 03:45 Проверка работы приложения • Запуск приложения и проверка его работы. • Открытие предварительного просмотра интерфейса. 04:42 Структура приложения • Описание структуры приложения: боковая панель, главное окно с сеткой. • Настройка цвета фона с помощью палитры цветов. 05:40 Работа со стилями • Создание папки styles и документа со стилями Avalonia. • Включение стилей в XAML-файл приложения. 06:39 Ресурсы приложения • Создание ресурса primary background для цвета фона. • Обновление приложения после внесения изменений. 07:38 Использование панелей и сетки • Объяснение различий между панелями стека и сеткой. • Применение сетки для заполнения пространства и фиксированного размера одного из столбцов. 09:23 Применение сетки • Настройка расположения элементов в сетке. • Примеры использования сетки для заполнения пространства и фиксированного размера. 10:20 Использование привязок в пользовательском интерфейсе • Привязки заменяют фиксированные значения, например, FFOOO для красного цвета. • Динамические ресурсы ищутся в ресурсах приложения. • Интерфейс напоминает веб-разработку, используя конструкции, похожие на CSS и HTML. 11:16 Импорт логотипа в формате SVG • Создание папки assets и подпапки images. • Вставка логотипа в папку images и изменение типа сборки на ресурс Avalonia. 12:10 Настройка контейнера и отступов • Использование панели стека и универсального элемента-обёртки Border для добавления отступов. • Задание отступа в 20 пикселей. • Добавление сетки для заполнения оставшегося пространства. 13:08 Привязка SVG-изображения • Настройка источника и вкладки привязки для SVG-изображения. • Установка пакета avalonia.svg.skia для поддержки SVG. • Указание пути к файлу logo.svg. 15:05 Настройка размеров изображения • Задание ширины изображения 220 и изменение на auto для автоматического размера. • Настройка дизайнерского размера 800x450 и реальных размеров 1024x600. 16:55 Создание градиента фона • Добавление линейной градиентной кисти с ключом primary background gradient. • Указание начальной и конечной точек градиента в процентах. • Задание цветов градиента: 111214 и 151E3E. 18:33 Добавление кнопок • Добавление кнопок под изображением, настройка переднего плана на белый. • Выравнивание текста по горизонтали для заполнения кнопки. • Настройка интервала между кнопками в панели стека. 21:02 Добавление кнопки настроек • Создание сетки с параметрами auto и fill для нижней строки. • Размещение кнопки настроек во втором ряду с индексом 1. • Настройка Grid.Row для кнопки настроек. 21:46 Настройка боковой панели и кнопок • Замена кнопки на иконку в настройках. • Боковая панель воссоздана в виде физических элементов. • Внутренняя часть будет настоящей страницей с шаблонным кодом для переходов между страницами. 22:44 Стилизация кнопок • Добавление градиентного фона и установка ширины кнопки 200. • Горизонтальное выравнивание по растяжению для кнопки. • Использование метода setter для настройки свойств кнопки. 23:44 Настройка шрифта и цветов • Установка размера шрифта 20. • Создание сплошной кисти primary text для светлого оттенка. • Применение динамического ресурса primary text для цвета foreground. 24:48 Стилизация наведения курсора • Создание стиля для наведения курсора на кнопку. • Выбор шаблона «Презентация контента» для настройки цвета при наведении. • Изменение цвета переднего плана и фона при наведении. 27:07 Завершение настройки • Проверка эффекта наведения при увеличении масштаба кнопки. • Пересоборка проекта для применения стилей. • Планы по улучшению: увеличение шрифта, уменьшение отступов, добавление иконок, анимация. 28:03 Преимущества Avalonia • Быстрое создание приложения с хорошим внешним видом. • Простота и интуитивность интерфейса Avalonia. • Сравнение с другими UI-фреймворками, такими как Maui. 29:01 Рекомендации по обучению • Приглашение задавать вопросы и смотреть другие видеоуроки по Avalonia. • Рекомендация курса по WPF для понимания основ UI-разработки. • Обещание готового приложения к концу курса.