001. Avalonia UI - Getting Started Environment Setup

00:00 Введение и цель видео
• Объяснение цели видео: создание базового пользовательского интерфейса в Avalonia с использованием сеток и стековых панелей.
• Пример интерфейса: измеритель звука, показанный на видео.

00:37 Установка необходимых инструментов
• Переход к коду из-за отсутствия аудиовступления.
• Установка Rider и .NET SDK для Mac.
• Настройка плагинов в Rider для работы с Avalonia.

02:05 Создание проекта в Rider
• Создание нового решения в Rider.
• Выбор типа приложения Avalonia .NET Core.
• Настройка размеров главного окна.

03:42 Описание интерфейса измерителя звука
• Демонстрация интерфейса измерителя звука в реальном времени.
• Объяснение работы интерфейса: отображение уровня звука и индикаторов.

04:28 Принципы работы с Avalonia
• Avalonia основана на XAML, макет идентичен WPF.
• Разбивка приложения на основные разделы с помощью панелей и сеток.

05:45 Создание заголовков и кнопок
• Создание заголовков с текстом по центру и кнопками по бокам.
• Использование сеток с автоматическим размером столбцов.

06:41 Реализация нижней части интерфейса
• Создание нижней части с кнопками и заполнением пространства.
• Группировка кнопок в одну колонку.

08:09 Реализация основного раздела
• Создание основной панели стека с тремя рядами сеток.
• Разделение сеток на секции.

10:14 Добавление элементов в сетки
• Добавление элементов в сетки, определение столбцов и строк.
• Настройка размеров и цвета элементов.

10:49 Завершение настройки сетки
• Установка высоты и ширины сетки.
• Настройка фонового цвета сетки.

11:20 Работа с текстом и колонками
• Установка текста в нулевом столбце.
• Использование клавиш C и V для копирования строки.
• Замена текста на разные цвета для визуализации.

12:15 Создание панели стека и сетки
• Создание панели стека внутри сетки.
• Настройка веса шрифта и фона панели.
• Центрирование текста по вертикали и горизонтали.

13:14 Работа с панелями и ориентацией
• Изменение ориентации панели на горизонтальную.
• Настройка цвета панели.
• Проверка макета с измерителем громкости.

13:52 Основы работы с панелями и сетками
• Объяснение работы панели стека и её наложения элементов.
• Замена панели стека на сетку для автоматического масштабирования.
• Определение строк и столбцов в сетке.

16:15 Настройка строк и столбцов в сетке
• Определение поведения строк и столбцов в сетке.
• Автоматическое заполнение строк содержимым.
• Разделение оставшегося пространства между строками.

20:02 Создание прямоугольника и панели регулировки громкости
• Создание прямоугольника с заливкой фиолетовым цветом.
• Настройка размеров прямоугольника.
• Добавление панели регулировки громкости.

21:21 Детали громкости и настройка панели
• Настройка цвета и размеров панели «Детали громкости».
• Автоматическое заполнение оставшегося пространства.
• Добавление текста для использования выпадающих списков.

23:18 Создание кнопок и отступов
• Создание кнопок для стереосистемы и YouTube.
• Группировка кнопок.
• Настройка отступов внутри сетки для визуального эффекта.

23:51 Проблемы с отступами между кнопками
• Нет отступов между кнопками, требуется их добавление.
• Зазор между колонками не установлен, нужно добавить запас вокруг сетки.

24:22 Использование линий сетки
• Линии сетки помогают увидеть структуру интерфейса.
• Функция полезна для отладки.

24:32 Поиск решений для отступов
• В выпадающем меню нет опций для полей между столбцами.
• Рассматривается возможность использования пользовательской сетки или прикреплённого свойства.

25:39 Настройка границ кнопок
• Необходимо установить границы кнопок.
• Текущий подход требует ручного заполнения кнопок.

26:54 Работа с пробелами и выравниванием
• Пробел в середине пропускается.
• Элементы выравниваются по правому краю.

27:49 Настройка ширины и цвета кнопок
• Кнопки должны быть оранжевыми и красными.
• Ширина кнопок — около 30 см.

28:34 Масштабирование и сетка
• Масштабирование областей должно быть вертикальным.
• Используется сетка с процентами и звёздочками.

29:12 Создание макета
• Превращение сложного интерфейса в быструю и понятную сетку.
• Настройка верхней и нижней панелей.

30:07 Особенности Avalonia
• Avalonia основана на собственном рендерере, подобном Skia.
• Сравнение с Xamarin Forms и Maui.

31:47 Привязка кода и MVVM
• Avalonia позволяет создавать пользовательский интерфейс и связывать его с кодом.
• Использование MVVM для обратной связи от пользовательского интерфейса и серверной части.

32:41 Обратная связь и обучение
• Призыв к обратной связи и участию в обучении.
• Цель серии — помочь понять Avalonia для пользовательского интерфейса.