03. Avalonia UI Real World View Model Basics

03. Реальный мир пользовательского интерфейса Avalonia Просмотр основ модели 00:00 Введение в viewmodels Viewmodels позволяют привязывать элементы пользовательского интерфейса к данным в фоновом режиме. Без viewmodels обновление интерфейса происходит вручную что неэффективно. Изменение данных в базе данных должно автоматически обновлять представление. 00:28 Установка инструментария В Avalonia используется инструментарий Community MVVM Toolkit. Установка инструментария через терминал: dotnet add package community.mvvm. Создание папки viewmodels и базовой модели представления. 01:20 Базовая модель представления Базовая модель представления наследуется от ObservableObject. ObservableObject управляет автоматическим запуском событий при изменении значений. 01:40 Модель главного окна Создание модели главного окна наследуемой от базовой модели. Переименование главного окна в MainView. Добавление свойства test с атрибутом observable. 04:12 Привязка данных Настройка контекста данных окна на основную модель представления. Привязка текста к свойству test в модели представления. Обновление пользовательского интерфейса при изменении данных. 06:00 Работа с контекстом данных Перенос настройки контекста данных в серверный код. Использование специального контекста данных design.data для предварительного просмотра. 08:24 Создание разборного меню Реализация функции сворачивания бокового меню. Привязка логического значения expandedSideMenu к видимости меню. Использование преобразователя значений для изменения изображения меню. 11:13 Настройка изображения бокового меню Создание приватного свойства для изображения бокового меню в формате SVG. Объявление свойства imageOfSideMenu как наблюдаемого. 11:31 Обновление изображения Avalonia Skia Добавление свойства notify для обновления изображения при изменении значения. Изменение названия свойства и его общедоступность. Создание исходного кода SVG и передача пути к ресурсу. 12:32 Генерация SVG-кода Получение исходного текста SVG вместо изображения. Создание нового изображения с установленным исходным кодом. Использование интерполированной строки для представления изображений ресурсов. 13:17 Настройка изображения Установка развёрнутого изображения как логотипа или свёрнутого изображения как значка. Обновление свойства notify при изменении расширенного бокового меню. Проверка работы логики обновления изображения. 14:26 Исправление ошибок URL Решение проблемы с относительным URL-адресом без базового URL-адреса. Указание проекта и пространства имён для корректной работы ресурсов. Тестирование обновления изображения при изменении значения. 15:27 Обработка двойного щелчка Подключение изображения к отображению при двойном щелчке мыши. Создание команды для обновления бокового меню. Реализация логики двойного щелчка и вызова команды. 16:19 Создание команды для бокового меню Определение команды для скрытия или показа меню. Привязка команды к контексту данных модели представления. Проверка нулевой безопасности и корректное выполнение команды. 18:54 Изменение размера изображения Обсуждение специфичности размера изображения для вида. Использование преобразователя значений для изменения размера изображения. Привязка видимости изображения к расширенному боковому меню. 21:05 Анимация бокового меню Настройка анимации расширения и сжатия бокового меню. Проблемы с высотой при анимации и возможные решения. Привязка ширины границы к ширине боковой панели для корректной анимации. 22:49 Анимация и модели просмотра Обсуждение возможности получения анимации при произвольной ширине. Идея наложения одного изображения на другое для создания эффекта сетки. Планирование стирания одного изображения и уменьшения другого по ширине. Фокус на моделях просмотра а не на анимации. 23:53 Основы моделей просмотра Объяснение использования команд и свойств для привязки функций и полей. Объединение элементов пользовательского интерфейса с помощью оператора привязки. Возвращение значения true по умолчанию. Переход к созданию страниц и обмену кнопками между ними. Подчёркивание важности основ моделей просмотра для быстрого продвижения в разработке.,

#