27. Avalonia UI Real World (Creating a Dialog)
00:00 Введение в проблему • Страница «Действия при печати» почти готова, но отсутствуют предупреждения при удалении элементов. • Решение: создать собственную диалоговую систему, так как стандартные диалоги Windows не подходят для мобильных устройств и других платформ. • Обнаружена ошибка: при нажатии кнопки «Создать действие» теряется возможность выбора нового элемента. 00:48 Начало разработки диалоговой системы • Использование внедрения зависимостей и viewmodels для упрощения работы. • Создание модели основного вида для главного окна. • Необходимость модели просмотра диалога для отображения предупреждений. 02:15 Базовая модель просмотра диалога • Разработка базового класса для диалогов, который будет соответствовать общим требованиям. • Реализация свойств для открытого и закрытого состояния диалога. • Добавление функций для отображения и закрытия диалога. 03:27 Асинхронные диалоги • Создание асинхронного диалога для ожидания его закрытия. • Использование источника завершения задачи для управления ожиданием. • Проверка состояния задачи перед её повторным созданием. 06:10 Подтверждающий диалог • Создание класса ConfirmDialogViewModel, наследуемого от DialogViewModel. • Добавление свойств для подтверждения и отмены диалога. • Настройка пользовательского интерфейса: заголовок, текст, кнопки, значок. 09:13 Создание пользовательского интерфейса • Разработка представления диалога подтверждения. • Использование локатора ViewModel для преобразования представления в ViewModel. • Настройка пространства имён, типа данных и контекста данных. 10:06 Завершение настройки интерфейса • Размещение элементов интерфейса на панели стека. • Добавление верхней строки заголовка с рамкой и градиентом фона. 10:32 Настройка текстового блока • Добавление текстового блока для визуализации данных. • Привязка текста к заголовку. • Установка красного фона для удобства работы. 11:01 Настройка текста и углов • Установка переднего плана как основного цвета для элемента управления. • Увеличение размера текста и использование жирного шрифта. • Сглаживание углов с помощью радиуса поворота. 12:13 Работа с границами и фоном • Настройка прозрачного фона. • Использование кисти для границы и динамического ресурса. • Решение проблемы с привязкой к границам путём добавления радиуса угла. 14:10 Добавление тени • Создание эффекта точки на границе. • Наложение эффекта тени и установка цвета. 15:07 Работа с цветами • Определение основных цветов фона. • Связывание с динамическим ресурсом для избежания дублирования. • Компиляция изображения для проверки результатов. 16:32 Создание диалогового окна • Добавление значка и описания в панель стека. • Настройка горизонтальной ориентации панели стека. • Вставка значка предупреждающего знака. 20:06 Настройка кнопок • Создание кнопок «Отмена» и «Подтвердить». • Привязка текста кнопок к соответствующим командам. • Настройка интервалов и выравнивания кнопок. 21:42 Интеграция диалога в приложение • Перенос диалога в основное представление. • Добавление диалога в viewmodel. • Привязка представления к диалогу для его отображения. 22:39 Создание наложения • Создание чёрного фона с непрозрачностью 0.5. • Размещение диалога внутри сетки. • Вставка элемента управления контентом и привязка содержимого к текущему диалогу viewmodel. 23:15 Проблема с конвертацией контента • Контент не конвертируется в представление. • Модель просмотра была ограничена из-за другой проблемы. • Добавление модели просмотра диалога может помочь решить проблему. 24:00 Создание подтверждённого диалога • Создание нового подтверждённого диалога. • Выравнивание диалога по центру по горизонтали и вертикали. • Проверка работы диалога в приложении. 24:59 Привязка представления к диалогу • Привязка кнопки внутри диалога к viewmodel для установки значения confirmed в true и вызова close. • Кнопка close вызывает диалоговое окно open как false. • Привязка viewmodel обеспечивает корректную работу диалога. 24:59 Основные принципы работы диалога • Диалог можно открывать и закрывать. • Возможность добавления анимаций для увеличения и уменьшения диалога. • Необходимость вызова диалога на странице действий. • Основные принципы работы диалога установлены, можно начинать думать о дальнейшей связке.
00:00 Введение в проблему • Страница «Действия при печати» почти готова, но отсутствуют предупреждения при удалении элементов. • Решение: создать собственную диалоговую систему, так как стандартные диалоги Windows не подходят для мобильных устройств и других платформ. • Обнаружена ошибка: при нажатии кнопки «Создать действие» теряется возможность выбора нового элемента. 00:48 Начало разработки диалоговой системы • Использование внедрения зависимостей и viewmodels для упрощения работы. • Создание модели основного вида для главного окна. • Необходимость модели просмотра диалога для отображения предупреждений. 02:15 Базовая модель просмотра диалога • Разработка базового класса для диалогов, который будет соответствовать общим требованиям. • Реализация свойств для открытого и закрытого состояния диалога. • Добавление функций для отображения и закрытия диалога. 03:27 Асинхронные диалоги • Создание асинхронного диалога для ожидания его закрытия. • Использование источника завершения задачи для управления ожиданием. • Проверка состояния задачи перед её повторным созданием. 06:10 Подтверждающий диалог • Создание класса ConfirmDialogViewModel, наследуемого от DialogViewModel. • Добавление свойств для подтверждения и отмены диалога. • Настройка пользовательского интерфейса: заголовок, текст, кнопки, значок. 09:13 Создание пользовательского интерфейса • Разработка представления диалога подтверждения. • Использование локатора ViewModel для преобразования представления в ViewModel. • Настройка пространства имён, типа данных и контекста данных. 10:06 Завершение настройки интерфейса • Размещение элементов интерфейса на панели стека. • Добавление верхней строки заголовка с рамкой и градиентом фона. 10:32 Настройка текстового блока • Добавление текстового блока для визуализации данных. • Привязка текста к заголовку. • Установка красного фона для удобства работы. 11:01 Настройка текста и углов • Установка переднего плана как основного цвета для элемента управления. • Увеличение размера текста и использование жирного шрифта. • Сглаживание углов с помощью радиуса поворота. 12:13 Работа с границами и фоном • Настройка прозрачного фона. • Использование кисти для границы и динамического ресурса. • Решение проблемы с привязкой к границам путём добавления радиуса угла. 14:10 Добавление тени • Создание эффекта точки на границе. • Наложение эффекта тени и установка цвета. 15:07 Работа с цветами • Определение основных цветов фона. • Связывание с динамическим ресурсом для избежания дублирования. • Компиляция изображения для проверки результатов. 16:32 Создание диалогового окна • Добавление значка и описания в панель стека. • Настройка горизонтальной ориентации панели стека. • Вставка значка предупреждающего знака. 20:06 Настройка кнопок • Создание кнопок «Отмена» и «Подтвердить». • Привязка текста кнопок к соответствующим командам. • Настройка интервалов и выравнивания кнопок. 21:42 Интеграция диалога в приложение • Перенос диалога в основное представление. • Добавление диалога в viewmodel. • Привязка представления к диалогу для его отображения. 22:39 Создание наложения • Создание чёрного фона с непрозрачностью 0.5. • Размещение диалога внутри сетки. • Вставка элемента управления контентом и привязка содержимого к текущему диалогу viewmodel. 23:15 Проблема с конвертацией контента • Контент не конвертируется в представление. • Модель просмотра была ограничена из-за другой проблемы. • Добавление модели просмотра диалога может помочь решить проблему. 24:00 Создание подтверждённого диалога • Создание нового подтверждённого диалога. • Выравнивание диалога по центру по горизонтали и вертикали. • Проверка работы диалога в приложении. 24:59 Привязка представления к диалогу • Привязка кнопки внутри диалога к viewmodel для установки значения confirmed в true и вызова close. • Кнопка close вызывает диалоговое окно open как false. • Привязка viewmodel обеспечивает корректную работу диалога. 24:59 Основные принципы работы диалога • Диалог можно открывать и закрывать. • Возможность добавления анимаций для увеличения и уменьшения диалога. • Необходимость вызова диалога на странице действий. • Основные принципы работы диалога установлены, можно начинать думать о дальнейшей связке.