Back to Skills

mapping-viewmodel-view-datatemplate

verified

Implements automatic ViewModel-View mapping using DataTemplate for navigation scenarios. Use when building dynamic content display or implementing navigation between views in WPF/AvaloniaUI.

View on GitHub

Marketplace

dotnet-claude-plugins

christian289/dotnet-with-claudecode

Plugin

wpf-dev-pack

development

Repository

christian289/dotnet-with-claudecode
5stars

wpf-dev-pack/skills/mapping-viewmodel-view-datatemplate/SKILL.md

Last Verified

January 23, 2026

Install Skill

Select agents to install to:

Scope:
npx add-skill https://github.com/christian289/dotnet-with-claudecode/blob/main/wpf-dev-pack/skills/mapping-viewmodel-view-datatemplate/SKILL.md -a claude-code --skill mapping-viewmodel-view-datatemplate

Installation paths:

Claude
.claude/skills/mapping-viewmodel-view-datatemplate/
Powered by add-skill CLI

Instructions

# 5.8 Automatic View-ViewModel Mapping Using DataTemplate

In WPF, DataTemplate allows automatic mapping between ViewModel types and Views. This pattern is very useful for navigation scenarios and dynamic content display.

## Project Structure

The templates folder contains a .NET 9 WPF project example.

```
templates/
├── WpfDataTemplateSample.App/           ← WPF Application Project
│   ├── Views/
│   │   ├── HomeView.xaml
│   │   ├── HomeView.xaml.cs
│   │   ├── SettingsView.xaml
│   │   └── SettingsView.xaml.cs
│   ├── App.xaml
│   ├── App.xaml.cs
│   ├── MainWindow.xaml
│   ├── MainWindow.xaml.cs
│   ├── Mappings.xaml                    ← DataTemplate mapping definitions
│   ├── GlobalUsings.cs
│   └── WpfDataTemplateSample.App.csproj
└── WpfDataTemplateSample.ViewModels/    ← ViewModel Class Library
    ├── MainWindowViewModel.cs
    ├── HomeViewModel.cs
    ├── SettingsViewModel.cs
    ├── GlobalUsings.cs
    └── WpfDataTemplateSample.ViewModels.csproj
```

#### 5.8.1 Core Concept

**When you bind a ViewModel instance to ContentControl's Content, WPF automatically finds the corresponding DataTemplate for that ViewModel type and renders the View.**

Key points of this pattern:
1. Define DataTemplates for each ViewModel type in `Mappings.xaml`
2. Bind ViewModel instances to `ContentControl.Content`
3. WPF automatically matches types and renders the corresponding View

#### 5.8.2 Mappings.xaml Pattern

**Mappings.xaml - Define ViewModel and View mappings:**

```xml
<!-- Mappings.xaml -->
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:viewmodels="clr-namespace:WpfDataTemplateSample.ViewModels"
                    xmlns:views="clr-namespace:WpfDataTemplateSample.Views">

    <!--  DataTemplate definitions that automatically map ViewModel to View  -->
    <!--  Setting ViewModel to ContentControl's Content automatically renders

Validation Details

Front Matter
Required Fields
Valid Name Format
Valid Description
Has Sections
Allowed Tools
Instruction Length:
11122 chars