#29 C# WPF UI - Отправка сообщения в чат
00:08 Настройка отображения диалогового окна • Диалоговое окно должно отображаться в центре родительского элемента, а не экрана. • Для этого нужно указать центр родительского элемента в методе Show диалогового окна. • Используется команда `mdialog.Owner = Application.Current.MainWindow`. 02:23 Изменение процесса отправки сообщения • В модели представления списка сообщений чата заменяем команду отправки на добавление нового сообщения. • Добавляем свойство `pendingMessageText` для отображения текста сообщения в ожидании отправки. • Привязываем текст сообщения к `pendingMessageText` для обновления при вводе текста. 05:35 Проблемы с обновлением списка • При нажатии «Отправить» список сообщений не обновляется. • Решаем проблему, заменяя список на наблюдаемую коллекцию `ObservableCollection`. • Наблюдаемая коллекция отслеживает изменения элементов внутри списка и автоматически обновляет пользовательский интерфейс. 10:21 Добавление анимации появления сообщений • Создаём новую анимацию для плавного появления новых сообщений. • Копируем существующую анимацию «animate sliding from bottom» и адаптируем её для появления новых элементов. • Добавляем анимацию в элемент управления списком сообщений чата в XAML. 13:56 Ограничение анимации • Ограничиваем анимацию только для новых элементов, добавляя привязку к свойству `newElement`. • Проверяем, когда анимация не нужна, например, при первой загрузке. 15:07 Проверка видимости элемента • Проверка видимости элемента при первой загрузке. • Элемент изначально скрыт, затем появляется с анимацией. • Проблема: новое сообщение должно появляться с анимацией, но должно быть скрыто. 16:53 Решение проблемы с анимацией • Необходимо скрыть элемент до начала анимации. • Игнорирование проверки видимости для корректного отображения интерфейса. 17:43 Новое логическое свойство • Введение нового логического свойства `newItem` для анимации появления элементов. • По умолчанию `newItem` имеет значение `false`. • Анимация срабатывает только при добавлении новых элементов. 18:39 Тестирование анимации • Проверка работы анимации при добавлении новых сообщений. • Подтверждение плавного появления элементов. 19:04 Проблема с прокруткой • При повторной прокрутке сообщение не прокручивается до конца. • Решение: автоматическая прокрутка до конца при приближении к нижней части экрана. 20:49 Реализация автоматической прокрутки • Добавление свойства автоматической прокрутки до конца. • Проверка расстояния до нижней части экрана для автоматической прокрутки. 24:02 Настройка значения для прокрутки • Установка значения для автоматической прокрутки, например, 20 пикселей. • Проверка работы прокрутки и настройка значения. 26:28 Очистка текста сообщения • Очистка текста сообщения после отправки. • Возвращение фокуса на поле ввода после отправки сообщения. 27:50 Настройка фокуса на кнопке отправки • При нажатии на кнопку отправки фокус должен возвращаться на текстовое поле. • Установка свойства `focusable` кнопки отправки в `false` для решения проблемы. 29:47 Фокус при первой загрузке • Использование свойства `localIsFocused` для установки фокуса на поле при первой загрузке. 30:39 Фокус на поле ввода • При загрузке страницы поле ввода должно быть в фокусе. • При смене страниц фокус должен сохраняться. • Для этого используется изменённая модель просмотра страниц чата. 31:36 Поведение при вводе текста • По умолчанию нажатие Enter отправляет сообщение. • Для добавления новой строки нужно удерживать клавишу Ctrl и нажимать Enter. 32:24 Использование присоединённых свойств • Присоединённые свойства позволяют управлять фокусом и вводом текста. • По умолчанию свойство accepts return отключено. • Имитация возврата каретки при удержании Ctrl. 33:17 Событие preview key down • Событие preview key down позволяет обрабатывать нажатия клавиш до их фактического нажатия. • При нажатии Enter сообщение отправляется. 34:09 Проверка нажатия Enter • Проверка, нажата ли клавиша Enter. • Обработка события и отправка сообщения. 36:28 Добавление новой строки при Ctrl+Enter • Проверка нажатия клавиши Ctrl с помощью keyboard.modifiers. • Вставка новой строки в текстовое поле. • Перемещение курсора на новую строку. 40:51 Исправление проблемы с копированием и вставкой • При копировании и вставке новых строк они удаляются. • Добавление accepts return для сохранения новых строк. • Изменение логики обработки нажатия Enter. 43:18 Завершение • Подведение итогов: быстрое и удобное отправление сообщений. • Сохранение анимации. • Призыв к комментариям и пожеланиям.
00:08 Настройка отображения диалогового окна • Диалоговое окно должно отображаться в центре родительского элемента, а не экрана. • Для этого нужно указать центр родительского элемента в методе Show диалогового окна. • Используется команда `mdialog.Owner = Application.Current.MainWindow`. 02:23 Изменение процесса отправки сообщения • В модели представления списка сообщений чата заменяем команду отправки на добавление нового сообщения. • Добавляем свойство `pendingMessageText` для отображения текста сообщения в ожидании отправки. • Привязываем текст сообщения к `pendingMessageText` для обновления при вводе текста. 05:35 Проблемы с обновлением списка • При нажатии «Отправить» список сообщений не обновляется. • Решаем проблему, заменяя список на наблюдаемую коллекцию `ObservableCollection`. • Наблюдаемая коллекция отслеживает изменения элементов внутри списка и автоматически обновляет пользовательский интерфейс. 10:21 Добавление анимации появления сообщений • Создаём новую анимацию для плавного появления новых сообщений. • Копируем существующую анимацию «animate sliding from bottom» и адаптируем её для появления новых элементов. • Добавляем анимацию в элемент управления списком сообщений чата в XAML. 13:56 Ограничение анимации • Ограничиваем анимацию только для новых элементов, добавляя привязку к свойству `newElement`. • Проверяем, когда анимация не нужна, например, при первой загрузке. 15:07 Проверка видимости элемента • Проверка видимости элемента при первой загрузке. • Элемент изначально скрыт, затем появляется с анимацией. • Проблема: новое сообщение должно появляться с анимацией, но должно быть скрыто. 16:53 Решение проблемы с анимацией • Необходимо скрыть элемент до начала анимации. • Игнорирование проверки видимости для корректного отображения интерфейса. 17:43 Новое логическое свойство • Введение нового логического свойства `newItem` для анимации появления элементов. • По умолчанию `newItem` имеет значение `false`. • Анимация срабатывает только при добавлении новых элементов. 18:39 Тестирование анимации • Проверка работы анимации при добавлении новых сообщений. • Подтверждение плавного появления элементов. 19:04 Проблема с прокруткой • При повторной прокрутке сообщение не прокручивается до конца. • Решение: автоматическая прокрутка до конца при приближении к нижней части экрана. 20:49 Реализация автоматической прокрутки • Добавление свойства автоматической прокрутки до конца. • Проверка расстояния до нижней части экрана для автоматической прокрутки. 24:02 Настройка значения для прокрутки • Установка значения для автоматической прокрутки, например, 20 пикселей. • Проверка работы прокрутки и настройка значения. 26:28 Очистка текста сообщения • Очистка текста сообщения после отправки. • Возвращение фокуса на поле ввода после отправки сообщения. 27:50 Настройка фокуса на кнопке отправки • При нажатии на кнопку отправки фокус должен возвращаться на текстовое поле. • Установка свойства `focusable` кнопки отправки в `false` для решения проблемы. 29:47 Фокус при первой загрузке • Использование свойства `localIsFocused` для установки фокуса на поле при первой загрузке. 30:39 Фокус на поле ввода • При загрузке страницы поле ввода должно быть в фокусе. • При смене страниц фокус должен сохраняться. • Для этого используется изменённая модель просмотра страниц чата. 31:36 Поведение при вводе текста • По умолчанию нажатие Enter отправляет сообщение. • Для добавления новой строки нужно удерживать клавишу Ctrl и нажимать Enter. 32:24 Использование присоединённых свойств • Присоединённые свойства позволяют управлять фокусом и вводом текста. • По умолчанию свойство accepts return отключено. • Имитация возврата каретки при удержании Ctrl. 33:17 Событие preview key down • Событие preview key down позволяет обрабатывать нажатия клавиш до их фактического нажатия. • При нажатии Enter сообщение отправляется. 34:09 Проверка нажатия Enter • Проверка, нажата ли клавиша Enter. • Обработка события и отправка сообщения. 36:28 Добавление новой строки при Ctrl+Enter • Проверка нажатия клавиши Ctrl с помощью keyboard.modifiers. • Вставка новой строки в текстовое поле. • Перемещение курсора на новую строку. 40:51 Исправление проблемы с копированием и вставкой • При копировании и вставке новых строк они удаляются. • Добавление accepts return для сохранения новых строк. • Изменение логики обработки нажатия Enter. 43:18 Завершение • Подведение итогов: быстрое и удобное отправление сообщений. • Сохранение анимации. • Призыв к комментариям и пожеланиям.