1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

WPF DataGridの列に画像を表示

Posted at

前提

基本的にはDataGridTemplateColumnを設定します。
今回はTwitterのタイムラインをDataGridにバインドする際、アイコンの列を追加したい、という想定で書きます。

Windowのプロパティにxmlnsとしてlocalが定義されて(xmlns:local="clr-namespace:hogehoge"等)いて、その名前空間にTweetクラスがあるとします。
Tweetクラスは単純にName(ユーザー名),Text(本文),IconUrl(アイコン)などを持っているものとします。

列を自動生成していない場合

AutoGenerateColumnsがFalseの場合です。

<DataGrid x:Name="dataGrid" HorizontalAlignment="Left" Margin="1" AutoGenerateColumns="False">
  <DataGrid.Columns>
    <DataGridTemplateColumn Width="48" Header="アイコン" >
      <DataGridTemplateColumn.CellTemplate>
        <DataTemplate DataType="{x:Type local:Tweet}">
          <Image Source="{Binding IconUrl}"></Image>
        </DataTemplate>
      </DataGridTemplateColumn.CellTemplate>
    </DataGridTemplateColumn>

    <DataGridTextColumn ...その他の列... />
  </DataGrid.Columns>
</DataGrid>

DataGridTemplateColumnのCellTemplateプロパティに、DataTemplateを指定しています。

列を自動生成している場合

この方法が良いのかどうかイマイチ判断がつきませんが……
まず、WindowかどこかのResourcesに、DataGridTemplateColumnを定義します。

 <!-- <Window>の中 -->
 <Window.Resources>
        <DataGridTemplateColumn x:Key="IconTemplate">
            <DataGridTemplateColumn.Header>Icon</DataGridTemplateColumn.Header>
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate DataType="{x:Type local:Tweet}">
                    <Image Source="{Binding IconUrl}"></Image>
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
    </Window.Resources>

で、これを列が自動生成されるときに発生するAutoGeneratingColumnイベントのときに渡しましょう。
DataGridのAutoGeneratingColumnイベントを作成します。

private void dataGrid_AutoGeneratingColumn(object sender,DataGridAutoGeneratingColumnEventArgs e){
  if(e.PropertyName == "IconUrl")
    e.Column = (DataGridTemplateColumn)Resources["IconTemplate"];
}

おわりに

いまいちまだWPFのコンポーネントの使い方を理解していないので、画像などを含むものをリスト的に表示するには何を使えばいいかわかっていません。
ここまでするならListViewとかにしたほうがいいんでしょうか…

1
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?