WPF の DataTemplate を活用した MVVM パターンの実践

はじめに

業務でたまたま見ていて気になったので・・・
WPF (Windows Presentation Foundation) では、DataTemplate を活用することで、ViewModel のデータに応じて柔軟な UI を作成できます。本記事では、MVVM (Model-View-ViewModel) パターンを用いて、DataTemplate を使い分ける方法を解説します。

DataTemplate の基礎

DataTemplate とは、データをどのように表示するかを定義するテンプレートです。例えば、ListBox のアイテムにカスタム UI を適用することができます。

<ListBox ItemsSource="{Binding Items}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="{Binding Name}" FontWeight="Bold" />
                <TextBlock Text="{Binding Description}" FontStyle="Italic" />
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

DataTemplateSelector を使った UI の切り替え

DataTemplateSelector とは？

DataTemplateSelector を使用すると、データの種類に応じて異なる DataTemplate を動的に適用できます。たとえば、アイテムの種類によって表示を変えたい場合に便利です。

実装手順

1. ViewModel の定義

まず、異なる種類のデータを表す ViewModel を定義します。

public abstract class ItemViewModel {}

public class TextItemViewModel : ItemViewModel
{
    public string Text { get; set; }
}

public class ImageItemViewModel : ItemViewModel
{
    public string ImagePath { get; set; }
}

2. DataTemplateSelector の実装

次に、DataTemplateSelector を作成します。

public class ItemTemplateSelector : DataTemplateSelector
{
    public DataTemplate TextTemplate { get; set; }
    public DataTemplate ImageTemplate { get; set; }

    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        return item switch
        {
            TextItemViewModel => TextTemplate,
            ImageItemViewModel => ImageTemplate,
            _ => base.SelectTemplate(item, container)
        };
    }
}

3. XAML で DataTemplateSelector を適用

XAML で DataTemplate を定義し、ItemTemplateSelector を適用します。

<Window.Resources>
    <DataTemplate x:Key="TextItemTemplate">
        <TextBlock Text="{Binding Text}" Foreground="Blue" />
    </DataTemplate>

    <DataTemplate x:Key="ImageItemTemplate">
        <Image Source="{Binding ImagePath}" Width="100" Height="100" />
    </DataTemplate>

    <local:ItemTemplateSelector x:Key="ItemSelector"
        TextTemplate="{StaticResource TextItemTemplate}"
        ImageTemplate="{StaticResource ImageItemTemplate}" />
</Window.Resources>

<ListBox ItemsSource="{Binding Items}" ItemTemplateSelector="{StaticResource ItemSelector}" />

まとめ

WPF の DataTemplate と DataTemplateSelector を組み合わせることで、MVVM パターンに沿った柔軟な UI の実装が可能になります。本記事では、異なる種類の ViewModel に基づいて UI を切り替える方法を解説しました。

これを応用すれば、リッチな UI を持つ WPF アプリケーションを効率的に開発できます！