ЛАБОРАТОРНАЯ РАБОТА 17 (1)

1. ЛАБОРАТОРНАЯ РАБОТА 17: РАЗРАБОТКА FRONTEND-ЧАСТИ ПРИЛОЖЕНИЯ WPF НА ЯЗЫКЕ РАЗМЕТКИ XAML

2. Правила поведения в компьютерном классе

3. Frontend-разработка — это создание пользовательского интерфейса (UI) и той логики, которая с ним напрямую взаимодействует.

Цель фронтенд-разработки — трансформировать
данные и бизнес-логику в интерактивный интерфейс.

4. XAML (eXtensible Application Markup Language) — декларативный язык разметки на основе XML, созданный Microsoft специально для

Каждый тег в XAML соответствует созданию объекта .NET, а система
свойств зависимостей и привязки данных обеспечивает его реактивность.

5. Blend для Visual Studio помогает разрабатывать приложения на основе языка разметки XAML. Этот инструмент предоставляет те же

6.

Панель управления
Иерархия файлов
Свойства окон, страниц,
элементов (настройки
элементов интерфейса)
Структура интерфейса
Blend (дополнение Visual Studio для
frontend-разработки)

7.

Панель инструментов
Когда файл
(окно/страница) открыт
для редактирования, у
него:
Разметка окна или
страницы
Все элементы
пользовательского
интерфейса

8. Элементы WPF. Контейнеры

Border
• Контейнер с задним фоном
Canvas
• Контейнер с установлением точных координат внутри
StackPanel
• Контейнер, располагающий элементы в строку или колонку
DockPanel
• Выравнивание контента по краям контейнера
Grid
• Таблица
UniformGrid
• Выравнивает все ячейки таблицы под один размер

9. Элементы WPF. Элементы управления

Button
• Кнопка
CheckBox
• Флажок (галочка)
RadioButton
• Переключатель
ComboBox
• Выпадающий список
ListBox
• Список с выбором

10. Элементы WPF. Элементы управления

TabControl
• Навигация между страницами
Menu/MenuItem
• Меню
ToolBar
• Панель инструментов
StatusBar
• Строка состояния
ScrollBar/ScrollViewer
• Скролл (прокрутка)
Image
• Картинки

11. Элементы WPF. Текст и данные

TextBox
• Поле ввода текста
TextBlock
• Текст (только для чтения)
Label
• Подписи (небольшой текстовый блок)
DataGrid
• Таблица для отображения данных (база данных)
ItemsControl
• Контейнер для отображения коллекций (данных)
ContentControl
• Контейнер (панель) для любого содержимого
GroupBox
• Группа элементов с рамкой и заголовком

12. Задание

13.

Сразу создадим все окна
приложения
ПКМ на название проекта в иерархии (в обозревателе
решений) -> Добавить -> Окно WPF
Выбираем окно WPF
Все окна
приложения
Сразу называем его как экран

14.

Вёрстка экранов. Профиль
Файл xaml нужен для визуальной части окна
Файл xaml.cs нужен для функциональной части окна

15.

откроем окно профиля, установим размер
окна 1440x1024

16.

Разделим всё окно профиля на 5 вертикальных частей.
Создадим таблицу, состоящую из 5 столбцов:
1. Используем контейнер Grid.
2. Внутри него используем свойство ColumnDefinitions
(свойство Grid, которое хранит список всех столбцов).
3. ColumnDefinition – сам столбец.
Крайний левый столбец оставим
для навигации, остальные
используем под контент

17.

Дополнительно разделим окно профиля на 3
горизонтальные части.
К существующей таблице, состоящей из 5 столбцов
добавим 3 строки:
1. Внутри того же контейнера Grid используем
свойство RowDefinitions (свойство Grid, которое
хранит список всей строк).
2. RowDefinition – сама строка.
Для профиля такая разметка будущего контента будет
подходящей и пропорциональной:
В самой верхней строке расположится обложка профиля, в
средней – информация о пользователе, а в нижней – посты.

18.

Начнём верстать окно профиля с обложки:
В Figma вместо контента используется изображение, обводка толщиной 3,
цвет обводки - 420C61, скругление нижних углов по 40
Обложка профиля

19.

Настроить элемент можно
либо кодом XAML, либо
через панель свойств
Вставляем цвет
Указываем толщину
линии
Указываем скругление
нижних углов
Либо прописываем это всё кодом:
(нам нужно растянуть элемент сразу на несколько столбцов,
поэтому столбец, откуда начинается элемент - в Grid.Column, а
другой столбец, на котором элемент заканчивается, указываем в
Grid.ColumnSpan)

20.

Для хранения изображений создадим
папку Images
Сразу загрузим в неё обложку профиля и
аватарку пользователя
Добавим изображение в обложку.
Сделаем это при помощи заливки фона элемента Border:
Указываем свойство Border.Background, в него
вкладываем заливку картинкой ImageBrush. У картинки
определяем атрибут местоположения ImageSource (путь,
как добраться до картинки)

21.

