04. Avalonia UI Real World (Page Navigation)
00:00 Введение и цели видео • В предыдущем видео было реализовано боковое меню и анимации. • Теперь нужно добавить страницы для навигации по приложению. • При нажатии на кнопку «Домой» должна загружаться домашняя страница, а при нажатии на другие страницы — соответствующие страницы. • Настройки можно сделать в виде всплывающего окна или переместить в главное окно. 00:44 Реализация навигации по страницам • Тема видео — реализация навигации по страницам. • Начало с изучения шаблона идентификатора в MVVM. • Шаблон идентификатора позволяет указывать моделям данных, какой вид должен загружаться. 01:18 Принцип работы шаблона идентификатора • Match проверяет, соответствует ли модель данных типу viewmodel. • Если совпадение найдено, вызывается метод build, который возвращает элемент управления. • Это позволяет привязывать элементы управления контентом и другие элементы пользовательского интерфейса. 03:33 Создание папок и видов • Создание папки «Просмотры» и перетаскивание в неё основного вида. • Создание пользовательского элемента управления Avalonia для домашней страницы. • Создание второй страницы — страницы процесса. 04:14 Настройка сетки и проверка работы • Размещение видов в сетке на главном экране. • Исправление ошибок с ресурсами и изображениями. • Временное добавление стилей для демонстрации работы страницы. 05:44 Динамическая привязка к viewmodel • Переход от привязки к конкретному виду к привязке к viewmodel. • Создание базы моделей приватного просмотра и концепции текущей страницы. • Привязка к observable свойству текущей страницы. 07:18 Реализация моделей просмотра страниц • Создание модели просмотра домашней страницы и страницы процесса. • Использование view locator для преобразования моделей просмотра в реальные виды. • Временное использование свойств для доказательства работы привязки. 08:43 Настройка конструктора и отладка • Установка текущей страницы по умолчанию в конструкторе. • Привязка содержимого к текущей странице. • Отладка с помощью точек останова для проверки работы привязки. 10:12 Добавление шаблонов данных приложения • Добавление шаблонов данных приложения и локатора просмотра. • Проверка соответствия данных модели просмотра. • Возвращение нового вида домашней страницы при успешной привязке. 11:30 Статический вид домашней страницы • Компиляция возвращает домашнюю страницу, но она статична. • Изменение страницы на страницу процесса не меняет результат. • Необходимо вернуть определённый тип на основе viewmodel. 12:00 Проверка viewmodel и поиск представления • Проверка, содержит ли название viewmodel. • Поиск представления с тем же именем, но с «view» вместо «viewmodel». • Нулевая проверка данных перед возвратом. 13:32 Рефлексия и создание элемента управления • Получение типа viewmodel с помощью рефлексии. • Создание нового элемента управления на основе типа. • Привязка модели представления к представлению через контекст данных. 14:41 Пример с моделью просмотра страницы процесса • Получение модели просмотра страницы процесса. • Замена «viewmodel» на «view» в полном имени. • Создание нового экземпляра представления и привязка контекста данных. 15:26 Тестирование генерации представлений • Проверка работы генерации представлений с моделью просмотра «test». • Настройка datacontext для отображения содержимого. • Временное удаление стилей для тестирования. 16:58 Команды для переключения страниц • Создание команд для перехода на главную страницу и страницу процесса. • Привязка кнопок к командам для изменения текущей страницы. • Исправление ошибок при компиляции. 19:15 Стилизация активных страниц • Настройка цвета фона для активной страницы. • Обновление стилей для активного фона и наведения курсора. • Привязка стиля кнопки к активному состоянию страницы. 22:08 Обновление стилей при изменении страницы • Наблюдение за свойством текущей страницы. • Уведомление об изменении свойства для класса кнопок. • Повторное обновление стилей при изменении текущей страницы. 23:12 Стилизация остальных кнопок • Аналогичная настройка для кнопки «Обработать» и других кнопок. • Использование закрытого класса active button для краткости. 23:45 Открытие двойной панели • Обсуждение процесса нажатия кнопки и открытия двойной панели. • Упоминание о частной строке const и классе кнопки active. 24:07 Привязка и стилизация кнопок • Необходимость выполнения привязки для обновления изображения. • Добавление класса active к кнопке при её активации. • Работа со стилями: границы, надписи, кнопки и указатель мыши. 25:00 Работа с классами и привязками • Изменение фона на значение динамического ресурса primary active background. • Использование массива классов для упрощения задачи. • Привязка к определённому объекту и стилизация представления. 25:58 Свойства активных страниц 26:40 Визуальный стиль и навигация 27:19 Завершение работы
00:00 Введение и цели видео • В предыдущем видео было реализовано боковое меню и анимации. • Теперь нужно добавить страницы для навигации по приложению. • При нажатии на кнопку «Домой» должна загружаться домашняя страница, а при нажатии на другие страницы — соответствующие страницы. • Настройки можно сделать в виде всплывающего окна или переместить в главное окно. 00:44 Реализация навигации по страницам • Тема видео — реализация навигации по страницам. • Начало с изучения шаблона идентификатора в MVVM. • Шаблон идентификатора позволяет указывать моделям данных, какой вид должен загружаться. 01:18 Принцип работы шаблона идентификатора • Match проверяет, соответствует ли модель данных типу viewmodel. • Если совпадение найдено, вызывается метод build, который возвращает элемент управления. • Это позволяет привязывать элементы управления контентом и другие элементы пользовательского интерфейса. 03:33 Создание папок и видов • Создание папки «Просмотры» и перетаскивание в неё основного вида. • Создание пользовательского элемента управления Avalonia для домашней страницы. • Создание второй страницы — страницы процесса. 04:14 Настройка сетки и проверка работы • Размещение видов в сетке на главном экране. • Исправление ошибок с ресурсами и изображениями. • Временное добавление стилей для демонстрации работы страницы. 05:44 Динамическая привязка к viewmodel • Переход от привязки к конкретному виду к привязке к viewmodel. • Создание базы моделей приватного просмотра и концепции текущей страницы. • Привязка к observable свойству текущей страницы. 07:18 Реализация моделей просмотра страниц • Создание модели просмотра домашней страницы и страницы процесса. • Использование view locator для преобразования моделей просмотра в реальные виды. • Временное использование свойств для доказательства работы привязки. 08:43 Настройка конструктора и отладка • Установка текущей страницы по умолчанию в конструкторе. • Привязка содержимого к текущей странице. • Отладка с помощью точек останова для проверки работы привязки. 10:12 Добавление шаблонов данных приложения • Добавление шаблонов данных приложения и локатора просмотра. • Проверка соответствия данных модели просмотра. • Возвращение нового вида домашней страницы при успешной привязке. 11:30 Статический вид домашней страницы • Компиляция возвращает домашнюю страницу, но она статична. • Изменение страницы на страницу процесса не меняет результат. • Необходимо вернуть определённый тип на основе viewmodel. 12:00 Проверка viewmodel и поиск представления • Проверка, содержит ли название viewmodel. • Поиск представления с тем же именем, но с «view» вместо «viewmodel». • Нулевая проверка данных перед возвратом. 13:32 Рефлексия и создание элемента управления • Получение типа viewmodel с помощью рефлексии. • Создание нового элемента управления на основе типа. • Привязка модели представления к представлению через контекст данных. 14:41 Пример с моделью просмотра страницы процесса • Получение модели просмотра страницы процесса. • Замена «viewmodel» на «view» в полном имени. • Создание нового экземпляра представления и привязка контекста данных. 15:26 Тестирование генерации представлений • Проверка работы генерации представлений с моделью просмотра «test». • Настройка datacontext для отображения содержимого. • Временное удаление стилей для тестирования. 16:58 Команды для переключения страниц • Создание команд для перехода на главную страницу и страницу процесса. • Привязка кнопок к командам для изменения текущей страницы. • Исправление ошибок при компиляции. 19:15 Стилизация активных страниц • Настройка цвета фона для активной страницы. • Обновление стилей для активного фона и наведения курсора. • Привязка стиля кнопки к активному состоянию страницы. 22:08 Обновление стилей при изменении страницы • Наблюдение за свойством текущей страницы. • Уведомление об изменении свойства для класса кнопок. • Повторное обновление стилей при изменении текущей страницы. 23:12 Стилизация остальных кнопок • Аналогичная настройка для кнопки «Обработать» и других кнопок. • Использование закрытого класса active button для краткости. 23:45 Открытие двойной панели • Обсуждение процесса нажатия кнопки и открытия двойной панели. • Упоминание о частной строке const и классе кнопки active. 24:07 Привязка и стилизация кнопок • Необходимость выполнения привязки для обновления изображения. • Добавление класса active к кнопке при её активации. • Работа со стилями: границы, надписи, кнопки и указатель мыши. 25:00 Работа с классами и привязками • Изменение фона на значение динамического ресурса primary active background. • Использование массива классов для упрощения задачи. • Привязка к определённому объекту и стилизация представления. 25:58 Свойства активных страниц 26:40 Визуальный стиль и навигация 27:19 Завершение работы