#30 C# WPF - Отправка сообщения с изображением
00:07 Начало работы с приложением Faceta Word • Добавление возможности отправки сообщений и просмотра сообщений с картинками. • Корректировка модели просмотра для элемента сообщения в чате. • Создание вложения для изображения или файла. 01:06 Обработка вложений • Определение типа файла и обработка данных с сервера. • Создание модели просмотра для каждого типа вложений. • Пример обработки ссылки на веб-сайт: отображение мини-картинки. 02:00 Создание модели просмотра вложений изображений • Копирование и вставка модели просмотра элементов списка сообщений в чате. • Изменение названия модели на «Модель просмотра вложений изображений элементов списка сообщений в чате». 02:43 Свойства вложений • Добавление названия изображения, размера файла и исходного имени файла. • Указание типа файла или расширения. • Возможность обработки файлов PNG или JPEG отдельно. 04:36 Работа с миниатюрами • Создание региона и добавление миниатюры приватной строки M. • Проверка комментариев в приватной беседе. 07:23 Загрузка и кэширование изображений • Загрузка миниатюры изображения с веб-сайта. • Сохранение файла в локальном хранилище и кэширование. • Указание локального пути к файлу для отображения изображения в XAML2. 08:56 Тестирование пользовательского интерфейса • Имитация загрузки изображения по URL. • Использование образца изображения для тестирования пользовательского интерфейса. • Переименование класса модели представления. 09:54 Включение элементов в список сообщений чата • Включение модели представления в список сообщений чата. • Добавление общедоступного, длинного названия и прикреплённого изображения. 10:22 Рекомендации по вложениям в сообщениях • Рекомендуется, чтобы одно сообщение содержало только одно вложение. • Проблемы с несколькими вложениями: сохранение кэша, восстановление и очистка файлов. • Дополнительные требования к пользовательскому интерфейсу для управления вложениями. 11:18 Преимущества одного вложения • Возможность комментирования сообщения без дополнительных действий. • Пример отправки нескольких изображений через отдельные сообщения. 12:18 Модели представления вложений • Создание отдельных моделей для разных типов вложений, например, PDF-файлов и видео. • Визуальное отображение вложений в зависимости от их типа. 13:38 Вспомогательные свойства для пользовательского интерфейса • Добавление логического значения для определения наличия сообщения. • Проверка наличия изображения и текста в сообщении. 15:27 Настройка модели представления элементов списка • Добавление графического сообщения с изображением. • Настройка URL-адреса миниатюры изображения. 17:22 Разделение пользовательского интерфейса • Отделение элементов пользовательского интерфейса для отображения изображения и текста. • Создание сетки для вложений в текст сообщения. 19:16 Завершение настройки интерфейса • Добавление второй сетки для сообщений в чате. • Финальная настройка интерфейса для отображения сообщений с изображениями. 19:47 Перемещение элементов • Переместили речевой пузырь и якорь из верхней сетки в основную сетку контейнеров и подсеть. • Сетка должна быть в первой строке, чтобы текст отображался под изображением. • Добавили ряд для сетки, так как изначально был ряд. 20:45 Удаление строки и создание новой сетки • Удалили одну из строк из верхней сетки, так как теперь есть вспомогательный элемент. • Создали новую основную сетку с двумя строками: одна для изображения, другая для текстового пузырька. • Внутри указали вторую сетку для текстового пузырька с двумя строками. 21:41 Настройка видимости сообщения • Создали новый конвертер для настройки видимости сообщения. • Конвертер видимости выполняет функцию скрытия, но нужно сделать пузырь полностью свернутым и невидимым. • Инвертировали значения видимости: true — видно, false — свернуто. 22:36 Переименование и инвертирование конвертера • Переименовали файл преобразователя логического значения в видимость. • Инвертировали логику: если true, то видно, если false, то свернуто. • Использовали ярлык для инвертирования: удерживая клавишу Alt, нажимали вниз. 23:46 Отображение изображения • Для отображения изображения нужна рамка с радиусом угла. • Изображение находится внутри модели просмотра изображения. • Передали изображение в качестве контекста данных, используя локальный путь к файлу. 25:12 Проверка отображения изображения • Удалили привязку изображения. • Добавили отступы внизу для улучшения отображения. • Перепроверили отображение изображения. 26:13 Настройка размеров изображения 27:37 Решение проблемы с углами 28:37 Реализация свойств 31:17 Обработка событий изменения размера 32:08 Оптимизация обработчиков событий 37:44 Создание вспомогательной функции 38:45 Инициализация переменных и проблема с self 40:48 Проверка реального размера границы 42:19 Настройка радиуса углов прямоугольника 45:07 Присвоение области обрезки дочернему элементу 46:41 Тестирование и добавление задержки загрузки 48:15 Планы на будущее
00:07 Начало работы с приложением Faceta Word • Добавление возможности отправки сообщений и просмотра сообщений с картинками. • Корректировка модели просмотра для элемента сообщения в чате. • Создание вложения для изображения или файла. 01:06 Обработка вложений • Определение типа файла и обработка данных с сервера. • Создание модели просмотра для каждого типа вложений. • Пример обработки ссылки на веб-сайт: отображение мини-картинки. 02:00 Создание модели просмотра вложений изображений • Копирование и вставка модели просмотра элементов списка сообщений в чате. • Изменение названия модели на «Модель просмотра вложений изображений элементов списка сообщений в чате». 02:43 Свойства вложений • Добавление названия изображения, размера файла и исходного имени файла. • Указание типа файла или расширения. • Возможность обработки файлов PNG или JPEG отдельно. 04:36 Работа с миниатюрами • Создание региона и добавление миниатюры приватной строки M. • Проверка комментариев в приватной беседе. 07:23 Загрузка и кэширование изображений • Загрузка миниатюры изображения с веб-сайта. • Сохранение файла в локальном хранилище и кэширование. • Указание локального пути к файлу для отображения изображения в XAML2. 08:56 Тестирование пользовательского интерфейса • Имитация загрузки изображения по URL. • Использование образца изображения для тестирования пользовательского интерфейса. • Переименование класса модели представления. 09:54 Включение элементов в список сообщений чата • Включение модели представления в список сообщений чата. • Добавление общедоступного, длинного названия и прикреплённого изображения. 10:22 Рекомендации по вложениям в сообщениях • Рекомендуется, чтобы одно сообщение содержало только одно вложение. • Проблемы с несколькими вложениями: сохранение кэша, восстановление и очистка файлов. • Дополнительные требования к пользовательскому интерфейсу для управления вложениями. 11:18 Преимущества одного вложения • Возможность комментирования сообщения без дополнительных действий. • Пример отправки нескольких изображений через отдельные сообщения. 12:18 Модели представления вложений • Создание отдельных моделей для разных типов вложений, например, PDF-файлов и видео. • Визуальное отображение вложений в зависимости от их типа. 13:38 Вспомогательные свойства для пользовательского интерфейса • Добавление логического значения для определения наличия сообщения. • Проверка наличия изображения и текста в сообщении. 15:27 Настройка модели представления элементов списка • Добавление графического сообщения с изображением. • Настройка URL-адреса миниатюры изображения. 17:22 Разделение пользовательского интерфейса • Отделение элементов пользовательского интерфейса для отображения изображения и текста. • Создание сетки для вложений в текст сообщения. 19:16 Завершение настройки интерфейса • Добавление второй сетки для сообщений в чате. • Финальная настройка интерфейса для отображения сообщений с изображениями. 19:47 Перемещение элементов • Переместили речевой пузырь и якорь из верхней сетки в основную сетку контейнеров и подсеть. • Сетка должна быть в первой строке, чтобы текст отображался под изображением. • Добавили ряд для сетки, так как изначально был ряд. 20:45 Удаление строки и создание новой сетки • Удалили одну из строк из верхней сетки, так как теперь есть вспомогательный элемент. • Создали новую основную сетку с двумя строками: одна для изображения, другая для текстового пузырька. • Внутри указали вторую сетку для текстового пузырька с двумя строками. 21:41 Настройка видимости сообщения • Создали новый конвертер для настройки видимости сообщения. • Конвертер видимости выполняет функцию скрытия, но нужно сделать пузырь полностью свернутым и невидимым. • Инвертировали значения видимости: true — видно, false — свернуто. 22:36 Переименование и инвертирование конвертера • Переименовали файл преобразователя логического значения в видимость. • Инвертировали логику: если true, то видно, если false, то свернуто. • Использовали ярлык для инвертирования: удерживая клавишу Alt, нажимали вниз. 23:46 Отображение изображения • Для отображения изображения нужна рамка с радиусом угла. • Изображение находится внутри модели просмотра изображения. • Передали изображение в качестве контекста данных, используя локальный путь к файлу. 25:12 Проверка отображения изображения • Удалили привязку изображения. • Добавили отступы внизу для улучшения отображения. • Перепроверили отображение изображения. 26:13 Настройка размеров изображения 27:37 Решение проблемы с углами 28:37 Реализация свойств 31:17 Обработка событий изменения размера 32:08 Оптимизация обработчиков событий 37:44 Создание вспомогательной функции 38:45 Инициализация переменных и проблема с self 40:48 Проверка реального размера границы 42:19 Настройка радиуса углов прямоугольника 45:07 Присвоение области обрезки дочернему элементу 46:41 Тестирование и добавление задержки загрузки 48:15 Планы на будущее