WPFの極意：DataTemplateSelectorで「データの魂」を視覚化する —— 業務アプリケーションをプロ級に変える動的UI構築術
こんにちは。開発の現場へようこそ。
「マクロの記録や、単純なコントロールの配置はできるようになった。でも、もっと複雑な業務システムを作りたい。例えば、データの状態によって見た目をガラッと変えるような、プロが作ったような画面はどう作るのか？」
そんな風に感じているなら、あなたは今、エンジニアとして非常に重要なステップに立っています。今日お話しするのは、WPF（Windows Presentation Foundation）における「データの状態に応じた見た目の切り替え」という、中級者への登竜門となるテクニックです。
単にリストを表示するだけでなく、データの「意味」を視覚的に伝える。これをマスターすれば、あなたの作るアプリケーションの価値は劇的に向上します。さあ、一緒に深淵なるWPFの世界を覗いてみましょう。
1. なぜ「DataTemplate」だけでは足りないのか？
まず、基本をおさらいしましょう。WPFでリスト（`ListBox`や`ListView`）を表示するとき、私たちは必ず `DataTemplate` を使います。
`DataTemplate` とは、いわば「データの設計図」です。「このデータ型のときは、このレイアウトで表示してね」と指示を出すものです。
しかし、実務の現場ではこういった要求が必ず飛び込んできます。
- 「未完了のタスクは、目立つように赤い枠で表示してほしい」
- 「完了したタスクは、文字をグレーアウトして、チェックアイコンを添えてほしい」
- 「エラーが発生している行は、背景色を変えて警告してほしい」
一つの `DataTemplate` の中で `Visibility`（表示/非表示）を細かく制御してこれを行うことも可能ですが、条件が増えるたびに XAML がスパゲッティのように複雑になり、メンテナンス性は最悪になります。
ここで登場するのが、`DataTemplateSelector` です。
概念図：司令塔としてのSelector
- DataTemplate: 「個別の衣装（デザイン）」
- DataTemplateSelector: 「どんな衣装を着せるかを決めるスタイリスト（判定ロジック）」
スタイリスト（Selector）が、データの状態を見て、「君は『警告用』の衣装を着なさい」「君は『通常用』の衣装だ」と指示を出す。この役割分担こそが、美しい設計の鍵なのです。
2. 実践：動的なタスク管理リストを構築する
では、具体的なコードを見ていきましょう。
「タスクの名前」と「そのステータス（未着手・進行中・完了）」を持つリストを例にします。
ステップ1：データモデルの定義 (VB.NET)
まずは、表示対象となるデータの定義です。
''' <summary>
''' タスクのステータスを定義する列挙型
''' </summary>
Public Enum TaskStatus
Todo
InProgress
Completed
End Enum
''' <summary>
''' リストに表示するタスクの情報
''' </summary>
Public Class TaskItem
Public Property Title As String
Public Property Status As TaskStatus
End Classステップ2：スタイリスト（DataTemplateSelector）の実装 (VB.NET)
ここが今回の心臓部です。`DataTemplateSelector` クラスを継承して、独自の判定ロジックを書き込みます。
Imports System.Windows
Imports System.Windows.Markup
''' <summary>
''' タスクのステータスに応じて、適用するDataTemplateを選択するクラス
''' </summary>
Public Class TaskTemplateSelector
Inherits DataTemplateSelector
' XAML側から各テンプレートを注入するためのプロパティ
Public Property TodoTemplate As DataTemplate
Public Property InProgressTemplate As DataTemplate
Public Property CompletedTemplate As DataTemplate
''' <summary>
''' データの状態を判定し、適切なテンプレートを返す
''' </summary>
''' <param name="item">判定対象のデータオブジェクト</param>
''' <param name="container">表示されるコンテナ</param>
''' <returns>選択されたDataTemplate</returns>
Public Overrides Function SelectTemplate(item As Object, container As DependencyObject) As DataTemplate
' itemをTaskItem型にキャストして判定
Dim task = TryCast(item, TaskItem)
If task Is Nothing Then Return Nothing
' ステータスに応じて、用意されたテンプレートを切り替える
Select Case task.Status
Case TaskStatus.Todo
Return TodoTemplate
Case TaskStatus.InProgress
Return InProgressTemplate
Case TaskStatus.Completed
Return CompletedTemplate
Case Else
Return Nothing
End Select
End Function
End Classステップ3：XAMLでのレイアウト定義
次に、UI側の設計図を書きます。ここでは「3つの異なるデザイン」と「それを制御するセレクター」を定義します。
<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:YourProjectNamespace"
Title="Task Manager" Height="450" Width="400">
<Window.Resources>
<!-- 1. 未着手用のテンプレート: シンプルな青い文字 -->
<DataTemplate x:Key="TodoTemplate">
<StackPanel Orientation="Horizontal" Margin="5">
<Ellipse Width="10" Height="10" Fill="LightBlue" Margin="5"/>
<TextBlock Text="{Binding Title}" FontSize="14" VerticalAlignment="Center"/>
</StackPanel>
</DataTemplate>
<!-- 2. 進行中用のテンプレート: オレンジの枠線で強調 -->
<DataTemplate x:Key="InProgressTemplate">
<Border BorderBrush="Orange" BorderThickness="2" CornerRadius="5" Margin="5" Padding="5">
<StackPanel Orientation="Horizontal">
<TextBlock Text="▶ " Foreground="Orange" FontWeight="Bold"/>
<TextBlock Text="{Binding Title}" FontSize="14" VerticalAlignment="Center"/>
</StackPanel>
</Border>
</DataTemplate>
<!-- 3. 完了用のテンプレート: グレーアウトして打ち消し線 -->
<DataTemplate x:Key="CompletedTemplate">
<StackPanel Orientation="Horizontal" Margin="5">
<TextBlock Text="✔ " Foreground="Green" Margin="5"/>
<TextBlock Text="{Binding Title}" FontSize="14" Foreground="Gray" TextDecorations="Strikethrough"/>
</StackPanel>
</DataTemplate>
<!-- Selectorのインスタンス化: ここで各テンプレートを紐付ける -->
<local:TaskTemplateSelector x:Key="MyTaskSelector"
TodoTemplate="{StaticResource TodoTemplate}"
InProgressTemplate="{StaticResource InProgressTemplate}"
CompletedTemplate="{StaticResource CompletedTemplate}"/>
</Window.Resources>
<Grid>
<!-- ListViewにSelectorを適用 -->
<ListView ItemsSource="{Binding TaskList}"
ItemTemplateSelector="{StaticResource MyTaskSelector}"
Margin="10"/>
</Grid>
</Window>*(※ `YourProjectNamespace` はご自身のプロジェクト名に書き換えてくださいね)*
3. 伝説のアーキテクトが教える「陥りやすい罠」と「極意」
ここまで実装できれば、あなたはもう「ただのプログラマー」ではありません。しかし、プロの現場では、実装できることよりも「正しく、効率的に実装すること」が求められます。
① 判定ロジックは「重く」しないこと
`SelectTemplate` メソッドは、リストのアイテムが表示されるたびに呼び出されます。もしこの中でデータベースにアクセスしたり、複雑な計算を行ったりすると、スクロールするたびに画面がカクつきます（これを「UIスレッドのブロッキング」と呼びます）。
「判定は、プロパティの比較だけで終わらせる」。これが鉄則です。
② Converterとの使い分け
よく「`IValueConverter` で色を変えればいいのでは？」という質問を受けます。
- Converter: 「値（色や文字）」を変換するもの。
- Selector: 「見た目（構造そのもの）」を切り替えるもの。
「文字の色を変えるだけ」ならConverterで十分ですが、「アイコンを追加したり、枠線を追加したり、レイアウト自体を変えたい」なら、迷わずSelectorを選んでください。
③ オブジェクトのライフサイクルへの敬意
`DataTemplate` が切り替わる際、WPFは内部で古い要素を破棄し、新しい要素を生成します。大量のデータを扱う場合、あまりに複雑すぎるテンプレートをSelectorで激しく切り替えると、メモリ消費量が増大する可能性があります。デザインは「シンプルかつ、意図が伝わるもの」に留めるのが、真のプロフェッショナルです。
まとめ：視覚的な情報の整理が、ユーザーの信頼を生む
いかがでしたでしょうか？
`DataTemplateSelector` を使いこなせるようになると、ユーザーは「文字を読まなくても、リストの状況が直感的にわかる」ようになります。この「直感的な操作性」こそが、優れた業務アプリケーションの絶対条件です。
最初は XAML と VB.NET の連携に戸惑うかもしれません。でも、大丈夫。コードの意味を一つずつ紐解き、実際に動かして、エラーと戦った分だけ、あなたの技術は血肉となります。
ここをクリアすれば、WPFの基本はバッチリですよ。
さあ、自信を持って、次の素晴らしいアプリケーションを作り始めてください！応援しています。
