010. Avalonia UI - Flyout Control

Описание

010. Пользовательский интерфейс Avalonia - Всплывающее управление

00:00 Введение в всплывающее окно

• Обсуждение специфичности всплывающего окна для исходного кода и SAML.
• Упоминание о свойствах всплывающего элемента управления: «открыто», «размещение», «цель».
• Решение проверить использование всплывающего элемента управления на YouTube.

01:00 Тестирование всплывающего окна

• Вставка всплывающего окна в кнопку и проверка его работы.
• Обнаружение проблем: отсутствие анимации и неправильная позиция.

01:35 Настройка свойств всплывающего окна
• Прикрепление всплывающего окна к элементам управления без встроенной поддержки.
• Эксперименты с выравниванием нижнего и верхнего краёв по левому краю.

02:31 Проблемы с позиционированием
• Трудности с настройкой направления открытия всплывающего окна.
• Попытка выровнять верхний край по левому краю для вертикального открытия.

04:01 Стилизация всплывающего окна
• Начало стилизации всплывающего окна с помощью селектора.
• Удаление предустановленных стилей и настройка прозрачности, отступов и полей.

06:06 Анализ предопределённых границ
• Обнаружение предопределённых верхних и нижних границ всплывающего окна.
• Попытка создать пользовательский стиль с помощью прямоугольника.

07:03 Переопределение всплывающего окна
• Просмотр исходного кода всплывающего окна на GitHub.
• Переопределение всплывающего презентатора и поиск заранее подготовленных отступов.

09:16 Удаление отступов
• Использование отрицательных отступов для удаления запаса всплывающего окна.
• Настройка верхних и нижних границ на прозрачные для создания бесшовного стиля.

10:12 Создание пользовательского всплывающего окна
• Создание копии стандартного всплывающего окна для настройки вертикального смещения.
• Копирование содержимого класса и настройка смещения по вертикали.

12:36 Тестирование смещения
• Установка смещения по вертикали для всплывающего окна.
• Проверка эффекта изменения положения всплывающего окна.

13:38 Проблемы с всплывающим окном
• Всплывающее окно само определяет направление появления.
• При нажатии на кнопку вниз возникает странный эффект.
• Ошибки из-за проблем с всплывающим окном.

14:37 Анализ кода
• Код использует всплывающий класс, который является элементом управления.
• При открытии используется всплывающее сообщение с наложением.
• Обновление размера, установка дочерних элементов и положения требуют много работы.

15:44 Сложности анимации
• Анимация требует времени, а всплывающее окно либо есть, либо нет.
• Класс всплывающих окон не поддерживает анимацию и пользовательское позиционирование.
• Проблемы с мерцанием и непредсказуемым направлением появления.

16:35 Потенциал и ограничения
• Всплывающее окно игнорирует макет и появляется вне заданного положения.
• Отсутствие анимации и пользовательского позиционирования.
• Большой объём работы для отображения всплывающего окна.

17:15 Планы по улучшению
• Создание уникального пользовательского элемента управления для повторного использования.
• Запрос функции на GitHub для улучшения всплывающего окна.
• Поддержка анимации, вертикального и горизонтального смещения, определённого направления движения.

18:15 Родительский контроль
• Использование родительского элемента для определения положения всплывающего окна.
• Динамическое создание элемента управления с привязкой к сетке.
• Привязка свойств к элементу управления.

20:32 Прикрепление к кнопке
• Размещение элемента управления внутри кнопки как прикреплённого свойства.
• Определение родителя верхнего уровня для добавления всплывающего окна.
• Имитация поведения базового прикреплённого всплывающего экрана.

23:35 Создание нового стиля
• Замена элемента управления на пользовательский.
• Создание нового стиля «анимированное всплывающее окно».
• Добавление стиля в приложение и тестирование на главном экране.

25:26 Работа с шаблоном и содержимым
• Использование шаблона для управления содержимым.
• Необходимость задания имени для корректной работы.
• Настройка всплывающего окна с шаблонным элементом управления по умолчанию.

26:11 Проблемы с границей и выбор типа элемента
• Проблема с предопределённой границей, которая мешает правильной работе.
• Выбор между различными типами элементов управления: элемент ввода, макет, визуальный элемент.
• Создание нового типа элемента управления и его скрытие по умолчанию.

27:18 Управление контентом
• Изменение шаблона управления для свободного размещения контента.
• Использование элемента управления контентом для размещения ярлыка с контентом.
• Настройка переднего плана для лучшего отображения на чёрном фоне.

28:03 Стилизация и привязка контента
• Изменение шаблона управления для передачи фактического контента.
• Привязка содержимого к шаблону привязки содержимого.
• Добавление кнопки в содержимое элемента управления.

29:28 Определение анимированного всплывающего окна
30:27 Настройка z-индекса
31:57 Стилизация и выравнивание
33:35 Проверка работы и дальнейшие улучшения
36:12 Заключение