Упражнение №6 - Разширение на .NET MAUI и WPF

Table of contents

Въведение

Цел на упражнението

Запознаване с Data Binding при промяна на данни, използване на INotifyPropertyChanged, ObservableCollection и ICommand.

Задачите в упражнението изграждат:

• Четири отделни примерни проекта

В това упражнение:

• Работа с ObservableCollection и ICommand
• Имплементация на ViewModel в отделен клас
• Прилагане на MVVM архитектурен шаблон

Очакван резултат

Ще създадем WPF приложение, което следи разходи, обработва команди и организира кода чрез MVVM.

Задачи за домашна работа

1. Променете проекта UI, така че да следва MVVM.
2. Създайте нов ViewModel, който преобразува въведен текст в малки букви.
3. Добавете възможност за превключване на ViewModel, за да управлявате различни режими на работа.

Важни концепции

• INotifyPropertyChanged – уведомяване за промени в данни
• ObservableCollection – динамичен списък, който автоматично обновява UI
• ICommand – механизъм за работа с команди
• MVVM – архитектурен шаблон за разделяне на логика и UI

Зареждане на проект в Visual Studio

1. Отворете Visual Studio.
2. Заредете Solution-а от предишните упражнения.
3. Създайте нов WPF проект с име WpfExample.
4. Добавете папки:

• View
• ViewModel
• Model

Създаване на InfoCommand

Имплементация на ICommand

1. В папка ViewModel → Add → New Item… → Class → InfoCommand.cs.
2. Добавете следния код:

using System;
using System.Windows;
using System.Windows.Input;

public class InfoCommand : ICommand
{
    public event EventHandler CanExecuteChanged;
    public bool CanExecute(object parameter) => true;

    public void Execute(object parameter)
    {
        MessageBox.Show("Hello, world!");
    }
}

Свързване на контроли към команди

1. Създайте поле за командата в MainWindow.xaml.cs:

private InfoCommand _infoCommand = new InfoCommand();
public InfoCommand InformationCommand => _infoCommand;

2. Свържете Command в MainWindow.xaml:

<Button Content="Info" Command="{Binding InformationCommand}" />

Добавяне на ViewModel и свързване на UI с него

Създаване на MainWindowViewModel

1. В папка ViewModel → Add → New Item… → Class → MainWindowViewModel.cs.
2. Имплементирайте INotifyPropertyChanged и добавете ObservableCollection:

using System.Collections.ObjectModel;
using System.ComponentModel;

public class MainWindowViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged(string propertyName) => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));

    private ObservableCollection<string> _history = new ObservableCollection<string>();
    public ObservableCollection<string> History
    {
        get => _history;
        set { _history = value; OnPropertyChanged(nameof(History)); }
    }
}

3. Свържете ViewModel с MainWindow.xaml:

<Window.DataContext>
    <local:MainWindowViewModel />
</Window.DataContext>

Добавяне на команди с параметри

Създаване на AddCommand

1. В папка ViewModel → Add → New Item… → Class → AddCommand.cs.
2. Добавете следния код:

using System;
using System.Windows.Input;

public class AddCommand : ICommand
{
    public event EventHandler CanExecuteChanged;
    public bool CanExecute(object parameter) => parameter is MainWindowViewModel;

    public void Execute(object parameter)
    {
        if (parameter is MainWindowViewModel vm)
        {
            vm.History.Add("New Entry");
        }
    }
}

3. Добавете командата в MainWindowViewModel:

private ICommand _addCommand;
public ICommand AddCommand => _addCommand ??= new AddCommand();

4. Свържете я с UI в MainWindow.xaml:

<Button Content="Add" Command="{Binding AddCommand}" CommandParameter="{Binding}" />

Заключение

След изпълнението на тези стъпки ще имаме WPF приложение, което използва MVVM, команди и ObservableCollection, за да управлява UI динамично.

Бележка: В следващи упражнения ще добавим сложна навигация и по-добра организация на ViewModel-ите.