014. Avalonia UI - Expander Control On Popup
00:00 Создание расширяемого элемента управления • Обсуждение необходимости поддержки расширяемого элемента управления. • Проблема с текущим всплывающим окном: установка размера один раз и отсутствие его изменения. • Создание расширителя и добавление содержимого. 00:57 Настройка расширителя • Проверка состояния расширителя и присвоение свойства `expanded` значения `true`. • Проблема фиксации высоты при расширении. 01:24 Тестирование расширителя в сетке • Вставка расширителя в рамку и наблюдение за его расширением в сетке. • Ожидание поведения, аналогичного обычному всплывающему элементу управления. 02:28 Анимация элемента управления • Объяснение процесса анимации элемента управления до и обратно. • Установка ширины и высоты для активации анимации. 04:00 Проблемы с контрольными точками • Трудности с получением контрольных точек при отладке. • Решение проблемы путём установки ширины и высоты в `NaN`. 06:10 Обновление желаемого размера • Определение момента для обновления желаемого размера при закрытии панели управления. • Использование систем защиты от сбоев для предотвращения дублирования кода. 10:04 Финальная настройка анимации • Обновление желаемого размера на основе текущего размера элемента управления. • Проверка завершения анимации перед обновлением размера. 12:14 Тестирование и завершение • Тестирование анимации и подтверждение её гладкости. • Подтверждение надёжной поддержки расширяемого всплывающего окна. 12:58 Добавление свойства непрозрачности анимации • Создание логического свойства непрозрачности анимации с значением `true` по умолчанию. 13:23 Анимация непрозрачности • Копируем и вставляем код для анимации непрозрачности наложения. • Устанавливаем анимацию непрозрачности на основе свойства. • Сохраняем исходную непрозрачность для элемента управления. 13:57 Проверка анимации • Проверяем, что при полном открытии непрозрачность сбрасывается до исходного значения. • Учитываем, что при короткой анимации непрозрачность может быть ниже 100%. 14:20 Создание расширителя анимации • Создаём модель представления с списком списков для четырёх расширителей. • Каждый элемент списка будет иметь заголовок и подконтент. • Привязываем модель представления к пользовательскому интерфейсу. • В пользовательском интерфейсе появится список с расширителями, привязанными к другому списку. 14:20 Итоги • Поддерживаем расширение и сворачивание с помощью контроля. • Добавляем приятную затухающую непрозрачность.
00:00 Создание расширяемого элемента управления • Обсуждение необходимости поддержки расширяемого элемента управления. • Проблема с текущим всплывающим окном: установка размера один раз и отсутствие его изменения. • Создание расширителя и добавление содержимого. 00:57 Настройка расширителя • Проверка состояния расширителя и присвоение свойства `expanded` значения `true`. • Проблема фиксации высоты при расширении. 01:24 Тестирование расширителя в сетке • Вставка расширителя в рамку и наблюдение за его расширением в сетке. • Ожидание поведения, аналогичного обычному всплывающему элементу управления. 02:28 Анимация элемента управления • Объяснение процесса анимации элемента управления до и обратно. • Установка ширины и высоты для активации анимации. 04:00 Проблемы с контрольными точками • Трудности с получением контрольных точек при отладке. • Решение проблемы путём установки ширины и высоты в `NaN`. 06:10 Обновление желаемого размера • Определение момента для обновления желаемого размера при закрытии панели управления. • Использование систем защиты от сбоев для предотвращения дублирования кода. 10:04 Финальная настройка анимации • Обновление желаемого размера на основе текущего размера элемента управления. • Проверка завершения анимации перед обновлением размера. 12:14 Тестирование и завершение • Тестирование анимации и подтверждение её гладкости. • Подтверждение надёжной поддержки расширяемого всплывающего окна. 12:58 Добавление свойства непрозрачности анимации • Создание логического свойства непрозрачности анимации с значением `true` по умолчанию. 13:23 Анимация непрозрачности • Копируем и вставляем код для анимации непрозрачности наложения. • Устанавливаем анимацию непрозрачности на основе свойства. • Сохраняем исходную непрозрачность для элемента управления. 13:57 Проверка анимации • Проверяем, что при полном открытии непрозрачность сбрасывается до исходного значения. • Учитываем, что при короткой анимации непрозрачность может быть ниже 100%. 14:20 Создание расширителя анимации • Создаём модель представления с списком списков для четырёх расширителей. • Каждый элемент списка будет иметь заголовок и подконтент. • Привязываем модель представления к пользовательскому интерфейсу. • В пользовательском интерфейсе появится список с расширителями, привязанными к другому списку. 14:20 Итоги • Поддерживаем расширение и сворачивание с помощью контроля. • Добавляем приятную затухающую непрозрачность.