---

The Model–View–ViewModel (MVVM) Quest

Setting: The Kingdom of WPFia, where programmers forge their apps with clarity and structure.
Goal: Learn how MVVM works — by building a mini “RPG slideshow” that displays a hero’s journey through text and images.

---

Act 1: The Map of MVVM

Before we code, imagine this.

• Model = The data scrolls of your world. They hold truth: hero names, health, and lore.
• View = The window to the realm. It’s what users see — buttons, images, labels.
• ViewModel = The messenger wizard. It talks to both sides: fetching data from the Model, preparing it, and handing it to the View without them ever meeting directly.

The View never talks to the Model. It only talks to the ViewModel, as if the wizard interprets everything.

---

Act 2: The Project Setup

1. Open Visual Studio
2. Create a new project → WPF App (.NET Framework)
3. Name it RPGMVVMApp

You’ll have:

MainWindow.xaml
MainWindow.xaml.cs
App.xaml

Now we’ll build three layers — Model, ViewModel, and View.

---

Act 3: The Model (Data Scrolls)

Create a folder called Models and add a class:

namespace RPGMVVMApp.Models
{
    public class Hero
    {
        public string Name { get; set; }
        public string ImagePath { get; set; }
        public string Quote { get; set; }
    }
}

This is your hero’s record — name, portrait, and a line of dialogue.

---

Act 4: The ViewModel (The Messenger Wizard)

Create a folder called ViewModels and add a class called HeroViewModel.cs:

using System.Collections.ObjectModel;
using RPGMVVMApp.Models;

namespace RPGMVVMApp.ViewModels
{
    public class HeroViewModel
    {
        public ObservableCollection<Hero> Heroes { get; set; }

        public HeroViewModel()
        {
            Heroes = new ObservableCollection<Hero>
            {
                new Hero { Name="Aeris the Brave", ImagePath="Images/hero1.png", Quote="Courage is the quiet voice that says 'try again'." },
                new Hero { Name="Luna of the Vale", ImagePath="Images/hero2.png", Quote="The stars whisper to those who listen." },
                new Hero { Name="Korran the Flame", ImagePath="Images/hero3.png", Quote="Fire tests all things." }
            };
        }
    }
}

An ObservableCollection is like a magic chest that notifies the View when something changes inside.

---

Act 5: The View (The Window to the Realm)

In MainWindow.xaml, bind your View to the ViewModel:

<Window x:Class="RPGMVVMApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Hero Slideshow" Height="400" Width="600"
        Background="#222">
    <ScrollViewer>
        <ItemsControl ItemsSource="{Binding Heroes}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Border BorderBrush="Gold" BorderThickness="2" Margin="10" Padding="10">
                        <StackPanel>
                            <Image Source="{Binding ImagePath}" Height="150"/>
                            <TextBlock Text="{Binding Name}" FontSize="24" Foreground="White" TextAlignment="Center"/>
                            <TextBlock Text="{Binding Quote}" FontSize="16" Foreground="LightGray" TextAlignment="Center"/>
                        </StackPanel>
                    </Border>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </ScrollViewer>
</Window>

This is your slideshow — each hero card is a “slide” showing name, portrait, and quote.

---

Act 6: The Binding Ritual

Finally, connect the wizard to the window. In MainWindow.xaml.cs:

using RPGMVVMApp.ViewModels;

namespace RPGMVVMApp
{
    public partial class MainWindow
    {
        public MainWindow()
        {
            InitializeComponent();
            DataContext = new HeroViewModel();
        }
    }
}

The DataContext is the link between your View (window) and ViewModel (wizard).
Now when the app runs, your heroes appear without a single line of code in the UI saying “add this hero.” That’s the magic of MVVM: separation of powers.

---

Act 7: Expanding the Kingdom

Once learners grasp this, you can:

• Add a “Next Hero” button (Command binding)
• Add XP and Level properties (Model logic)
• Animate slides with WPF transitions

You’ve built your first MVVM architecture without realizing you were learning a design pattern — you were just building a story-driven app. That’s the secret to MVVM: the wizard always talks to the world on your behalf.

---