Заполнение данными TreeView в WPF используя MVVM

C#

Сегодня, в данной статье мы научимся заполнять иерархическими данными TreeView в WPF использую MVVM.

Для примера давайте возьмем иерархическую структуру данных Город — Улица — Дом

Шаг 1 Создание нового проекта

Создадим новое приложение WPF в Visual Studio 2022  и назовем его «TreeViewMVVMExample»

Заполнение данными TreeView в WPF используя MVVM

Шаг 2 Класс InotifyPropertyChanged

  1. Добавим новый класс и назовем его «ViewModelBase». Этот базовый класс уведомляет клиент, что свойства изменились.
  2. Добавим в код «PropertyChangedEventHandler»
  3. В итоге класс должен выглядеть следующим образом:

Шаг 3 Класс House

  1. Создадим класс Alt+Shift+C и назовем его «House». Это класс необходим для определения структуры для Дома
  2. Установим поля необходимые для дома. В нашем примере это номер дом(HouseNumber)
  3. Унаследуем этот класс от ViewModelBase и реализуем уведомление об изменении свойств полей.
  4. В итоге получаем следующий код:

Шаг 4 Класс Street

  1. Создадим класс Alt+Shift+C и назовем его Street. Это будет модель отвечающая за структуру Улицы на которой могут находится множество домов.
  2. Добавим свойство отвечающие за наименование улицы
  3. Добавим в класс свойство содержащие список с домами
  4. Класс будет наследником ViewModelBase и в нем будет реализовано уведомление об изменении свойств
  5. В конструктор передаем название улицы и для теста создадим по 3 тестовых домов.
  6. Код класса Street

Шаг 5 Класс City

  1. Создадим класс Alt+Shift+C и назовем его City. Этот класс будет моделировать структуру Города.
  2. Создадим свойство содержащие наименование города
  3. Создадим свойство в котором будет хранится список улиц
  4. В конструкторе заполним все свойства тестовыми данными
  5. Класс является наследником ViewModelBase
  6. Код класса City

Мы завершили создание базовых классов модели нашего примера. Теперь нужно связать их  с TreeView для вывода информации в иерархическом порядке.

Шаг 6 ViewModel для привязки данных к datacontext

  1. Создадим новый класс и назовем его «MainWindowViewModel«. Он является ViewModel для нашего View «MainWindow»
  2. Код выглядит следующим образом

Шаг 7 Создаем View

  1. Добавим DataContext с указанием на MainWindowViewModel в файл MainWindow.xaml
  2. Добавим в конструктор класса MainWindow.cs DataContext = new MainWindowViewModel();
    Заполнение данными TreeView в WPF используя MVVM
  3. Код для MainWindow.xaml будет следующим

    Мы завершили наш проект. Попробуем запустить код и в итоге должно появиться следующие окно

    Заполнение данными TreeView в WPF используя MVVM

Добавить комментарий