質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

WPF

Windows Presentation Foundation (WPF) は、魅力的な外観のユーザー エクスペリエンスを持つ Windows クライアント アプリケーションを作成するための次世代プレゼンテーション システムです

Q&A

解決済

1回答

10388閲覧

C#でDataGridにImageを表示したい。

cancat

総合スコア313

C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

WPF

Windows Presentation Foundation (WPF) は、魅力的な外観のユーザー エクスペリエンスを持つ Windows クライアント アプリケーションを作成するための次世代プレゼンテーション システムです

0グッド

1クリップ

投稿2016/08/23 09:04

こんにちは。
WPFのDataGridについて教えてください。
下記のようにcellのなかにimageを表示するのをC#で書きたいです。

xaml

1<Window x:Class="DataTableAnimation.MainWindow" 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4 Title="MainWindow" Height="350" Width="525"> 5 <Grid> 6 <DataGrid x:Name="AdditionGrid" AutoGenerateColumns="False"> 7 <DataGrid.Columns> 8 <DataGridTemplateColumn Header="Status"> 9 <DataGridTemplateColumn.CellTemplate> 10 <DataTemplate> 11 <Image x:Name="Status" Height="50" Width="50" Source="/imageDataGrid;component/Images/Ok.png"></Image> 12 </DataTemplate> 13 </DataGridTemplateColumn.CellTemplate> 14 </DataGridTemplateColumn> 15 </DataGrid.Columns> 16 </DataGrid> 17 </Grid> 18</Window>

C#

1 //AdditionGrid.Columns.Header = "Status";//<- Headerを指定できない。 2 DataGridTemplateColumn dataGridTemplateColumn = new DataGridTemplateColumn(); 3 dataGridTemplateColumn.CellTemplate = new System.Windows.DataTemplate(); 4 Image okImage = new Image(); 5 Uri uri = new Uri(@"C:\ok.jpg", UriKind.RelativeOrAbsolute); 6 BitmapImage source = new BitmapImage(uri); 7 Image image = new Image(); 8 image.Source = source; 9 dataGridTemplateColumn.CellTemplate = image;//<-この行で、System.Windows.Controls.ImageをSystem.Windows.Data.Templateに変換できないとエラー。

このようにしてみたのですが、Imageを表示できずにいます。
よろしくお願いします。

アドバイスよろしくお願いします。

補足情報(言語/FW/ツール等のバージョンなど)

Microsoft Visual Studio Community 2015
Version 14.0.25424.00 Update 3
Microsoft .NET Framework
Version 4.6.01038

インストールされているバージョン:Community

Visual C# 2015 00322-20000-00000-AA575
Microsoft Visual C# 2015

です。
よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

追記しました

C#でそのxaml相当の事をしたいという事でしたね、ごめんなさい。

