003. Avalonia UI - Grid Percentage ( Star) Layout
00:00 Начало работы над клоном измерителя громкости Julian • Создание клона измерителя громкости Julian для привыкания к пользовательскому интерфейсу. • Увеличение окна до точного размера пикселя и сопоставление размеров столбиков. • Подбор строки заголовка для соответствия размеру и стилю. 00:58 Анализ шкалы громкости • Шкала громкости представлена в виде 60 баллов, начиная с -60 дБ. • Промежутки между баллами относительные, например, от 0 до -3 будет 3 промежутка. • Использование сетки с относительными размерами для создания точных интервалов. 01:58 Принципы работы сетки • Сетка с двумя звёздочками автоматически настраивается под размер содержимого. • Звезда указывает на заполнение оставшегося пространства. • Пропорции между звёздочками определяют точные интервалы. 03:21 Структура родительской сетки • Родительская сетка состоит из трёх рядов: звёздочка, авто, авто. • Вспомогательная сетка с определёнными значениями для разделительных линий. • Увеличение размера чисел для точного заполнения пробелов. 04:28 Настройка содержимого сетки • Добавление новой сетки с позициями реальности. • Панель стека с этикеткой «all fs». • Две кнопки в панели стека. 06:05 Стилизация текста и кнопок • Изменение цвета текста на белый и настройка размера шрифта. • Горизонтальное выравнивание текста по центру. • Применение отступов для отделения текста от кнопок. 07:12 Использование стилей в Avalonia • Стили в Avalonia сочетают элементы CSS и WPF. • Настройка стилей для меток и кнопок. • Применение эффектов наведения курсора мыши. 10:57 Завершение настройки интерфейса • Корректировка полей и округлений элементов интерфейса. • Настройка отступов для равномерного распределения элементов. • Подготовка к добавлению иконки в будущем с использованием SVG-графики. 12:50 Выравнивание и сетка • Выравнивание элемента почти идеально, остаётся придать ему стиль для отображения сетки. • Понимание расположения сетки и значений звёзд важно для пропорционального масштабирования. • Пример с восемнадцатью очками показывает, как линии должны располагаться относительно общего размера. 13:46 Панель стека и кнопки • Панель стека с нижними кнопками находится внутри панели регулировки громкости. • Средний ряд содержит надпись «looks». • Использование сетки для вставки дополнительного ряда. 14:30 Измеритель объёма и определения строк • Настройка определений строк с помощью звёздочек. • Создание одиннадцати рядов с разными значениями. • Добавление содержания в строки. 15:28 Работа с текстом и стилями • Использование длинного тире «эм» вместо дефиса. • Настройка стилей для этикеток, включая цвет и размер шрифта. • Проблемы с автозаполнением в Rider. 19:48 Расчёт пропорций • Вычисление разницы между цифрами для достижения одинаковых пропорций. • Пример расчёта: разница между 0 и -3 равна 3, между 3 и 6 — также 3 и так далее. • Использование функции auto для заполнения оставшегося пространства. 21:38 Выравнивание и столбцы • Выравнивание элементов по правому краю. • Добавление столбцов в сетку для организации элементов. • Центрирование сетки по горизонтали. 22:53 Масштабирование и авто-звезды • Установка ширины полосы и автоматическое увеличение размера текста. • Применение авто-звёзд для автоматического заполнения пространства. • Корректировка левого и правого направления для изображения прижатия к краю. 24:21 Копирование и изменение столбцов • Копирование элементов с удержанием клавиши Alt. • Изменение порядка столбцов с нулевого на первый и второй. • Размещение свободно перемещающейся стрелки внутри холста. 25:25 Элементы управления макетом • Переход к элементам управления макетом. • Выбор панели canvas для организации элементов. 25:40 Создание холста и сетки • Обсуждение создания холста для размещения линий внутри батончика. • Идея использования белого и красного прямоугольников для создания эффекта. • Определение двух холстов: один для сетки, другой для элементов внутри. 26:38 Настройка сетки и прямоугольника • Установка промежутка между рядами равным 11. • Заливка прямоугольника красным цветом для визуализации. • Настройка ширины прямоугольника около 20. 27:26 Работа со стрелкой • Создание прямоугольника для стрелки размером 20x20. • Размещение стрелки на холсте. • Проблема с относительной величиной стрелки относительно сетки. 29:15 Масштабирование и проблемы с положением стрелки • Проверка пропорционального масштабирования при изменении размера. • Проблема с фиксированным положением стрелки при масштабировании. • Необходимость поиска решения для пропорционального масштабирования. 30:17 Создание второй сетки 32:01 Настройка заполнения сетки 34:17 Улучшение визуального восприятия 37:07 Финальные настройки и завершение 38:41 Сравнение макетов 39:36 Разработка масштабируемых прямоугольников 40:29 Взаимодействие с аудиторией и завершение
00:00 Начало работы над клоном измерителя громкости Julian • Создание клона измерителя громкости Julian для привыкания к пользовательскому интерфейсу. • Увеличение окна до точного размера пикселя и сопоставление размеров столбиков. • Подбор строки заголовка для соответствия размеру и стилю. 00:58 Анализ шкалы громкости • Шкала громкости представлена в виде 60 баллов, начиная с -60 дБ. • Промежутки между баллами относительные, например, от 0 до -3 будет 3 промежутка. • Использование сетки с относительными размерами для создания точных интервалов. 01:58 Принципы работы сетки • Сетка с двумя звёздочками автоматически настраивается под размер содержимого. • Звезда указывает на заполнение оставшегося пространства. • Пропорции между звёздочками определяют точные интервалы. 03:21 Структура родительской сетки • Родительская сетка состоит из трёх рядов: звёздочка, авто, авто. • Вспомогательная сетка с определёнными значениями для разделительных линий. • Увеличение размера чисел для точного заполнения пробелов. 04:28 Настройка содержимого сетки • Добавление новой сетки с позициями реальности. • Панель стека с этикеткой «all fs». • Две кнопки в панели стека. 06:05 Стилизация текста и кнопок • Изменение цвета текста на белый и настройка размера шрифта. • Горизонтальное выравнивание текста по центру. • Применение отступов для отделения текста от кнопок. 07:12 Использование стилей в Avalonia • Стили в Avalonia сочетают элементы CSS и WPF. • Настройка стилей для меток и кнопок. • Применение эффектов наведения курсора мыши. 10:57 Завершение настройки интерфейса • Корректировка полей и округлений элементов интерфейса. • Настройка отступов для равномерного распределения элементов. • Подготовка к добавлению иконки в будущем с использованием SVG-графики. 12:50 Выравнивание и сетка • Выравнивание элемента почти идеально, остаётся придать ему стиль для отображения сетки. • Понимание расположения сетки и значений звёзд важно для пропорционального масштабирования. • Пример с восемнадцатью очками показывает, как линии должны располагаться относительно общего размера. 13:46 Панель стека и кнопки • Панель стека с нижними кнопками находится внутри панели регулировки громкости. • Средний ряд содержит надпись «looks». • Использование сетки для вставки дополнительного ряда. 14:30 Измеритель объёма и определения строк • Настройка определений строк с помощью звёздочек. • Создание одиннадцати рядов с разными значениями. • Добавление содержания в строки. 15:28 Работа с текстом и стилями • Использование длинного тире «эм» вместо дефиса. • Настройка стилей для этикеток, включая цвет и размер шрифта. • Проблемы с автозаполнением в Rider. 19:48 Расчёт пропорций • Вычисление разницы между цифрами для достижения одинаковых пропорций. • Пример расчёта: разница между 0 и -3 равна 3, между 3 и 6 — также 3 и так далее. • Использование функции auto для заполнения оставшегося пространства. 21:38 Выравнивание и столбцы • Выравнивание элементов по правому краю. • Добавление столбцов в сетку для организации элементов. • Центрирование сетки по горизонтали. 22:53 Масштабирование и авто-звезды • Установка ширины полосы и автоматическое увеличение размера текста. • Применение авто-звёзд для автоматического заполнения пространства. • Корректировка левого и правого направления для изображения прижатия к краю. 24:21 Копирование и изменение столбцов • Копирование элементов с удержанием клавиши Alt. • Изменение порядка столбцов с нулевого на первый и второй. • Размещение свободно перемещающейся стрелки внутри холста. 25:25 Элементы управления макетом • Переход к элементам управления макетом. • Выбор панели canvas для организации элементов. 25:40 Создание холста и сетки • Обсуждение создания холста для размещения линий внутри батончика. • Идея использования белого и красного прямоугольников для создания эффекта. • Определение двух холстов: один для сетки, другой для элементов внутри. 26:38 Настройка сетки и прямоугольника • Установка промежутка между рядами равным 11. • Заливка прямоугольника красным цветом для визуализации. • Настройка ширины прямоугольника около 20. 27:26 Работа со стрелкой • Создание прямоугольника для стрелки размером 20x20. • Размещение стрелки на холсте. • Проблема с относительной величиной стрелки относительно сетки. 29:15 Масштабирование и проблемы с положением стрелки • Проверка пропорционального масштабирования при изменении размера. • Проблема с фиксированным положением стрелки при масштабировании. • Необходимость поиска решения для пропорционального масштабирования. 30:17 Создание второй сетки 32:01 Настройка заполнения сетки 34:17 Улучшение визуального восприятия 37:07 Финальные настройки и завершение 38:41 Сравнение макетов 39:36 Разработка масштабируемых прямоугольников 40:29 Взаимодействие с аудиторией и завершение