Добавим блок под имя и фамилию пользователя
Сначала подключаем шрифты:
Если шрифт нестандартный (его нет во встроенных шрифтах), то
открываем Google Fonts, ищем шрифт, скачиваем его и добавляем в
проект.
https://fonts.google.com/ - Google Fonts
На сайте находим нужный
шрифт, нажимаем на кнопку
«Get font»
Загружаем шрифт (архивом), нажав на кнопку
загрузки

22.

Шрифт загрузится архивом
Распаковываем его
Нас интересуют файлы ttf. Это и есть
шрифты – один обычный (Regular),
другой жирный (Bold)
В проекте создадим папку Fonts и
добавим туда шрифты
Откроем файл самого шрифта и
обратим внимание на название
При задании шрифта тексту
указываем папку, файл шрифта,
# и название шрифта

23.

Настроим блок имени и фамилии пользователя.
Создадим подложку цвета 420C61, но изменим
прозрачность цвета, чтобы подожка была почти
прозрачной - #1A420C61.
Добавим эффект блюра подложки – чтобы текст не
сливался с фотографией профиля, но и не
перекрывал картинку. Используем блюр-эффект
А чтобы к тексту не применилось свойство блюра, вынесем
заблюренную подложку и текст в контейнер Grid, тем
самым обозначив, что текст не является вложенным
элементом и к нему не применяется эффект блюра.

24.

Под Border всей обложки профиля пишем:
Аватарка
Добавим аватарку пользователя. Создадим элемент Ellipse,
ему укажем высоту и ширину 240, вместо заливки укажем
изображение, обводка – цвет 420C61, толщина 3
Перетащим элемент, чтобы он наполовину был на нулевой
строке, и наполовину на первой строке

25.

Добавляем никнейм и количество
подписок и подписчиков. Обернём это
в единый блок - StackPanel
Цвет - 7616AE, шрифт пусть будет
системный
(указываем внутри основной таблицы
разметки – Grid)

26.

Создадим стиль для
подложки под текст
(информация профиля,
посты, ввод данных)
Откроем файл App.xaml. В нём
и создадим стиль, который
сможем применять к Border в
любом файле xaml
приложения
Настроим стиль:
указываем ключ (название), цвет заливки,
цвет обводки, толщину обводки и
скругление углов

27.

Применяем стиль к блоку информации о
профиле
Через стиль указываем ключ (название стиля)
Внутрь Border помещаем контейнер
StackPanel, а внутрь него – два
текстовых блока – заголовок «о
себе:» и текст информации о
профиле
Итог:

28.

Используем подложку под текст в блоке
поста:
Чтобы расположить несколько компонентов в ряд по горизонтали,
используем свойство Orientation=“Horizontal” у StackPanel – таким
образом, все компоненты внутри контейнера будут располагаться
справа друг от друга (чем правее компонент, тем ниже в иерархии
компонентов контейнера он задан)

29.

Создадим компонент
панели реакций
В папку картинок
добавим иконки
реакций
Создаём
пользовательский
элемент управления,
называем его Reactions

30.

Добавляем разметку:
Задаём таблицу из трёх столбцов
(под каждую реакцию отведём один
столбец)
Внутри таблицы зададим
подложку под панель
Ниже подложки определим сами кнопки реакций и
счётчик рядом с каждой реакцией

31.

Рассмотрим подробнее кнопку
реакции и её счётчик
Кнопка, по своей сути, должна реагировать на какое-то событие,
поэтому нужно указывать, какой метод выполнять при клике
Нам не нужна стандартная
вариация кнопки, поэтому мы
убираем края и устанавливаем
заливку кнопки прозрачной
Элементов TextBlock может быть много, но какому
именно присваивать значение определяется через его
уникальное имя
Внутрь кнопки вкладываем её
содержимое – иконку реакции

32.

Чтобы кнопки реакций и счётчик работали,
напишем небольшой код в файле
Reactions.xaml.cs:
Для того, чтобы кнопки кликалась, нам
нужно событие этого клика – метод (что
именно будет происходить по нажатию на
кнопку)
Добавляем переменные-счётчики
Метод события клика
на кнопку лайка
Когда срабатывает клик,
счётчик увеличивается на
единицу
Метод события клика
на кнопку дизлайка
Передаём (присваиваем)
отображаемому текст-блоку
значение счётчика
Метод события клика
на кнопку избранного
(звезды)

33.

Добавляем компонент панели реакций в окно
профиля:
В блоке постов, ниже заголовка и текста, указываем наш компонент:
Также указываем, чтобы он «прижимался» к правому краю блока

34.

Создадим компонент
навигации
Создаём пользовательский элемент
управления, называем его Navigation
Зададим цвет заливки контейнеру Grid,
строить таблицу не будем
Внутрь Grid помещаем StackPanel
(для удобной группировки). А
внутрь StackPanel помещаем сами
кнопки (они состоят из элемента
Button и Border)

35.

Чтобы навигация работала,
прописываем функции в
Navigation.xaml.cs:
навигация к профилю
навигация к чатам
навигация к постам
навигация к настройкам
В самих кнопках указываем названия
функций как click

36.

Добавляем компонент навигации в
самый низ окна профиля (можно и в
самый верх, разницы нет)
Не забываем окну профиля
указать цвет заливки:
Результат:

37.

Остальные экраны разработать самостоятельно!