#09 C# WPF UI - Моделирование пользовательского интерфейса
00:07 Введение и моделирование интерфейса Обсуждение модели представления и кода, не связанного с пользовательским интерфейсом. Моделирование интерфейса чата в Photoshop, доступ к файлу в репозитории Git. Описание экрана чата: исчезновение логина после входа, меню, кнопки, список контактов, чат с синим выделением, новое сообщение красным цветом, фотографии профиля. 01:00 Функции чата Автоматическое генерирование случайных цветов для профилей без фотографий. Отображение времени и даты прочтения сообщений. Возможность поиска сообщений и выполнения дополнительных действий. Начало нового чата через список контактов или добавление пользователей вручную. 01:56 Дополнительные функции Просмотр вложений и фотографий в порядке дат. Переход на страницу настроек. Планирование создания интерфейса в несколько этапов: боковое меню, список контактов, пузыри в чате. 03:07 Создание страницы чата Удаление страницы входа и создание новой страницы чата. Настройка модели просмотра для страницы чата. Добавление страницы чата на главную страницу приложения. 05:30 Настройка сетки и фона Создание сетки с определениями столбцов для бокового меню. Настройка фона и стилей для бокового меню. Проверка размера и корректировка минимальных размеров страницы. 09:37 Создание контента Добавление контента в боковое меню. Использование сетки для отображения контента. Определение строк и столбцов для размещения кнопок и пространства между ними. 12:10 Завершение настройки Размещение основных кнопок на панели стека. Горизонтальная ориентация кнопок. Завершение настройки интерфейса для отображения бокового меню и контента. 12:26 Настройка высоты и стиля кнопок Устанавливаем высоту верхнего меню примерно 50 см. Создаём три кнопки с контентом «X». Применяем новый стиль к кнопкам, используя обычную кнопку и создавая новый стиль «кнопка-значок». 13:43 Настройка цвета и шрифта кнопок Делаем фон кнопок синим, передний план — белым. Используем крупный и красивый шрифт с иконками. Убираем отступы и радиус угла. 14:39 Анимация и цвета кнопок Добавляем анимацию при наведении курсора: светло-голубой цвет. Определяем цвета: светло-голубой 45B6E5 и тёмно-синий ОК6991. Настраиваем цвет при наведении и отключении. 16:15 Квадратные кнопки Увеличиваем высоту кнопок в верхнем меню. Привязываем ширину к высоте, чтобы кнопки были квадратными. Проверяем анимацию при наведении курсора. 17:17 Добавление значков Добавляем значки чата, пользователя, картинки и шестерёнки. Используем класс шрифтов для отображения значков. Решаем проблему с отображением значков из-за отступов. 19:18 Масштабирование текста Размещаем текст внутри окна просмотра для масштабирования. Проверяем отображение значков при изменении размера кнопок. 21:30 Получение значений значков Получаем значения значков из браузера, перейдя в раздел «Шрифт» на awesome.io. Вставляем значения значков в стиль кнопок. 23:07 Настройка внешнего вида шестерёнки Делаем шестерёнку тёмного цвета. Откладываем добавление теней до появления экрана чата. 25:05 Создание пользовательского элемента управления Создаём папку «Элементы управления» и новый элемент управления WPF. Настраиваем название элемента управления, удаляя пробелы и пространства имён. Переносим рамки окна в новый элемент управления. 26:33 Введение в пользовательское управление Объяснение работы с пользовательским управлением и боковым меню. Перемещение пользовательского интерфейса в один элемент управления. Проблема переопределения контента при явном задании содержимого. 27:33 Решение проблемы переопределения Использование шаблона элемента управления типа user control. Вставка шаблона в пользовательский элемент управления. Изменение шаблона для получения желаемого содержимого. 28:30 Подключение презентатора контента Подключение презентатора контента для ввода выбранного пользователем контента. Настройка местоположения контента в сетке. Возможность настройки содержимого пользовательского элемента управления. 29:29 Планы на будущее Создание прокручиваемого чата с помощью пользовательских элементов управления. Привязка данных к списку и получение данных с сервера. Переход к следующему экрану после обработки данных. 30:28 Простота использования пользовательских элементов управления Размещение презентатора контента в любом месте дизайна. Перенос контента между столбцами и изменение его расположения. Подчёркивание простоты работы с пользовательскими элементами управления. 31:15 Заключение Призыв задавать вопросы в комментариях. Анонс следующего видео о списке чатов.
00:07 Введение и моделирование интерфейса Обсуждение модели представления и кода, не связанного с пользовательским интерфейсом. Моделирование интерфейса чата в Photoshop, доступ к файлу в репозитории Git. Описание экрана чата: исчезновение логина после входа, меню, кнопки, список контактов, чат с синим выделением, новое сообщение красным цветом, фотографии профиля. 01:00 Функции чата Автоматическое генерирование случайных цветов для профилей без фотографий. Отображение времени и даты прочтения сообщений. Возможность поиска сообщений и выполнения дополнительных действий. Начало нового чата через список контактов или добавление пользователей вручную. 01:56 Дополнительные функции Просмотр вложений и фотографий в порядке дат. Переход на страницу настроек. Планирование создания интерфейса в несколько этапов: боковое меню, список контактов, пузыри в чате. 03:07 Создание страницы чата Удаление страницы входа и создание новой страницы чата. Настройка модели просмотра для страницы чата. Добавление страницы чата на главную страницу приложения. 05:30 Настройка сетки и фона Создание сетки с определениями столбцов для бокового меню. Настройка фона и стилей для бокового меню. Проверка размера и корректировка минимальных размеров страницы. 09:37 Создание контента Добавление контента в боковое меню. Использование сетки для отображения контента. Определение строк и столбцов для размещения кнопок и пространства между ними. 12:10 Завершение настройки Размещение основных кнопок на панели стека. Горизонтальная ориентация кнопок. Завершение настройки интерфейса для отображения бокового меню и контента. 12:26 Настройка высоты и стиля кнопок Устанавливаем высоту верхнего меню примерно 50 см. Создаём три кнопки с контентом «X». Применяем новый стиль к кнопкам, используя обычную кнопку и создавая новый стиль «кнопка-значок». 13:43 Настройка цвета и шрифта кнопок Делаем фон кнопок синим, передний план — белым. Используем крупный и красивый шрифт с иконками. Убираем отступы и радиус угла. 14:39 Анимация и цвета кнопок Добавляем анимацию при наведении курсора: светло-голубой цвет. Определяем цвета: светло-голубой 45B6E5 и тёмно-синий ОК6991. Настраиваем цвет при наведении и отключении. 16:15 Квадратные кнопки Увеличиваем высоту кнопок в верхнем меню. Привязываем ширину к высоте, чтобы кнопки были квадратными. Проверяем анимацию при наведении курсора. 17:17 Добавление значков Добавляем значки чата, пользователя, картинки и шестерёнки. Используем класс шрифтов для отображения значков. Решаем проблему с отображением значков из-за отступов. 19:18 Масштабирование текста Размещаем текст внутри окна просмотра для масштабирования. Проверяем отображение значков при изменении размера кнопок. 21:30 Получение значений значков Получаем значения значков из браузера, перейдя в раздел «Шрифт» на awesome.io. Вставляем значения значков в стиль кнопок. 23:07 Настройка внешнего вида шестерёнки Делаем шестерёнку тёмного цвета. Откладываем добавление теней до появления экрана чата. 25:05 Создание пользовательского элемента управления Создаём папку «Элементы управления» и новый элемент управления WPF. Настраиваем название элемента управления, удаляя пробелы и пространства имён. Переносим рамки окна в новый элемент управления. 26:33 Введение в пользовательское управление Объяснение работы с пользовательским управлением и боковым меню. Перемещение пользовательского интерфейса в один элемент управления. Проблема переопределения контента при явном задании содержимого. 27:33 Решение проблемы переопределения Использование шаблона элемента управления типа user control. Вставка шаблона в пользовательский элемент управления. Изменение шаблона для получения желаемого содержимого. 28:30 Подключение презентатора контента Подключение презентатора контента для ввода выбранного пользователем контента. Настройка местоположения контента в сетке. Возможность настройки содержимого пользовательского элемента управления. 29:29 Планы на будущее Создание прокручиваемого чата с помощью пользовательских элементов управления. Привязка данных к списку и получение данных с сервера. Переход к следующему экрану после обработки данных. 30:28 Простота использования пользовательских элементов управления Размещение презентатора контента в любом месте дизайна. Перенос контента между столбцами и изменение его расположения. Подчёркивание простоты работы с пользовательскими элементами управления. 31:15 Заключение Призыв задавать вопросы в комментариях. Анонс следующего видео о списке чатов.