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 GitHubchristian289/dotnet-with-claudecode
wpf-dev-pack
wpf-dev-pack/skills/mapping-viewmodel-view-datatemplate/SKILL.md
January 23, 2026
Select agents to install to:
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-datatemplateInstallation paths:
.claude/skills/mapping-viewmodel-view-datatemplate/# 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