#14 C# WPF UI - Создание баббл-сообщений в чате
00:08 Исправление элементов управления • Обнаружены проблемы с размером элемента управления и отсутствием тени. • Вернули padding для восстановления тени. 01:53 Настройка размера элементов • Удалили жёсткое задание высоты элементов управления. • Использовали аватарку для явного задания размера элемента. • Добавили отступы сверху и снизу для увеличения пространства. 03:53 Работа со шрифтами • Переименовали и изменили размеры шрифтов. • Объединили «средний» и «обычный» размеры. • Заменили «большой» размер на «очень большой». 09:24 Настройка стандартного размера шрифта • Установили стандартный размер шрифта по умолчанию. • Исправили размер шрифта в поле для ввода пароля и кнопках. 13:19 Проверка и корректировка меню • Исправили размер шрифта в боковом меню и кнопках с иконками. • Добавили свободное пространство между текстами для улучшения внешнего вида. 14:25 Завершение настройки • Проверили результат и убедились в правильности настроек. • Подготовили приложение к добавлению всплывающих окон чата. 14:40 Работа с элементом управления списком чатов • Добавление отступов к текстовым блокам. • Настройка расположения элементов в левом верхнем углу. • Проверка результата с помощью F5. 15:52 Копирование и переименование элемента управления • Копирование существующего элемента управления списком чатов. • Переименование скопированного элемента в «Элемент управления списком сообщений чата». • Проблемы с переименованием файла XAML и решение вручную. 19:44 Создание нового элемента управления • Добавление нового элемента управления списком сообщений чата. • Организация кода в папки для удобства работы. • Удаление лишних пространств имён и неиспользуемых элементов. 21:24 Тестирование нового элемента управления • Изменение сетки на красную и сохранение изменений. • Замена текстового блока на элемент управления списком сообщений чата на странице чата. • Проверка отображения элементов управления. 23:30 Разработка окна чата • Удаление фиксированной высоты элемента управления. • Планирование создания окна чата с возможностью отображения различных типов контента: текста, фотографий, видео. • Идея создания хоста, который будет внедрять элементы управления на основе содержимого сообщения. 25:17 Создание пузыря чата • Добавление синего фона для наглядности. • Создание рамки с закруглёнными углами. • Добавление текстового поля и настройка отступов для текста. • Изменение цвета шрифта на тёмно-синий и его толщины. 28:16 Завершение работы над пузырём чата • Проверка отображения текста и границы пузыря. • Финальные настройки цвета шрифта и фона. • Финальная проверка результата с помощью F5. 29:01 Исправление фона и обводок • Убираем белый фон и возвращаем синий цвет. • В XAML-файле элемента управления списком сообщений чата удаляем белый фон. • Список должен стать прозрачным, чтобы виден был только синий фон. 29:58 Настройка размера текста • Текст должен соответствовать размеру реального текста, а не занимать всю ширину. • Для временного возврата фона делаем текст очень мелким. 30:29 Добавление элементов интерфейса • Добавляем фон в виде пузырька и маленький треугольник. • Вводим красный текст с указанием времени. 30:53 Создание аватарки • Добавляем кружок-аватарку с вертикальной и горизонтальной линиями. • Располагаем аватарку в левом верхнем углу пузырька чата. • Радиус скругления равен фактической ширине элемента управления. 31:39 Организация элементов в сетке • Создаём контейнер для содержимого чата. • Добавляем отступ в 25 пикселей слева. • Сдвигаем элемент, чтобы увидеть аватарку. 33:00 Настройка текстового поля • Размещаем текстовое поле с тестовыми данными. • Выравниваем текст по центру, выделяем белым шрифтом, делаем его жирнее. 33:57 Создание треугольника • Обсуждаются способы создания фигур в WPF, включая использование Inkscape, Photoshop или Illustrator. • Для простого треугольника используем ручной код. 36:19 Работа с контурами • Объясняется использование начальных точек M и координат X, Y. • Различие между абсолютным и относительным позиционированием. 41:05 Визуализация треугольника • Визуализируем треугольник, используя сетку с координатами 0, 0, 10, 10. • Проводим линии для создания треугольника, используя абсолютное позиционирование. 42:04 Завершение треугольника • Рисуем треугольник, перемещаясь по осям X и Y. • Добавляем заливку для света на переднем плане. • Обсуждается необходимость закрытия линии для обводки контура. 43:03 Работа с контуром и отступами • Удаление обводки путём установки толщины на ноль. • Перемещение контура с помощью отступов. • Настройка левого и правого полей для выравнивания элемента. 44:55 Исправление артефактов • Обнаружение артефакта между графическими элементами. • Попытка исправления с помощью Z-индекса. • Объяснение проблемы с аппаратным рендерингом и округлением пикселей. 46:47 Добавление отступов к аватарке 48:03 Добавление текста 50:44 Проблемы с расширением пузыря чата 54:21 Завершение и планы на будущее 55:15 Заключение
00:08 Исправление элементов управления • Обнаружены проблемы с размером элемента управления и отсутствием тени. • Вернули padding для восстановления тени. 01:53 Настройка размера элементов • Удалили жёсткое задание высоты элементов управления. • Использовали аватарку для явного задания размера элемента. • Добавили отступы сверху и снизу для увеличения пространства. 03:53 Работа со шрифтами • Переименовали и изменили размеры шрифтов. • Объединили «средний» и «обычный» размеры. • Заменили «большой» размер на «очень большой». 09:24 Настройка стандартного размера шрифта • Установили стандартный размер шрифта по умолчанию. • Исправили размер шрифта в поле для ввода пароля и кнопках. 13:19 Проверка и корректировка меню • Исправили размер шрифта в боковом меню и кнопках с иконками. • Добавили свободное пространство между текстами для улучшения внешнего вида. 14:25 Завершение настройки • Проверили результат и убедились в правильности настроек. • Подготовили приложение к добавлению всплывающих окон чата. 14:40 Работа с элементом управления списком чатов • Добавление отступов к текстовым блокам. • Настройка расположения элементов в левом верхнем углу. • Проверка результата с помощью F5. 15:52 Копирование и переименование элемента управления • Копирование существующего элемента управления списком чатов. • Переименование скопированного элемента в «Элемент управления списком сообщений чата». • Проблемы с переименованием файла XAML и решение вручную. 19:44 Создание нового элемента управления • Добавление нового элемента управления списком сообщений чата. • Организация кода в папки для удобства работы. • Удаление лишних пространств имён и неиспользуемых элементов. 21:24 Тестирование нового элемента управления • Изменение сетки на красную и сохранение изменений. • Замена текстового блока на элемент управления списком сообщений чата на странице чата. • Проверка отображения элементов управления. 23:30 Разработка окна чата • Удаление фиксированной высоты элемента управления. • Планирование создания окна чата с возможностью отображения различных типов контента: текста, фотографий, видео. • Идея создания хоста, который будет внедрять элементы управления на основе содержимого сообщения. 25:17 Создание пузыря чата • Добавление синего фона для наглядности. • Создание рамки с закруглёнными углами. • Добавление текстового поля и настройка отступов для текста. • Изменение цвета шрифта на тёмно-синий и его толщины. 28:16 Завершение работы над пузырём чата • Проверка отображения текста и границы пузыря. • Финальные настройки цвета шрифта и фона. • Финальная проверка результата с помощью F5. 29:01 Исправление фона и обводок • Убираем белый фон и возвращаем синий цвет. • В XAML-файле элемента управления списком сообщений чата удаляем белый фон. • Список должен стать прозрачным, чтобы виден был только синий фон. 29:58 Настройка размера текста • Текст должен соответствовать размеру реального текста, а не занимать всю ширину. • Для временного возврата фона делаем текст очень мелким. 30:29 Добавление элементов интерфейса • Добавляем фон в виде пузырька и маленький треугольник. • Вводим красный текст с указанием времени. 30:53 Создание аватарки • Добавляем кружок-аватарку с вертикальной и горизонтальной линиями. • Располагаем аватарку в левом верхнем углу пузырька чата. • Радиус скругления равен фактической ширине элемента управления. 31:39 Организация элементов в сетке • Создаём контейнер для содержимого чата. • Добавляем отступ в 25 пикселей слева. • Сдвигаем элемент, чтобы увидеть аватарку. 33:00 Настройка текстового поля • Размещаем текстовое поле с тестовыми данными. • Выравниваем текст по центру, выделяем белым шрифтом, делаем его жирнее. 33:57 Создание треугольника • Обсуждаются способы создания фигур в WPF, включая использование Inkscape, Photoshop или Illustrator. • Для простого треугольника используем ручной код. 36:19 Работа с контурами • Объясняется использование начальных точек M и координат X, Y. • Различие между абсолютным и относительным позиционированием. 41:05 Визуализация треугольника • Визуализируем треугольник, используя сетку с координатами 0, 0, 10, 10. • Проводим линии для создания треугольника, используя абсолютное позиционирование. 42:04 Завершение треугольника • Рисуем треугольник, перемещаясь по осям X и Y. • Добавляем заливку для света на переднем плане. • Обсуждается необходимость закрытия линии для обводки контура. 43:03 Работа с контуром и отступами • Удаление обводки путём установки толщины на ноль. • Перемещение контура с помощью отступов. • Настройка левого и правого полей для выравнивания элемента. 44:55 Исправление артефактов • Обнаружение артефакта между графическими элементами. • Попытка исправления с помощью Z-индекса. • Объяснение проблемы с аппаратным рендерингом и округлением пикселей. 46:47 Добавление отступов к аватарке 48:03 Добавление текста 50:44 Проблемы с расширением пузыря чата 54:21 Завершение и планы на будущее 55:15 Заключение