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 Заключение

Источник: rutube.ru