多分以下の様にすれば行けると思います(DataGridの名前にByCodeがついてます。私が区別するためにつけただけですので適宜削除してください)。
一応クラスライブラリ(アセンブリ名:imageDataGridのimageDataGrid.dll)を参照して表示することは確認しています。(元のXAMLも、C#も)

xaml

1<DataGrid x:Name="AdditionGridByCode" AutoGenerateColumns="False"> 2</DataGrid>

C#

1var source = new BitmapImage(new Uri("pack://application:,,,/imageDataGrid;component/Images/Ok.png", UriKind.RelativeOrAbsolute)); 2 3var image = new FrameworkElementFactory(typeof(Image)); 4image.Name = "Status"; 5image.SetValue(Image.HeightProperty, 50.0); 6image.SetValue(Image.WidthProperty, 50.0); 7image.SetValue(Image.SourceProperty, source); 8 9var cellTemplate = new DataTemplate(typeof(DataGridTemplateColumn)); 10cellTemplate.VisualTree = image; 11 12var status = new DataGridTemplateColumn(); 13status.CellTemplate = cellTemplate; 14status.Header = "Status"; 15 16AdditionGridByCode.Columns.Add(status);

ポイントは…なんでしょう。DataTemplateのtypeofに参照先の型を参照先にしてあげるのと、
FrameworkElementFactoryを使って DataTemplateのVisualTreeにImageをElementで追加してあげるところでしょうか。

XAMLで書いた場合と違ってUriが違うとエラーになってしまう点に気を付けてください。


以下、勘違いしていた時の回答。

うまくいかなかったとのコメントがありましたが、私の方ではうまくいきました。
そこがちょっと気にはなりますが、本質問と関係ないので深追いはしません。
(Resourceと埋め込まれたリソースを間違えたとかかなぁ。ライブラリの方でやっているしそれはなさそうに思いますが。まぁ、私がちゃんと質問の意図読み取れてなかったので齟齬があったせいだと思います。)

これだけだと利用イメージがつかめないですが、バインドするだけの簡単なサンプルを挙げておきます。

xaml

1<Window x:Class="tt45301DataGrid_Image.MainWindow" 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 5 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 6 xmlns:local="clr-namespace:tt45301DataGrid_Image" 7 mc:Ignorable="d" 8 Title="MainWindow" Height="350" Width="525"> 9 <Grid> 10 <DataGrid x:Name="AdditionGrid" AutoGenerateColumns="False"> 11 <DataGrid.Columns> 12 <DataGridTemplateColumn Header="Status"> 13 <DataGridTemplateColumn.CellTemplate> 14 <DataTemplate> 15 <Image x:Name="Status" Height="50" Width="50" Source="{Binding Path=Status}"></Image> 16 </DataTemplate> 17 </DataGridTemplateColumn.CellTemplate> 18 </DataGridTemplateColumn> 19 </DataGrid.Columns> 20 </DataGrid> 21 22 </Grid> 23</Window>

MainWindow.xaml.cs

cs

1using System; 2using System.Collections.Generic; 3using System.Windows; 4 5namespace tt45301DataGrid_Image { 6 /// <summary> 7 /// MainWindow.xaml の相互作用ロジック 8 /// </summary> 9 public partial class MainWindow : Window { 10 public MainWindow() { 11 InitializeComponent(); 12 13 var list = new List<Source>(); 14 15 list.Add(new Source { 16 Status = new Uri("./Resources/OK.png", UriKind.RelativeOrAbsolute) 17 }); 18 list.Add(new Source { 19 Status = new Uri("./Resources/OK.png", UriKind.RelativeOrAbsolute) 20 }); 21 22 AdditionGrid.ItemsSource = list; 23 } 24 } 25 26 public class Source { 27 public Uri Status { get; set; } 28 } 29}

※ OK.pngのプロパティ様に貼ってあった画像は削除しました。必要なら履歴から参照してください。

テキストなどもバインドするなら、ObservableCollectionも検討してみてください。

投稿2016/08/23 11:41

編集2016/08/26 12:57
flied_onion

総合スコア2604

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

cancat

2016/08/26 01:24

すみません。 バインドではなくC#のコードで。 ちなみに、いちおうご示唆いただいたBindingも試したのですが、OK.pngを表示できませんでした。
flied_onion

2016/08/26 02:58

行はどうやって追加してるんですか?
flied_onion

2016/08/26 03:02

あと常にOK.pngなんですか?ステータスという名前だったのでデータ側で変更するつもりかと思ったんですが。 デフォルトのイメージではなく固定で出したいということでしょうか。
cancat

2016/08/26 09:40

確認ありがとうございます。 行はコードで、forで追加しています。 画像はOK/NGを用意しています。 コードで行ごとにOK or NGとなります。
flied_onion

2016/08/26 10:38 編集

すいません、わかりました。失礼しました。 後ほど回答に追記します。
flied_onion

2016/08/26 12:58

回答を先頭に追記しました。
cancat

2016/08/30 08:54

お返事遅くなりました。ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問