06. Avalonia UI Real World (Page Layout)
00:00 Введение и исправление ошибки • Добавлены внедрение зависимостей и заводской шаблон для загрузки страниц. • Смоделирован пользовательский интерфейс для страницы настроек в Affinity. • Цель — превратить модель в реальный код и интерфейс с помощью Avalonia, сосредоточившись на структуре, а не на стиле. • Исправлена ошибка с viewmodel времени разработки, требующей фабрику страниц. 00:53 Создание конструктора для разработки • Создан конструктор для установки текущей страницы на новую. • Конструктор прокомментирован как работающий только во время разработки. • Добавлены основной цвет фона и текста для визуального контроля. 01:53 Структура страницы • Основная область страницы разделена на несколько частей. • Верхний уровень представлен сеткой с двумя столбцами и двумя строками. • Сетка содержит заголовок и содержимое, разделённое на две части. 02:54 Работа над заголовком • Заголовок состоит из сетки с фоном и панелью с тремя текстами. • Фон экспортирован в формате SVG и добавлен в ресурсы. • Изображение привязано к источнику и растянуто на всю длину. 03:56 Настройка изображения • Изображение растянуто на всю ширину с сохранением пропорций. • Настроена высота изображения и режим растягивания. 05:58 Панель стека с надписями • Внутри заголовка создана панель стека с тремя надписями «Настройки». • Надписи выровнены по горизонтали по центру. 06:52 Основной контент • Основной контент разделён на две колонки. • Создана панель стека с заголовком для общих данных. • Настроены отступы и поля для элементов. 09:31 Добавление кнопки • Добавлена кнопка с текстом «Лицензия на выпуск» и символом блокировки. • Кнопка будет стилизована отдельно. • Явно определены строки для избежания путаницы. 10:28 Настройка размера окна • Кнопка занимает больше места, чем текст, из-за маленького окна. • Устанавливаем минимальный размер окна на 1240 пикселей для большинства мониторов. • Пропорционально увеличиваем высоту окна. 11:22 Минимальный размер и макет • Устанавливаем минимальный размер, чтобы избежать прокрутки страницы вниз. • Сосредотачиваемся на макете, игнорируя стилистику. • Рассчитываем ширину проекта: 1400 пикселей, учитывая боковое меню и отступы. 12:20 Создание общего раздела • Создаём текстовый блок с переносом текста wrap. • Устанавливаем сетку без отступов, которые добавим позже с помощью стилей. • Игнорируем текущее оформление, сосредотачиваясь на макете. 15:09 Локации и панель стека • Начинаем с метки и сетки для локаций. • Добавляем текстовый блок и кнопку с плюсом. • Визуализируем сетку с помощью линий. 17:50 Управление элементами • Создаём элемент управления элементами для списка. • Привязываем элемент управления к viewmodel. • Исправляем привязку данных для автоматического выбора элементов. 21:30 Правая сторона интерфейса • Создаём панель с ярлыком, текстовым полем и полем со списком. • Копируем настройки левой стороны на правую. • Добавляем панель управления стеком для хоста SolidWorks. 22:39 Текстовый блок и перенос текста • Установка значения wrap для переноса текста в текстовом блоке. • Использование двоеточия в XML для добавления пробелов, но это не идеально. • Добавление специального элемента для переноса строки для более удобного управления пробелами. 23:46 Поле со списком • Поле со списком будет работать с привязкой данных и сервиса, а не с IP-адресами. • Хосты пакетного процесса будут транслировать свои IP-адреса для обнаружения. • Раздел PDM Enterprise будет представлять собой панель со стеками. 24:27 Панель управления стеком • Горизонтальная панель стека с тремя элементами: кнопка «не вводить текст» или «комбинировать», поле со списком и два текстовых поля. • Интервалы должны соответствовать стилю, который будет применяться. 25:33 Сетка и кнопки • Создание сетки с определением столбцов из трёх чётных величин. • Две кнопки: «войти в систему» и «обновить хранилище», расположенные горизонтально. 27:09 Кэш настроек • Кэш настроек аналогичен PDM Enterprise: панель в виде стека с текстом и тремя элементами-кнопками. • Копирование настроек PDM Enterprise и сохранение их в кэше. • Добавление кнопок для очистки кэша, экспорта и импорта кэша. 30:07 Стилизация и выравнивание • Важность единообразия отступов и интервалов между элементами. • Применение визуальных стилей для улучшения внешнего вида интерфейса. • Использование сеток для элементов, занимающих всю ширину или высоту, и стековых панелей для элементов, складывающихся в стопку.
00:00 Введение и исправление ошибки • Добавлены внедрение зависимостей и заводской шаблон для загрузки страниц. • Смоделирован пользовательский интерфейс для страницы настроек в Affinity. • Цель — превратить модель в реальный код и интерфейс с помощью Avalonia, сосредоточившись на структуре, а не на стиле. • Исправлена ошибка с viewmodel времени разработки, требующей фабрику страниц. 00:53 Создание конструктора для разработки • Создан конструктор для установки текущей страницы на новую. • Конструктор прокомментирован как работающий только во время разработки. • Добавлены основной цвет фона и текста для визуального контроля. 01:53 Структура страницы • Основная область страницы разделена на несколько частей. • Верхний уровень представлен сеткой с двумя столбцами и двумя строками. • Сетка содержит заголовок и содержимое, разделённое на две части. 02:54 Работа над заголовком • Заголовок состоит из сетки с фоном и панелью с тремя текстами. • Фон экспортирован в формате SVG и добавлен в ресурсы. • Изображение привязано к источнику и растянуто на всю длину. 03:56 Настройка изображения • Изображение растянуто на всю ширину с сохранением пропорций. • Настроена высота изображения и режим растягивания. 05:58 Панель стека с надписями • Внутри заголовка создана панель стека с тремя надписями «Настройки». • Надписи выровнены по горизонтали по центру. 06:52 Основной контент • Основной контент разделён на две колонки. • Создана панель стека с заголовком для общих данных. • Настроены отступы и поля для элементов. 09:31 Добавление кнопки • Добавлена кнопка с текстом «Лицензия на выпуск» и символом блокировки. • Кнопка будет стилизована отдельно. • Явно определены строки для избежания путаницы. 10:28 Настройка размера окна • Кнопка занимает больше места, чем текст, из-за маленького окна. • Устанавливаем минимальный размер окна на 1240 пикселей для большинства мониторов. • Пропорционально увеличиваем высоту окна. 11:22 Минимальный размер и макет • Устанавливаем минимальный размер, чтобы избежать прокрутки страницы вниз. • Сосредотачиваемся на макете, игнорируя стилистику. • Рассчитываем ширину проекта: 1400 пикселей, учитывая боковое меню и отступы. 12:20 Создание общего раздела • Создаём текстовый блок с переносом текста wrap. • Устанавливаем сетку без отступов, которые добавим позже с помощью стилей. • Игнорируем текущее оформление, сосредотачиваясь на макете. 15:09 Локации и панель стека • Начинаем с метки и сетки для локаций. • Добавляем текстовый блок и кнопку с плюсом. • Визуализируем сетку с помощью линий. 17:50 Управление элементами • Создаём элемент управления элементами для списка. • Привязываем элемент управления к viewmodel. • Исправляем привязку данных для автоматического выбора элементов. 21:30 Правая сторона интерфейса • Создаём панель с ярлыком, текстовым полем и полем со списком. • Копируем настройки левой стороны на правую. • Добавляем панель управления стеком для хоста SolidWorks. 22:39 Текстовый блок и перенос текста • Установка значения wrap для переноса текста в текстовом блоке. • Использование двоеточия в XML для добавления пробелов, но это не идеально. • Добавление специального элемента для переноса строки для более удобного управления пробелами. 23:46 Поле со списком • Поле со списком будет работать с привязкой данных и сервиса, а не с IP-адресами. • Хосты пакетного процесса будут транслировать свои IP-адреса для обнаружения. • Раздел PDM Enterprise будет представлять собой панель со стеками. 24:27 Панель управления стеком • Горизонтальная панель стека с тремя элементами: кнопка «не вводить текст» или «комбинировать», поле со списком и два текстовых поля. • Интервалы должны соответствовать стилю, который будет применяться. 25:33 Сетка и кнопки • Создание сетки с определением столбцов из трёх чётных величин. • Две кнопки: «войти в систему» и «обновить хранилище», расположенные горизонтально. 27:09 Кэш настроек • Кэш настроек аналогичен PDM Enterprise: панель в виде стека с текстом и тремя элементами-кнопками. • Копирование настроек PDM Enterprise и сохранение их в кэше. • Добавление кнопок для очистки кэша, экспорта и импорта кэша. 30:07 Стилизация и выравнивание • Важность единообразия отступов и интервалов между элементами. • Применение визуальных стилей для улучшения внешнего вида интерфейса. • Использование сеток для элементов, занимающих всю ширину или высоту, и стековых панелей для элементов, складывающихся в стопку.