Соединение данных и элементов управления (Data Binding) в WPF

1. Соединение данных и элементов управления (Data Binding) в WPF

2. Что такое Data Binding

• Data Binding (привязка данных) — это способ связать интерфейс с
данными без прямого обращения к элементам управления.
• Вместо того чтобы писать:
• Вы пишете в XAML:
• Главное преимущество: при изменении данных интерфейс
обновляется автоматически.

3. Из чего состоит привязка

Любая привязка состоит из четырёх частей:
• Цель привязки — элемент управления (TextBox, TextBlock, ListBox)
• Свойство цели — свойство элемента (Text, ItemsSource,
Foreground)
• Источник привязки — объект с данными (класс Person,
коллекция)
• Путь к значению — свойство источника (Name, Age, Employees)

4. Из чего состоит привязка

• TextBlock — цель
• Text — свойство цели
• FirstName — путь к значению
• Источник задаётся через DataContext

5. Что такое DataContext

• DataContext — это объект-источник данных. Он задаётся один раз
и работает для всех дочерних элементов.
• Все три TextBlock используют один и тот же объект Employee,
который лежит в DataContext.
• В коде C#:

6. Направления привязки (Binding Mode)

По умолчанию:
Режим
Что делает
Когда использовать
OneWay
Данные идут только
от источника к цели.
Цель обновляется,
источник — нет.
Для отображения
данных (TextBlock,
Label)
TwoWay
Данные идут в обе
стороны. Меняется
источник —
обновляется цель.
Меняется цель —
обновляется
источник.
Для редактируемых
полей (TextBox,
CheckBox)
OneTime
Данные идут от
источника к цели
только один раз (при
запуске). Дальше
изменения не
отслеживаются.
Для статических
данных
•TextBox → TwoWay
•TextBlock → OneWay

7. INotifyPropertyChanged

• Чтобы при изменении данных в коде интерфейс обновлялся
автоматически, класс должен реализовать интерфейс
INotifyPropertyChanged.

8. Привязка к коллекциям

• Для отображения списков используется свойство ItemsSource.
• В коде C# (ViewModel):
• ObservableCollection автоматически уведомляет ListBox об
изменениях (добавление, удаление).

9. DisplayMemberPath и DataTemplate

• DisplayMemberPath — простое отображение одного свойства:
• DataTemplate — сложное отображение (несколько свойств в
одном элементе):

10. SelectedItem (выбранный элемент)

• Чтобы получить выбранный элемент из списка, привяжите
свойство SelectedItem.
• В XAML:
• В ViewModel:

11. Команды (ICommand)

• Вместо событий Click во ViewModel используются команды
(ICommand).
• В XAML:
• В ViewModel:

12. Полный пример MVVM

• Model (класс Person):
• View (XAML):
ViewModel:

13. Итоги

• Data Binding — связь между UI и данными без прямого
обращения к элементам
• DataContext — источник данных
• OneWay — только для отображения
• TwoWay — для редактирования
• INotifyPropertyChanged — для автоматического обновления UI
• ObservableCollection — для списков, которые меняются
• ICommand — для обработки действий в MVVM

14. Задание 1. Простая привязка к объекту

Что сделать:
• Создайте WPF проект.
• Создайте класс Person с полями: Name, Age, City.
• Реализуйте в классе INotifyPropertyChanged.
• В MainWindow.xaml разместите:
• 3 TextBlock для вывода данных
• 3 TextBox для редактирования данных
• Кнопку «Показать данные» (выводит MessageBox с введёнными данными)
• В MainWindow.xaml.cs создайте объект Person и присвойте
его DataContext окна.
• Свяжите TextBlock и TextBox с соответствующими свойствами.
Что должно работать:
• При запуске данные отображаются
• При изменении текста в TextBox данные в объекте меняются
• Кнопка показывает актуальные данные

15. Задание 2. Привязка к коллекции

Что сделать:
• Создайте класс Product с полями: Name, Price.
• Создайте ObservableCollection<Product> в ViewModel.
• На форме разместите:
ListBox для отображения списка продуктов
TextBlock для вывода выбранного продукта (свяжите с SelectedItem)
TextBox для ввода названия нового продукта
TextBox для ввода цены нового продукта
Кнопку «Добавить продукт»
Кнопку «Удалить выбранный продукт»
• Используйте DataTemplate для отображения продуктов в формате: «Название — Цена руб.»
Что должно работать:
• Список продуктов отображается в ListBox
• При выборе продукта его данные показываются в TextBlock
• При добавлении нового продукта список обновляется автоматически
• При удалении продукта список обновляется автоматически

16. Задание 3. Фильтрация списка

Что сделать:
• Создайте класс Product с полями: Name, Category, Price.
• Создайте ViewModel с:
• ObservableCollection<Product> — все продукты
• string SearchText — текст для поиска
• ICollectionView FilteredProducts — отфильтрованный список
• На форме разместите:
TextBox для ввода поискового текста (TwoWay, UpdateSourceTrigger=PropertyChanged)
ComboBox для выбора категории (Все, Еда, Техника, Одежда)
ListBox для отображения отфильтрованных продуктов
TextBlock для подсчёта количества найденных продуктов
• Реализуйте фильтрацию по названию и категории.
Что должно работать:
• При вводе текста в поле поиска список фильтруется автоматически
• При выборе категории список фильтруется автоматически
• Счётчик показывает количество найденных продуктов