#24 C# WPF UI - Продвинутый текстовой элемент управления
00:07 Введение и исправления анимации • В прошлом видео создан статичный интерфейс страницы настроек. • В этом видео будет создан редактируемый интерфейс. • Исправлены анимации фреймворка: упрощена анимация скольжения внутрь и наружу, устранены ошибки в свойствах анимации. 01:06 Упрощение анимации • Вместо множества анимаций оставлена только одна — скольжение внутрь и наружу. • Направление анимации передаётся через общий код, что значительно упрощает анимацию. 01:55 Исправление ошибок в свойствах анимации • Проблема с переменной already loaded решена путём использования словаря для привязки логического значения к конкретному элементу пользовательского интерфейса. • Исправлено неправильное срабатывание анимации из-за обновления значения переменной. 03:51 Настройка интерфейса • Уменьшена ширина страницы настроек и увеличены отступы. • Планируется создание пользовательского элемента управления для размещения элементов: метки, контента, кнопки. 06:15 Создание модели представления • Созданы папки application и inputs для хранения общих и входных элементов. • Наследована базовая модель представления для ввода текста. • Определены публичные свойства: метка, исходный текст, отредактированный текст, флаг режима редактирования. 09:18 Команды для управления текстом • Созданы команды: edit, cancel, save. • Реализованы методы для перевода элемента управления в режим редактирования, отмены редактирования и сохранения изменений. 11:57 Завершение модели представления • Модель представления для ввода текста готова. • Планируется создание модели представления для дизайна ввода текста, которая унаследует базовую модель представления. 13:01 Исправление модели представления для диалогового окна сообщения • Даём название классу или файлу. • Исправляем комментарий, синглтон и конструктор. • Указываем original text как name, edited text — editing. • По умолчанию редактирование отключено. 14:33 Создание модели представления для ввода текста • Создаём модель представления для ввода имени текущего пользователя. • Планируем создать модель представления для ввода пароля с текущими и предыдущими данными. • Определяем свойства для привязки данных: имя пользователя, пароль, адрес электронной почты. 15:45 Создание элемента управления для ввода текста • Создаём новую папку в разделе элементов управления под названием «input». • Создаём новый пользовательский элемент управления, называем его «элементом управления для ввода текста». • Редактируем шаблон и собираем проект для проверки работы элемента управления. 17:07 Настройка внешнего вида элемента управления • Добавляем границу с тёмной заливкой и толщиной. • Добавляем метку, текстовое поле и кнопку редактирования. • Определяем сетку с тремя столбцами: метка, текстовое поле, кнопка. 18:47 Привязка данных и настройка макета • Привязываем текст к модели представления. • Настраиваем отступы и вертикальное выравнивание элементов. • Проверяем привязку данных во время разработки. 23:12 Настройка шрифта и анимации • Уменьшаем размер шрифта для лучшего отображения. • Настраиваем отступы для корректного отображения текста. • Проверяем анимацию и визуальное представление элемента управления. 26:39 Добавление кнопок • Создаём сетку для кнопок редактирования и других кнопок. • Убираем отступы и поля для лучшего отображения. • Уменьшаем размер шрифта для более комфортного восприятия. 29:06 Настройка анимации и цвета • Растягивание по центру вертикальной линии. • Изменение цвета фона на тёмный. • Подготовка к анимации затухания и привязке объектов. 30:01 Плавная анимация появления • Использование свойства animate fade in для плавного появления. • Привязка анимации к режиму редактирования. • Добавление курсора в виде руки для подчёркивания клика. 31:05 Удаление метки и создание конвертера • Анимация появления содержимого и удаление метки. • Создание конвертера Boolean Invert Converter для инверсии логических значений. 33:25 Тестирование пользовательского интерфейса • Настройка модели представления для ввода текста. • Изменение команды редактирования для тестирования интерфейса. 34:03 Установка фокуса и выделение текста • Добавление присоединённых свойств для установки фокуса на поле. • Объединение функций фокуса и выделения текста. • Использование функции выделения всего текста из текстового поля. 38:02 Анимация наведения курсора • Настройка анимации наведения курсора для кнопки редактирования. • Изменение непрозрачности кнопки при наведении курсора. • Ускорение анимации наведения курсора. 40:07 Анимация кнопок «Редактировать» и «Сохранить» • Анимация затухания кнопки «Редактировать» при переходе в режим редактирования. • Проблема с прозрачностью и решение путём перемещения кнопок в контейнер. • Проверка работы анимации и триггеров. 42:06 Создание кнопок «Сохранить» и «Отмена» 43:01 Настройка отображения кнопок 44:08 Дизайн кнопок 45:27 Проблемы с отступами 47:59 Тестирование режима редактирования 49:53 Изменение значков кнопок 53:40 Завершение работы
00:07 Введение и исправления анимации • В прошлом видео создан статичный интерфейс страницы настроек. • В этом видео будет создан редактируемый интерфейс. • Исправлены анимации фреймворка: упрощена анимация скольжения внутрь и наружу, устранены ошибки в свойствах анимации. 01:06 Упрощение анимации • Вместо множества анимаций оставлена только одна — скольжение внутрь и наружу. • Направление анимации передаётся через общий код, что значительно упрощает анимацию. 01:55 Исправление ошибок в свойствах анимации • Проблема с переменной already loaded решена путём использования словаря для привязки логического значения к конкретному элементу пользовательского интерфейса. • Исправлено неправильное срабатывание анимации из-за обновления значения переменной. 03:51 Настройка интерфейса • Уменьшена ширина страницы настроек и увеличены отступы. • Планируется создание пользовательского элемента управления для размещения элементов: метки, контента, кнопки. 06:15 Создание модели представления • Созданы папки application и inputs для хранения общих и входных элементов. • Наследована базовая модель представления для ввода текста. • Определены публичные свойства: метка, исходный текст, отредактированный текст, флаг режима редактирования. 09:18 Команды для управления текстом • Созданы команды: edit, cancel, save. • Реализованы методы для перевода элемента управления в режим редактирования, отмены редактирования и сохранения изменений. 11:57 Завершение модели представления • Модель представления для ввода текста готова. • Планируется создание модели представления для дизайна ввода текста, которая унаследует базовую модель представления. 13:01 Исправление модели представления для диалогового окна сообщения • Даём название классу или файлу. • Исправляем комментарий, синглтон и конструктор. • Указываем original text как name, edited text — editing. • По умолчанию редактирование отключено. 14:33 Создание модели представления для ввода текста • Создаём модель представления для ввода имени текущего пользователя. • Планируем создать модель представления для ввода пароля с текущими и предыдущими данными. • Определяем свойства для привязки данных: имя пользователя, пароль, адрес электронной почты. 15:45 Создание элемента управления для ввода текста • Создаём новую папку в разделе элементов управления под названием «input». • Создаём новый пользовательский элемент управления, называем его «элементом управления для ввода текста». • Редактируем шаблон и собираем проект для проверки работы элемента управления. 17:07 Настройка внешнего вида элемента управления • Добавляем границу с тёмной заливкой и толщиной. • Добавляем метку, текстовое поле и кнопку редактирования. • Определяем сетку с тремя столбцами: метка, текстовое поле, кнопка. 18:47 Привязка данных и настройка макета • Привязываем текст к модели представления. • Настраиваем отступы и вертикальное выравнивание элементов. • Проверяем привязку данных во время разработки. 23:12 Настройка шрифта и анимации • Уменьшаем размер шрифта для лучшего отображения. • Настраиваем отступы для корректного отображения текста. • Проверяем анимацию и визуальное представление элемента управления. 26:39 Добавление кнопок • Создаём сетку для кнопок редактирования и других кнопок. • Убираем отступы и поля для лучшего отображения. • Уменьшаем размер шрифта для более комфортного восприятия. 29:06 Настройка анимации и цвета • Растягивание по центру вертикальной линии. • Изменение цвета фона на тёмный. • Подготовка к анимации затухания и привязке объектов. 30:01 Плавная анимация появления • Использование свойства animate fade in для плавного появления. • Привязка анимации к режиму редактирования. • Добавление курсора в виде руки для подчёркивания клика. 31:05 Удаление метки и создание конвертера • Анимация появления содержимого и удаление метки. • Создание конвертера Boolean Invert Converter для инверсии логических значений. 33:25 Тестирование пользовательского интерфейса • Настройка модели представления для ввода текста. • Изменение команды редактирования для тестирования интерфейса. 34:03 Установка фокуса и выделение текста • Добавление присоединённых свойств для установки фокуса на поле. • Объединение функций фокуса и выделения текста. • Использование функции выделения всего текста из текстового поля. 38:02 Анимация наведения курсора • Настройка анимации наведения курсора для кнопки редактирования. • Изменение непрозрачности кнопки при наведении курсора. • Ускорение анимации наведения курсора. 40:07 Анимация кнопок «Редактировать» и «Сохранить» • Анимация затухания кнопки «Редактировать» при переходе в режим редактирования. • Проблема с прозрачностью и решение путём перемещения кнопок в контейнер. • Проверка работы анимации и триггеров. 42:06 Создание кнопок «Сохранить» и «Отмена» 43:01 Настройка отображения кнопок 44:08 Дизайн кнопок 45:27 Проблемы с отступами 47:59 Тестирование режима редактирования 49:53 Изменение значков кнопок 53:40 Завершение работы