MVVM Pattern in C#

The MVVM (Model-View-ViewModel) pattern is a powerful architectural pattern used primarily in C# and .NET applications, especially WPF (Windows Presentation Foundation), Xamarin, and MAUI. It promotes separation of concerns and enhances testability, scalability, and maintainability of UI applications.

🔷 What is MVVM?

MVVM stands for:

• Model – Represents the application's data and business logic.
• View – The UI (XAML files in WPF/Xamarin). It displays data and receives user input.
• ViewModel – An abstraction of the View. It exposes data and commands to the View and handles UI logic.

🔁 MVVM Flow Diagram

[View (XAML)] ⇄ [ViewModel (C#)] ⇄ [Model (C#)]

• View binds to properties/commands in the ViewModel.
• ViewModel manipulates Model and updates View through data binding.
• Communication is one-way or two-way binding, especially in WPF.

🔍 Components Explained

1. Model

• Represents data structures and business logic.
• Often uses POCO classes (Plain Old CLR Objects).
• No reference to UI or ViewModel.

public class Product
{
    public string Name { get; set; }
    public decimal Price { get; set; }
}

2. View

• Defined in XAML.
• Binds UI elements to ViewModel properties and commands.
• Should not contain logic.

<TextBox Text="{Binding ProductName}" />
<Button Command="{Binding SaveCommand}" Content="Save" />

3. ViewModel

• Implements INotifyPropertyChanged for data binding.
• Contains properties and commands used by the View.
• Does not reference the View directly (testable & decoupled).

public class ProductViewModel : INotifyPropertyChanged
{
    private string _productName;
    public string ProductName
    {
        get => _productName;
        set
        {
            _productName = value;
            OnPropertyChanged(nameof(ProductName));
        }
    }

    public ICommand SaveCommand { get; }

    public ProductViewModel()
    {
        SaveCommand = new RelayCommand(SaveProduct);
    }

    private void SaveProduct()
    {
        // Logic to save product
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged(string name) =>
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}

🛠 Supporting Concepts

🔹 INotifyPropertyChanged

Enables the ViewModel to notify the View when a property changes.

🔹 ICommand

Allows ViewModel to expose commands to the View (e.g., button click handlers).

public class RelayCommand : ICommand
{
    private readonly Action _execute;
    private readonly Func<bool> _canExecute;
    public RelayCommand(Action execute, Func<bool> canExecute = null)
    {
        _execute = execute;
        _canExecute = canExecute;
    }

    public bool CanExecute(object parameter) => _canExecute?.Invoke() ?? true;
    public void Execute(object parameter) => _execute();
    public event EventHandler CanExecuteChanged;
}

✅ Benefits of MVVM

⚠️ MVVM Anti-Patterns to Avoid

• ViewModel becoming too fat (handling too much business logic).
• Adding UI logic directly in the ViewModel (e.g., animations).
• Binding directly to Model objects without abstraction.

📚 MVVM in Frameworks

🧰 Tools & Libraries

• MVVM Light Toolkit
• Prism
• CommunityToolkit.Mvvm (official .NET MVVM toolkit)
• ReactiveUI

🔚 Summary

MVVM is ideal for UI-centric .NET apps. It separates responsibilities and enables cleaner code. Learning and applying MVVM effectively, especially with data binding and command patterns, is essential for building modern desktop and mobile applications in the .NET ecosystem.

🔷 MVVM vs MVC

🔍 Quick Comparison Table

🧩 Conceptual Breakdown

MVC (Model–View–Controller)

• Model – Business logic and data.
• View – UI presentation (HTML, Razor, etc.).
• Controller – Handles user input, updates model, and selects the view.

Example (ASP.NET MVC):

public class ProductController : Controller
{
    public ActionResult Details(int id)
    {
        var product = db.Products.Find(id);
        return View(product);
    }
}

• Works well for web apps, where user interaction happens via HTTP requests.
• Less focus on real-time UI state updates.

MVVM (Model–View–ViewModel)

• Model – Business data and logic.
• View – UI (XAML in WPF/Xamarin).
• ViewModel – Exposes properties and commands bound to the View.

Example (WPF MVVM):

<TextBox Text="{Binding ProductName, Mode=TwoWay}" />
<Button Command="{Binding SaveCommand}" Content="Save" />

• Suited for rich UIs with real-time interactions, like desktop or mobile.
• ViewModel handles UI logic without touching UI elements directly.

🔁 Workflow Differences

MVC Flow:

User Input → Controller → Model → Controller → View → User

MVVM Flow:

User Input → View → ViewModel ↔ Model
                        ↓
                  Data Binding
                        ↓
                    View Update

✅ When to Use What

🧠 Summary

• MVC is a better fit for web applications where user interaction follows a request/response pattern.
• MVVM shines in desktop/mobile apps where real-time UI updates and state management are critical.
• Both encourage separation of concerns but serve different interaction models and platforms.