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 по умолчанию. • Переход к созданию страниц и обмену кнопками между ними. • Подчёркивание важности основ моделей просмотра для быстрого продвижения в разработке.
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 по умолчанию. • Переход к созданию страниц и обмену кнопками между ними. • Подчёркивание важности основ моделей просмотра для быстрого продвижения в разработке.