#20 C# WPF UI - Создание вертикального всплывающего меню
00:08 Создание модели представления для меню • Заполняем всплывающее окно реальным меню. • Создаём новую папку в модели представления для меню. • Разделяем визуальную и функциональную составляющие меню. 01:07 Разработка модели представления элемента меню • Создаём новую модель представления элемента меню. • Убираем ненужные пространства имён. • Настраиваем базовую модель представления. 02:30 Определение свойств меню • Определяем свойства: иконка и текст. • Добавляем перечисление типов меню: текст, иконка, разделитель, заголовок. 04:48 Перечисление типов иконок • Создаём перечисление типов иконок. • Планируем конвертеры для преобразования типов иконок в реальные изображения. 06:52 Структура модели представления меню • Создаём базовую структуру модели представления меню. • Включаем список моделей представления пунктов меню. 08:50 Создание пользовательского элемента управления • Создаём новый пользовательский элемент управления для меню. • Убираем лишние элементы управления и пространства имён. 10:01 Настройка шаблона элемента управления • Оформляем элемент управления items. • Связываем шаблон элемента с моделью дизайна. 10:54 Разработка модели дизайна меню • Добавляем папку design и класс для модели дизайна меню. • Настраиваем контекст данных для меню. 15:23 Привязка данных к дизайну меню • Привязываем контекст данных к модели времени разработки. • Компилируем проект и проверяем работу меню. 17:08 Стилизация элементов меню • Стилизуем элементы меню: заголовки, разделители, элементы меню. • Привязываем видимость элементов к перечислению типов меню. • Используем сетку для размещения элементов и поддержки разных стилей. 18:03 Настройка внешнего вида меню • Фон элемента меню будет белым. • Скруглённые углы с радиусом около 8. • Возможность добавления курсора в виде руки при наведении. 19:00 Добавление текста и иконки • Использование текстового блока и сетки для отображения текста и иконки. • Определение двух столбцов: один для иконки, другой для текста. • Ширина первого столбца автоматическая, второй занимает оставшееся место. 21:14 Настройка отступов и цвета • Добавление отступов вокруг элемента. • Удаление ширины и высоты из конструктора для масштабирования элемента. • Изменение цвета переднего плана на более приятный. 22:23 Выравнивание элементов • Выравнивание текста и иконки по вертикали. • Добавление отступов слева и справа для улучшения внешнего вида. 23:20 Работа с всплывающим меню • Изменение модели представления всплывающего меню с вложениями в чате. • Привязка к базовой модели представления всплывающего меню. • Добавление вертикального меню в качестве типа. 24:40 Создание модели представления меню • Привязка меню к модели дизайна меню. • Создание различных типов пользовательских интерфейсов для моделей представления меню. 26:19 Привязка к реальным данным • Создание новой модели представления элемента меню с текстом «Прикрепить файлы». • Различие между моделью разработки и реальными данными. 32:23 Работа с конвертером значений • Создание универсальной модели представления content. • Привязка content к модели представления всплывающего меню. • Разработка конвертера значений для преобразования базовой модели представления в конкретную модель. 34:00 Проверка работы конвертера • Проверка работы конвертера с помощью условия if value is. • Возврат конкретной модели представления в зависимости от типа прикрепления к чату. 34:48 Создание вертикального меню • Установка контекста данных для вертикального меню. • Добавление всплывающего конвертера содержимого. 35:16 Работа с конвертером содержимого • Объяснение работы конвертера содержимого. • Решение проблемы с неработающим конвертером. 36:17 Настройка контекста данных • Привязка контекста данных к меню вложений. • Переименование класса для улучшения структуры кода. 36:48 Привязка элемента управления содержимым • Привязка элемента управления содержимым к всплывающему меню вложений для чата. • Ошибка в привязке к родительскому элементу вместо модели представления меню. 37:48 Проверка типа содержимого • Проверка соответствия типа содержимого в конвертере значений. • Привязка вертикального меню к содержимому на основе типа. 39:24 Исправление пользовательского интерфейса 40:54 Добавление заголовка 42:00 Стилизация заголовка 45:11 Конвертер типа элемента меню 49:38 Тестирование конвертера 51:34 Завершение настройки 52:02 Настройка отступов и всплывающего окна 53:20 Добавление оверлея для закрытия меню 54:20 Привязка видимости оверлея 56:49 Привязка команд к событиям 01:00:38 Решение проблем с Z-индексом 01:03:27 Добавление эффектов наведения 01:06:38 Настройка текста и анимации 01:07:09 Настройка анимации цветов 01:08:26 Проблемы с анимацией 01:09:21 Настройка шрифтов и анимации 01:10:48 Перенос стилей в ядро 01:12:24 Реализация конвертера 01:15:44 Использование конвертера 01:19:32 Добавление реакции на клик 01:20:30 Планы на будущее
00:08 Создание модели представления для меню • Заполняем всплывающее окно реальным меню. • Создаём новую папку в модели представления для меню. • Разделяем визуальную и функциональную составляющие меню. 01:07 Разработка модели представления элемента меню • Создаём новую модель представления элемента меню. • Убираем ненужные пространства имён. • Настраиваем базовую модель представления. 02:30 Определение свойств меню • Определяем свойства: иконка и текст. • Добавляем перечисление типов меню: текст, иконка, разделитель, заголовок. 04:48 Перечисление типов иконок • Создаём перечисление типов иконок. • Планируем конвертеры для преобразования типов иконок в реальные изображения. 06:52 Структура модели представления меню • Создаём базовую структуру модели представления меню. • Включаем список моделей представления пунктов меню. 08:50 Создание пользовательского элемента управления • Создаём новый пользовательский элемент управления для меню. • Убираем лишние элементы управления и пространства имён. 10:01 Настройка шаблона элемента управления • Оформляем элемент управления items. • Связываем шаблон элемента с моделью дизайна. 10:54 Разработка модели дизайна меню • Добавляем папку design и класс для модели дизайна меню. • Настраиваем контекст данных для меню. 15:23 Привязка данных к дизайну меню • Привязываем контекст данных к модели времени разработки. • Компилируем проект и проверяем работу меню. 17:08 Стилизация элементов меню • Стилизуем элементы меню: заголовки, разделители, элементы меню. • Привязываем видимость элементов к перечислению типов меню. • Используем сетку для размещения элементов и поддержки разных стилей. 18:03 Настройка внешнего вида меню • Фон элемента меню будет белым. • Скруглённые углы с радиусом около 8. • Возможность добавления курсора в виде руки при наведении. 19:00 Добавление текста и иконки • Использование текстового блока и сетки для отображения текста и иконки. • Определение двух столбцов: один для иконки, другой для текста. • Ширина первого столбца автоматическая, второй занимает оставшееся место. 21:14 Настройка отступов и цвета • Добавление отступов вокруг элемента. • Удаление ширины и высоты из конструктора для масштабирования элемента. • Изменение цвета переднего плана на более приятный. 22:23 Выравнивание элементов • Выравнивание текста и иконки по вертикали. • Добавление отступов слева и справа для улучшения внешнего вида. 23:20 Работа с всплывающим меню • Изменение модели представления всплывающего меню с вложениями в чате. • Привязка к базовой модели представления всплывающего меню. • Добавление вертикального меню в качестве типа. 24:40 Создание модели представления меню • Привязка меню к модели дизайна меню. • Создание различных типов пользовательских интерфейсов для моделей представления меню. 26:19 Привязка к реальным данным • Создание новой модели представления элемента меню с текстом «Прикрепить файлы». • Различие между моделью разработки и реальными данными. 32:23 Работа с конвертером значений • Создание универсальной модели представления content. • Привязка content к модели представления всплывающего меню. • Разработка конвертера значений для преобразования базовой модели представления в конкретную модель. 34:00 Проверка работы конвертера • Проверка работы конвертера с помощью условия if value is. • Возврат конкретной модели представления в зависимости от типа прикрепления к чату. 34:48 Создание вертикального меню • Установка контекста данных для вертикального меню. • Добавление всплывающего конвертера содержимого. 35:16 Работа с конвертером содержимого • Объяснение работы конвертера содержимого. • Решение проблемы с неработающим конвертером. 36:17 Настройка контекста данных • Привязка контекста данных к меню вложений. • Переименование класса для улучшения структуры кода. 36:48 Привязка элемента управления содержимым • Привязка элемента управления содержимым к всплывающему меню вложений для чата. • Ошибка в привязке к родительскому элементу вместо модели представления меню. 37:48 Проверка типа содержимого • Проверка соответствия типа содержимого в конвертере значений. • Привязка вертикального меню к содержимому на основе типа. 39:24 Исправление пользовательского интерфейса 40:54 Добавление заголовка 42:00 Стилизация заголовка 45:11 Конвертер типа элемента меню 49:38 Тестирование конвертера 51:34 Завершение настройки 52:02 Настройка отступов и всплывающего окна 53:20 Добавление оверлея для закрытия меню 54:20 Привязка видимости оверлея 56:49 Привязка команд к событиям 01:00:38 Решение проблем с Z-индексом 01:03:27 Добавление эффектов наведения 01:06:38 Настройка текста и анимации 01:07:09 Настройка анимации цветов 01:08:26 Проблемы с анимацией 01:09:21 Настройка шрифтов и анимации 01:10:48 Перенос стилей в ядро 01:12:24 Реализация конвертера 01:15:44 Использование конвертера 01:19:32 Добавление реакции на клик 01:20:30 Планы на будущее