https://pastein.ru/t/fa0
Загрузка данных
Лабораторная работа №3
«Использование привязки данных в WPF»
Дисциплина
Разработка приложений с использованием WPF
Тема
Привязка данных (Data Binding) в WPF
Продолжительность
2 академических часа
1. Цель работы
Получить практические навыки использования механизма Data Binding в WPF.
В процессе выполнения лабораторной работы необходимо научиться:
создавать классы-модели для хранения данных;
создавать объекты модели;
назначать источник данных для элементов интерфейса;
связывать свойства объектов с элементами управления;
использовать двустороннюю привязку данных;
работать с TextBox, ComboBox, CheckBox и другими элементами WPF;
создавать интерфейс, автоматически отображающий изменения данных;
разделять данные и визуальное представление приложения.
2. Теоретические сведения
2.1. Что такое Data Binding
Data Binding (привязка данных) — это механизм WPF, позволяющий автоматически связывать данные одного объекта с элементом пользовательского интерфейса.
Например, приложение содержит объект:
Student
с данными:
фамилия;
имя;
возраст;
группа;
наличие стипендии.
Эти данные могут отображаться в различных элементах интерфейса.
Схематично связь можно представить следующим образом:
Объект Student
│
┌──────────┼──────────┐
↓ ↓ ↓
FirstName Age Group
│ │ │
↓ ↓ ↓
TextBox TextBlock ComboBox
При использовании привязки разработчику не требуется вручную передавать каждое значение из одного элемента в другой.
2.2. Источник данных
Источник данных — объект, свойства которого используются элементами интерфейса.
В лабораторной работе таким объектом будет объект класса Student.
Например, объект может содержать следующие данные:
Фамилия: Иванов
Имя: Иван
Возраст: 18
Группа: ИСП-21
Стипендия: да
Элементы интерфейса получают доступ к этим данным через механизм привязки.
2.3. DataContext
Одним из основных понятий WPF является DataContext.
DataContext определяет объект, который используется элементом интерфейса в качестве источника данных для привязки.
Если для окна или контейнера задан определенный объект, дочерние элементы могут использовать его свойства при создании привязок.
Это позволяет не указывать источник данных отдельно для каждого элемента.
Схематично:
Window
│
└── DataContext → Student
│
├── LastName
├── FirstName
├── Age
├── Group
└── HasScholarship
│
↓
элементы интерфейса
2.4. Свойство Binding
Привязка указывает, какое свойство объекта должно использоваться элементом интерфейса.
Например, условно можно представить связь:
TextBox
│
└────→ FirstName
Это означает, что содержимое элемента связано со свойством FirstName объекта данных.
Другой элемент интерфейса может быть связан с тем же свойством:
TextBox ─────→ FirstName
↑
TextBlock ────────┘
В результате несколько элементов интерфейса могут использовать одни и те же данные.
2.5. Односторонняя и двусторонняя привязка
В WPF существует несколько режимов привязки.
OneWay
Данные передаются от источника к элементу интерфейса.
Student → TextBlock
Изменение данных объекта приводит к изменению отображения.
TwoWay
Данные передаются в обоих направлениях.
Student ↔ TextBox
Изменение значения в TextBox изменяет связанное значение источника.
Это особенно удобно для форм редактирования.
2.6. UpdateSourceTrigger
При двусторонней привязке необходимо учитывать момент передачи измененного значения обратно источнику.
WPF позволяет управлять этим с помощью механизма UpdateSourceTrigger.
В зависимости от настройки значение может передаваться:
при изменении текста;
после потери фокуса;
при изменении значения соответствующего элемента управления.
Для пользователя это означает, что данные могут обновляться либо сразу при вводе, либо после завершения редактирования.
2.7. Привязка различных элементов управления
Data Binding может использоваться не только с TextBox.
В лабораторной работе необходимо использовать несколько типов элементов.
TextBox
Используется для ввода текста.
Примеры данных:
фамилия;
имя;
город;
специальность.
ComboBox
Используется для выбора одного значения из нескольких вариантов.
Например:
ИСП-21
ИСП-22
ИСП-23
CheckBox
Используется для логического значения.
Например:
Получает стипендию
Значение может быть:
Да / Нет
TextBlock
Используется для отображения данных.
3. Постановка задачи
Необходимо разработать WPF-приложение «Профиль студента».
Приложение должно позволять пользователю редактировать данные студента и одновременно отображать их в отдельной информационной карточке.
Пример общей структуры интерфейса:
┌─────────────────────────────────────────────────────────────┐
│ ПРОФИЛЬ СТУДЕНТА │
├──────────────────────────────┬──────────────────────────────┤
│ Редактирование │ Информация │
│ │ │
│ Фамилия: │ Иванов Иван │
│ [____________________] │ │
│ │ Группа: ИСП-21 │
│ Имя: │ Возраст: 18 │
│ [____________________] │ │
│ │ │
│ Возраст: │ Стипендия: получает │
│ [____________________] │ │
│ │ │
│ Группа: │ │
│ [ ИСП-21 ▼ ] │ │
│ │ │
│ ☑ Получает стипендию │ │
│ │ │
│ [ Очистить ] │ │
└──────────────────────────────┴──────────────────────────────┘
Внешний вид может отличаться от приведенного примера.
Главное требование — реализовать функциональность приложения с использованием механизма Data Binding.
4. Требования к модели данных
Необходимо создать класс, описывающий студента.
Класс должен содержать свойства для хранения как минимум следующих данных:
1.Фамилия.
2.Имя.
3.Возраст.
4.Учебная группа.
5.Наличие стипендии.
Кроме перечисленных свойств необходимо самостоятельно добавить минимум одно дополнительное свойство.
Возможные варианты:
специальность;
курс;
город;
средний балл;
любимый язык программирования;
год поступления.
Дополнительное свойство студент выбирает самостоятельно.
5. Требования к интерфейсу
Интерфейс должен содержать как минимум:
TextBlock для подписей;
два или более TextBox;
ComboBox;
CheckBox;
несколько элементов для отображения информации;
Button для очистки данных;
элементы компоновки WPF.
Для организации интерфейса необходимо использовать подходящие панели компоновки.
Необходимо обеспечить:
логичное расположение элементов;
читаемые подписи;
отсутствие перекрытия элементов;
удобство ввода данных;
визуальное разделение области редактирования и области просмотра.
6. Требования к Data Binding
В приложении необходимо обязательно использовать механизм привязки данных.
Требуется:
1.Создать объект модели студента.
2.Использовать его как источник данных.
3.Настроить DataContext.
4.Связать поля редактирования с соответствующими свойствами объекта.
5.Связать область отображения с теми же данными.
6.Использовать двустороннюю привязку там, где пользователь изменяет данные.
7.Использовать подходящую привязку для ComboBox.
8.Использовать привязку для CheckBox.
9.Обеспечить автоматическое отображение введенной информации в карточке студента.
7. Требования к кнопке «Очистить»
В приложении должна присутствовать кнопка «Очистить».
После ее нажатия данные профиля должны быть сброшены.
В результате:
текстовые поля должны быть очищены;
выбранная группа должна быть сброшена или установлена в исходное состояние;
состояние стипендии должно вернуться к исходному;
информационная карточка должна соответствовать новым значениям.
8. Дополнительное задание
После выполнения основной части необходимо реализовать дополнительную возможность.
Условное отображение статуса стипендии
Информационная карточка должна показывать различный текст в зависимости от состояния CheckBox.
Например:
Стипендия: получает
или:
Стипендия: не получает
Конкретный способ реализации студент выбирает самостоятельно.
9. Порядок выполнения работы
Этап 1. Создание проекта
Создайте новый WPF-проект.
Название проекта:
StudentProfile
Этап 2. Создание модели
Создайте отдельный класс, описывающий студента.
Добавьте необходимые свойства.
Определите начальные значения объекта.
Этап 3. Создание интерфейса
Разработайте окно приложения.
Разделите его минимум на две логические области:
Область 1 — редактирование
Пользователь вводит и изменяет данные.
Область 2 — просмотр
Пользователь видит сформированную карточку студента.
Этап 4. Добавление элементов управления
Добавьте необходимые элементы интерфейса.
Для каждого элемента определите:
назначение;
отображаемый текст;
положение;
размеры;
связь с данными.
Этап 5. Настройка DataContext
Подключите созданный объект модели к интерфейсу приложения.
После этого элементы интерфейса должны получить возможность обращаться к его свойствам.
Этап 6. Настройка привязок
Свяжите элементы редактирования с соответствующими свойствами модели.
Затем настройте отображение этих же данных в информационной карточке.
Проверьте работу двустороннего обмена данными.
Этап 7. Настройка ComboBox
Добавьте список учебных групп.
Пользователь должен иметь возможность выбрать одну группу.
Выбранное значение должно использоваться в профиле студента.
Этап 8. Настройка CheckBox
Добавьте возможность указать наличие стипендии.
Состояние CheckBox должно быть связано с соответствующим свойством модели.
Этап 9. Реализация очистки
Добавьте кнопку «Очистить».
После нажатия данные должны возвращаться в исходное состояние.
Этап 10. Проверка
Проверьте приложение минимум в следующих ситуациях:
Проверка 1
Введите:
Фамилия: Иванов
Имя: Иван
Возраст: 18
Группа: ИСП-21
Стипендия: Да
Проверьте отображение данных.
Проверка 2
Измените имя.
Убедитесь, что карточка студента отображает новое значение.
Проверка 3
Измените группу.
Проверьте обновление информации.
Проверка 4
Измените состояние стипендии.
Проверьте изменение соответствующей информации.
Проверка 5
Нажмите «Очистить».
Проверьте состояние всех элементов.
10. Требования к оформлению проекта
Проект должен иметь понятную структуру.
Не допускается:
использование неинформативных имен элементов и переменных;
дублирование большого количества кода;
размещение всех классов в одном файле без необходимости;
наличие неиспользуемых элементов;
наличие отладочного или временного кода;
ошибки компиляции.
Имена классов, свойств и переменных должны соответствовать их назначению.
команд и архитектуры MVVM.
