バインド値によってDataGridに表示する画像を変更する

例えばWPFだけで性別によって表示する画像を切り替えたいという時に使います。

まずデータを格納する名前と性別もったPersonクラスを作成。

Person.cs

class Person
{
    public string Name { get; set; }
    public string Gender { get; set; }
}

MainWindow.xaml.csはサンプルデータを3件作り、DataGridにセットするだけ。

MainWindow.xaml.cs

public MainWindow()
{
    InitializeComponent();
    var data = new ObservableCollection<Person>
    {
        new Person { Name="田中太郎", Gender="M" },
        new Person { Name="山田花子", Gender="F" },
        new Person { Name="鈴木一郎", Gender="M" },
    };
    this.dataGrid.ItemsSource = data;
}

画像の分岐はImage.Styleを使います。

MainWindow.xaml

<Grid>
  <DataGrid Name="dataGrid" AutoGenerateColumns="False">
    <DataGrid.Columns>
      <DataGridTextColumn Binding="{Binding Path=Name}" Header="Name" />
      <DataGridTemplateColumn Header="Gender">
        <DataGridTemplateColumn.CellTemplate>
          <DataTemplate>
            <Image>
              <Image.Style>
                <Style>
                  <Style.Triggers>
                    <DataTrigger Binding="{Binding Gender}" Value="M">
                      <Setter Property="Image.Source" Value="Resources/man.png"/>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Gender}" Value="F">
                      <Setter Property="Image.Source" Value="Resources/woman.png"/>
                    </DataTrigger>
                  </Style.Triggers>
                </Style>
              </Image.Style>
            </Image>
          </DataTemplate>
        </DataGridTemplateColumn.CellTemplate>
      </DataGridTemplateColumn>
    </DataGrid.Columns>
  </DataGrid>
</Grid>

階層が深くてわかりにくいですが、実際には下記で表示する画像をセットしています。

<DataTrigger Binding="{Binding Gender}" Value="M">
  <Setter Property="Image.Source" Value="Resources/man.png"/>
</DataTrigger>
<DataTrigger Binding="{Binding Gender}" Value="F">
  <Setter Property="Image.Source" Value="Resources/woman.png"/>
</DataTrigger>

今回の値は「M」と「F」を想定していますが、もし「X」等のそれ以外の値の場合はどうなるかというと空欄になります。

実際に実行した際の画面は次のようになります。