WPFの実践的極意：DataTemplateSelectorで実現する、動的かつ堅牢な業務一覧UIの設計思想
業務アプリケーションの開発において、避けて通れないのが「一覧表示」だ。
しかし、多くの開発者が陥る罠がある。それは、「データの状態によって見た目を変えたい」という要求に対し、一つの巨大なDataTemplateの中で、Visibility（表示/非表示）のバインディングを複雑に絡み合わせるという、泥沼のような設計だ。
もし君が、一つのテンプレート内に `IsUrgentVisible` や `IsCancelledVisible` といったフラグを乱立させているとしたら、今すぐその設計を捨てなさい。それは「保守性」という名のエンジニアリングを放棄した、ただの「動くコード」に過ぎない。
本稿では、WPFの真髄の一つである`DataTemplateSelector`を活用し、データの種類や状態に応じてUIを劇的に、かつクリーンに切り替える、プロフェッショナルな実装手法を伝授する。
1. なぜ「Visibilityの切り替え」ではいけないのか
まず、設計思想の根底にある「責務の分離」について話そう。
単一のテンプレート内で、`Visibility` を使って要素の表示・非表示を制御する手法には、以下の致命的な欠陥がある。
1. 結合度の増大: テンプレートが「すべての状態」を知りすぎてしまう。新しい状態（例：『保留』）が追加されるたびに、既存のテンプレートを書き換え、複雑なトリガーを追加しなければならない。
2. パフォーマンスの劣化: 非表示にしているだけで、UI要素のインスタンス自体はメモリ上に存在し、レイアウト計算の対象となる。数千件のデータがある場合、これが無視できない重みとなる。
3. 可読性の喪失: XAMLが条件分岐の塊となり、本来の「見た目」が何であるか判別不能になる。
我々が目指すべきは、「データが持つ型や状態に基づき、適切なテンプレートを『選択』させる」という、ポリモーフィズム（多態性）に基づいた設計だ。
2. 実践：動的な注文管理リストの構築
具体例として、「注文管理システム」を想定しよう。注文には「通常（Normal）」「至急（Urgent）」「キャンセル（Cancelled）」の3つの状態があり、それぞれ全く異なるレイアウトを表示する必要がある。
Step 1: モデルとViewModelの定義
まずは、データの核となるモデルだ。ここでは、状態を定義する `Enum` を使い、型安全性を確保する。
''' <summary>
''' 注文の状態を定義する列挙型
''' </summary>
Public Enum OrderStatus
Normal
Urgent
Cancelled
End Enum
''' <summary>
''' 注文情報を保持するモデル
''' </summary>
Public Class OrderModel
Public Property OrderId As String
Public Property CustomerName As String
Public Property Amount As Decimal
Public Property Status As OrderStatus
End Class
''' <summary>
''' メインのViewModel
''' </summary>
Public Class MainViewModel
' ObservableCollectionを使用することで、リストの追加・削除をUIに即時反映させる
Public Property Orders As New ObservableCollection(Of OrderModel)()
Public Sub New()
' サンプルデータの投入（実際にはDBやファイルからロードする）
Orders.Add(New OrderModel With {.OrderId = "ORD-001", .CustomerName = "田中 太郎", .Amount = 5000, .Status = OrderStatus.Normal})
Orders.Add(New OrderModel With {.OrderId = "ORD-002", .CustomerName = "佐藤 次郎", .Amount = 15000, .Status = OrderStatus.Urgent})
Orders.Add(New OrderModel With {.OrderId = "ORD-003", .CustomerName = "鈴木 花子", .Amount = 0, .Status = OrderStatus.Cancelled})
End Sub
End ClassStep 2: DataTemplateSelectorの実装
ここが心臓部だ。`DataTemplateSelector` を継承し、`SelectTemplate` メソッドをオーバーライドすることで、「どのデータに、どのテンプレートを適用するか」のロジックを分離する。
重要なルール：Selectorの中で複雑なビジネスロジックを書いてはならない。 Selectorの役割はあくまで「テンプレートの選択」に限定し、判断基準となるプロパティはViewModel側で準備しておくことだ。
Imports System.Windows
''' <summary>
''' 注文の状態に応じて適切なDataTemplateを選択するセレクター
''' </summary>
Public Class OrderTemplateSelector
Inherits DataTemplateSelector
' XAML側から各テンプレートを注入するためのプロパティ
Public Property NormalTemplate As DataTemplate
Public Property UrgentTemplate As DataTemplate
Public Property CancelledTemplate 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
' 型チェックを行い、安全にキャストする
Dim order = TryCast(item, OrderModel)
If order Is Nothing Then Return Nothing
' 状態に応じてテンプレートを振り分ける
Select Case order.Status
Case OrderStatus.Urgent
Return UrgentTemplate
Case OrderStatus.Cancelled
Return CancelledTemplate
Case Else
Return NormalTemplate
End Select
End Function
End ClassStep 3: XAMLによるUI構築
最後に、これらを統合する。XAMLでは、各状態に対応する `DataTemplate` をリソースとして定義し、`Selector` にそれらを紐付ける。
<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="Advanced Order List" Height="450" Width="600">
<Window.Resources>
<!-- 1. 通常の注文用テンプレート -->
<DataTemplate x:Key="NormalTemplate">
<Border BorderBrush="LightGray" BorderThickness="1" Margin="2" Padding="5">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding OrderId}" FontWeight="Bold" Width="80"/>
<TextBlock Text="{Binding CustomerName}" Width="120"/>
<TextBlock Text="{Binding Amount, StringFormat='{}{0:C}'}" Foreground="Black"/>
</StackPanel>
</Border>
</DataTemplate>
<!-- 2. 至急の注文用テンプレート（強調表示） -->
<DataTemplate x:Key="UrgentTemplate">
<Border BorderBrush="Red" BorderThickness="2" Margin="2" Padding="5" Background="#FFFEEBEB">
<StackPanel Orientation="Horizontal">
<TextBlock Text="[至急]" Foreground="Red" FontWeight="ExtraBold" Width="50"/>
<TextBlock Text="{Binding OrderId}" FontWeight="Bold" Width="80"/>
<TextBlock Text="{Binding CustomerName}" Width="120"/>
<TextBlock Text="{Binding Amount, StringFormat='{}{0:C}'}" Foreground="Red" FontWeight="Bold"/>
</StackPanel>
</Border>
</DataTemplate>
<!-- 3. キャンセル済みテンプレート（グレーアウト） -->
<DataTemplate x:Key="CancelledTemplate">
<Border BorderBrush="Gray" BorderThickness="1" Margin="2" Padding="5" Background="#FFE5E5E5">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding OrderId}" Foreground="Gray" Width="80" TextDecorations="Strikethrough"/>
<TextBlock Text="{Binding CustomerName}" Foreground="Gray" Width="120" TextDecorations="Strikethrough"/>
<TextBlock Text="CANCELLED" Foreground="DarkGray" FontWeight="Bold"/>
</StackPanel>
</Border>
</DataTemplate>
<!-- 4. Selectorの定義 -->
<local:OrderTemplateSelector x:Key="MyOrderSelector"
NormalTemplate="{StaticResource NormalTemplate}"
UrgentTemplate="{StaticResource UrgentTemplate}"
CancelledTemplate="{StaticResource CancelledTemplate}"/>
</Window.Resources>
<Grid>
<!-- ItemTemplateSelector プロパティに作成したセレクターを指定する -->
<ListBox ItemsSource="{Binding Orders}"
ItemTemplateSelector="{StaticResource MyOrderSelector}"
HorizontalContentAlignment="Stretch"/>
</Grid>
</Window>3. プロフェッショナルが守るべき「堅牢な設計」の要諦
この実装を実務に投入する際、君が絶対に忘れてはならない注意点が3つある。
① UI Virtualization（UI仮想化）の維持
`ListBox` や `ListView` は、大量のデータを扱う際に「表示されている要素のみを生成する」という仮想化機能を持っている。しかし、複雑な `DataTemplateSelector` を導入した際、テンプレートの構造が極端に異なると、スクロール時のパフォーマンスに影響が出ることがある。
大量のデータを扱う場合は、`VirtualizingStackPanel.IsVirtualizing=”True”` が有効であることを確認し、テンプレート内の要素を過度に複雑にしすぎないこと。
② データベース・ファイル連携時の注意
実務では、`Orders` リストの中身はDBから取得される。このとき、`OrderStatus` のような列挙型は、DBの数値（Integer）や文字列（String）と正しくマッピングされている必要がある。
データのロード中に `Status` が `Nothing`（null）になるケースを想定し、`SelectTemplate` 内での `TryCast` や `Nothing` チェックは、単なる作法ではなく「必須の防御策」である。
③ 変更通知（INotifyPropertyChanged）
もし、リスト表示中に「注文が至急に変わった」という事象が発生した場合、単にモデルのプロパティを書き換えるだけでは、テンプレートは切り替わらない。
`OrderModel` は必ず `INotifyPropertyChanged` を実装し、`Status` プロパティの変更を通知しなければならない。これを行わないエンジニアは、WPFの仕組みを理解していないと見なされる。
結言
`DataTemplateSelector` を使いこなすことは、単に見た目を整えることではない。それは、「データ（Logic）」と「見た目（View）」を、物理的なレイヤーで分離し、変更に強い構造を作るという、アーキテクチャの意思決定である。
「とりあえず動く」コードを書くのは誰にでもできる。しかし、数年後の保守担当者が感謝し、かつ、機能拡張が容易な「美しい」コードを書くことこそが、我々プロフェッショナルに求められる責務なのだ。
