📅 Hour 1 – MVVM Basics & CommunityToolkit.Mvvm Introduction

📅 Hour 1 – MVVM Basics & CommunityToolkit.Mvvm Introduction

📘1. Understanding MVVM (Model–View–ViewModel)

MVVM is a UI architectural pattern used in .NET MAUI, WPF, WinUI, Xamarin, UWP. It separates the UI from the logic.

• 📄 Model: Represents data, entities, and backend logic.
• 🖼️ View: The UI (XAML). Displays data from the ViewModel.
• 🧠 ViewModel: The brain. Exposes properties & commands for the UI.

Why MVVM?

• 🔄 Keeps UI and logic separate
• 🔧 Easy to test
• 📦 Reusable ViewModels
• ⚡ Clean and maintainable structure

Why it matters: testability, clean separation, easier maintenance.

public partial class SampleViewModel : ObservableObject { [ObservableProperty] public partial string InputText { get; set; } = string.Empty;
public IRelayCommand SubmitCommand { get; }

public SampleViewModel()
{
    SubmitCommand = new RelayCommand(Submit, CanSubmit);
}

private void Submit() { /* trigger use case */ }

private bool CanSubmit() => !string.IsNullOrWhiteSpace(InputText);
}

---

🧰 2. What is CommunityToolkit.Mvvm?

The .NET Community Toolkit MVVM library is a lightweight, modern MVVM framework developed by Microsoft.

It provides:

• ✨ Source generators (automatic code generation)
• 📢 ObservableObject (INotifyPropertyChanged implementation)
• ⚙️ ObservableProperty attributes
• 🎛️ RelayCommand & AsyncRelayCommand
• 📡 Messenger for ViewModel communication

Why use this toolkit?

• 🚀 Removes boilerplate code
• 🔍 Cleaner ViewModels
• ⚡ Much faster than manual implementations

---

🧩3. Understanding INotifyPropertyChanged

INotifyPropertyChanged is an interface that notifies the UI whenever a property changes.

Manual Implementation Example:

public class Person : INotifyPropertyChanged
{
    private string name;

    public string Name
    {
        get => name;
        set
        {
            if (name != value)
            {
                name = value;
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(Name)));
            }
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
}

😫 This is long and repetitive — the Toolkit solves this!

---

📦 4. ObservableObject – Toolkit Implementation

ObservableObject already contains INotifyPropertyChanged logic.

Example:

public class PersonViewModel : ObservableObject
{
    private string name;

    public string Name
    {
        get => name;
        set => SetProperty(ref name, value);
    }
}

🎉 No need to write events manually.

---

✨ 5. Toolkit Auto-Generated Properties

You can also use the [ObservableProperty] attribute to generate properties automatically.

Example:

public partial class PersonViewModel : ObservableObject
{
    [ObservableProperty]
    private string name;
}

This creates:

• 📌 A property Name
• 📌 Automatic PropertyChanged notifications

Generated property is equivalent to this:

// Auto-generated by the toolkit
public string Name
{
    get => name;
    set => SetProperty(ref name, value);
}

---

📥 6. Installing MVVM Toolkit

Use this command in your project folder:

dotnet add package CommunityToolkit.Mvvm

---

🛠️ 7. Hands-On Tasks for hour 1

• 📁 Create a new MAUI/WPF project
• ➕ Add the CommunityToolkit.Mvvm NuGet package
• 🧪 Create a new ViewModel deriving from ObservableObject
• ✍️ Add a property using both:
  • Manual INotifyPropertyChanged
  • Toolkit’s [ObservableProperty]
• 🔗 Bind the property to a Label/TextBlock
• 👀 Change the property and observe UI updates

---

📚 Hour 1 Example Practice ViewModel

public partial class MainViewModel : ObservableObject
{
    [ObservableProperty]
    private string title = "Welcome to MVVM Toolkit";

    [ObservableProperty]
    private int counter;

    public void Increment()
    {
        Counter++;
    }
}

Bind this in XAML:

<Label Text="{Binding Title}" />
<Label Text="{Binding Counter}" />

Result:

• 🏷️ UI updates automatically
• ⚡ No need for manual events