#15 C# WPF UI - Адаптивный дизайн управления с привязкой к модели представления
00:07 Введение и цель видео • В предыдущем видео создан всплывающий чат. • Цель текущего видео — создать всплывающее окно для отправляемых сообщений. • Оформление окна должно отличаться от окна для получаемых сообщений. 00:38 Создание модели представления • Для ускорения процесса модель представления не создавалась, а была привязана к списку. • Теперь нужно создать модель представления для сообщений чата. • В разделе core создаётся новая папка для модели представления. 02:17 Создание элемента списка сообщений чата • Переименование файла и копирование элемента из списка чата. • Добавление новых полей: имя отправителя, сообщение, инициалы, профиль, изображение. • Введение логического значения «отправлено этим пользователем» для стилизации элемента управления. 03:58 Дополнительные поля и свойства • Добавление поля «время прочтения сообщения» и свойства «сообщение помечено красным». • Использование смещения даты и времени для определения статуса сообщения. 06:42 Создание моделей представления для дизайна • Добавление папки «design» в папку «chat message». • Копирование модели представления для дизайна списка чатов. • Создание примеров сообщений с заполнением полей. 08:02 Настройка примеров сообщений • Заполнение полей имени отправителя, инициалов, сообщения и времени отправки. • Установка времени отправки и красного времени для каждого сообщения. 14:08 Привязка данных к элементу управления • Привязка данных к новой модели диаграммы. • Добавление контекста данных времени разработки. • Компиляция проекта для проверки привязки. 16:45 Проблемы с привязкой и их решение • Ошибка при привязке к инициалам. • Решение проблемы путём привязки к статическому экземпляру. 17:31 Привязка текста и времени • Привязываем текст и инициалы к сообщению. • Преобразуем время отправки сообщения в удобочитаемый формат. 18:18 Создание преобразователя времени • Копируем и вставляем преобразователь значений для работы с логическими значениями. • Преобразователь принимает дату и преобразует её в удобный для пользователя формат времени. 19:16 Проверка даты отправки • Проверяем, отправлено ли сообщение сегодня, используя выражение `time.date == dateTimeOffset.now.date`. • Если сообщение отправлено сегодня, выводим время, иначе — дату в другом формате. 20:24 Форматирование времени • Отображаем часы в 24-часовом формате и минуты. • Для 12-часового формата используем строчную букву `h`. • Для формата AM/PM ищем специальный символ в интернете. 22:07 Добавление конвертера времени • Добавляем конвертер времени к элементу управления временем отправки сообщения. • Компилируем конвертер и проверяем результат. 23:22 Настройка отображения времени и даты • Перемещаем текстовый блок в панель стека и изменяем ориентацию панели на горизонтальную. • Добавляем отступы между элементами. 24:17 Создание конвертера для красного времени • Создаём новый конвертер для отображения красного времени. • Изменяем цвет на тёмно-синий и добавляем слово «красный» к возвращаемому значению. 28:02 Привязка видимости и выравнивания • Привязываем видимость изображения профиля к параметру «Отправлено мной». • Создаём конвертер для выравнивания элементов по правому краю, если сообщение отправлено мной. 31:59 Привязка списка сообщений чата • Привязываем элемент управления списком сообщений чата к модели дизайна сообщений чата. • Проверяем выравнивание и отступы после привязки. 33:44 Финальные настройки • Выравниваем сетку по низу. • Добавляем отступы справа и раскрашиваем пузырь чата. 34:33 Настройка пространства и цвета • Создание идеально ровного пространства. • Раскрашивание синего цвета. • Добавление анимации для отображения времени при наведении курсора. 35:02 Изменение цвета фона • Настройка светло-голубого цвета фона. • Затемнение голубого цвета для выделения при наведении. • Привязка фона к свойству «Отправлено мной». 36:28 Реализация конвертера фона • Создание конвертера фона, который принимает логическое значение «Сообщение отправлено мной» и возвращает правильный цвет фона. • Использование application.current.findResource для получения цвета из файла ресурсов XAML. • Проверка работы обоих цветов фона. 38:37 Анимация при наведении курсора • Настройка анимации для появления текста при наведении курсора на элемент. • Использование grid.triggers для отслеживания триггеров событий. • Настройка целевого имени и свойства непрозрачности для анимации. 42:08 Устранение мерцания • Удаление свойства from для устранения резкого мерцания при быстром наведении и убирании курсора. • Плавный переход без мерцания. 44:14 Планы на будущее • Добавление верхней панели с кнопками. • Реализация функции поиска и выпадающего списка. • Добавление возможности печатать, пузырей для отображения картинок, эмодзи и ссылок на сайты. 46:12 Завершение и анонс следующего видео • Подведение итогов работы над элементом управления. • Анонс следующего видео о области написания сообщений. • Призыв к комментариям и пожеланиям зрителей.
00:07 Введение и цель видео • В предыдущем видео создан всплывающий чат. • Цель текущего видео — создать всплывающее окно для отправляемых сообщений. • Оформление окна должно отличаться от окна для получаемых сообщений. 00:38 Создание модели представления • Для ускорения процесса модель представления не создавалась, а была привязана к списку. • Теперь нужно создать модель представления для сообщений чата. • В разделе core создаётся новая папка для модели представления. 02:17 Создание элемента списка сообщений чата • Переименование файла и копирование элемента из списка чата. • Добавление новых полей: имя отправителя, сообщение, инициалы, профиль, изображение. • Введение логического значения «отправлено этим пользователем» для стилизации элемента управления. 03:58 Дополнительные поля и свойства • Добавление поля «время прочтения сообщения» и свойства «сообщение помечено красным». • Использование смещения даты и времени для определения статуса сообщения. 06:42 Создание моделей представления для дизайна • Добавление папки «design» в папку «chat message». • Копирование модели представления для дизайна списка чатов. • Создание примеров сообщений с заполнением полей. 08:02 Настройка примеров сообщений • Заполнение полей имени отправителя, инициалов, сообщения и времени отправки. • Установка времени отправки и красного времени для каждого сообщения. 14:08 Привязка данных к элементу управления • Привязка данных к новой модели диаграммы. • Добавление контекста данных времени разработки. • Компиляция проекта для проверки привязки. 16:45 Проблемы с привязкой и их решение • Ошибка при привязке к инициалам. • Решение проблемы путём привязки к статическому экземпляру. 17:31 Привязка текста и времени • Привязываем текст и инициалы к сообщению. • Преобразуем время отправки сообщения в удобочитаемый формат. 18:18 Создание преобразователя времени • Копируем и вставляем преобразователь значений для работы с логическими значениями. • Преобразователь принимает дату и преобразует её в удобный для пользователя формат времени. 19:16 Проверка даты отправки • Проверяем, отправлено ли сообщение сегодня, используя выражение `time.date == dateTimeOffset.now.date`. • Если сообщение отправлено сегодня, выводим время, иначе — дату в другом формате. 20:24 Форматирование времени • Отображаем часы в 24-часовом формате и минуты. • Для 12-часового формата используем строчную букву `h`. • Для формата AM/PM ищем специальный символ в интернете. 22:07 Добавление конвертера времени • Добавляем конвертер времени к элементу управления временем отправки сообщения. • Компилируем конвертер и проверяем результат. 23:22 Настройка отображения времени и даты • Перемещаем текстовый блок в панель стека и изменяем ориентацию панели на горизонтальную. • Добавляем отступы между элементами. 24:17 Создание конвертера для красного времени • Создаём новый конвертер для отображения красного времени. • Изменяем цвет на тёмно-синий и добавляем слово «красный» к возвращаемому значению. 28:02 Привязка видимости и выравнивания • Привязываем видимость изображения профиля к параметру «Отправлено мной». • Создаём конвертер для выравнивания элементов по правому краю, если сообщение отправлено мной. 31:59 Привязка списка сообщений чата • Привязываем элемент управления списком сообщений чата к модели дизайна сообщений чата. • Проверяем выравнивание и отступы после привязки. 33:44 Финальные настройки • Выравниваем сетку по низу. • Добавляем отступы справа и раскрашиваем пузырь чата. 34:33 Настройка пространства и цвета • Создание идеально ровного пространства. • Раскрашивание синего цвета. • Добавление анимации для отображения времени при наведении курсора. 35:02 Изменение цвета фона • Настройка светло-голубого цвета фона. • Затемнение голубого цвета для выделения при наведении. • Привязка фона к свойству «Отправлено мной». 36:28 Реализация конвертера фона • Создание конвертера фона, который принимает логическое значение «Сообщение отправлено мной» и возвращает правильный цвет фона. • Использование application.current.findResource для получения цвета из файла ресурсов XAML. • Проверка работы обоих цветов фона. 38:37 Анимация при наведении курсора • Настройка анимации для появления текста при наведении курсора на элемент. • Использование grid.triggers для отслеживания триггеров событий. • Настройка целевого имени и свойства непрозрачности для анимации. 42:08 Устранение мерцания • Удаление свойства from для устранения резкого мерцания при быстром наведении и убирании курсора. • Плавный переход без мерцания. 44:14 Планы на будущее • Добавление верхней панели с кнопками. • Реализация функции поиска и выпадающего списка. • Добавление возможности печатать, пузырей для отображения картинок, эмодзи и ссылок на сайты. 46:12 Завершение и анонс следующего видео • Подведение итогов работы над элементом управления. • Анонс следующего видео о области написания сообщений. • Призыв к комментариям и пожеланиям зрителей.