Xamlのコンボボックスに画像を表示

前提・実現したいこと

Xamlのコンボボックスに画像を表示

<ListView x:Name="lsvHoge"
                      Grid.Column="0"
                      Margin="10,5,10,5"
                      ItemsSource="{Binding}">
                <ListView.View>
                    <GridView>
                        <GridViewColumn Width="100">
                            <HeaderedContentControl Name="hdrSeg">セグ</HeaderedContentControl>
                            <GridViewColumn.CellTemplate>
                                <DataTemplate>
                                    <TextBlock Text="{Binding SegmentCode}" />
                                </DataTemplate>
                            </GridViewColumn.CellTemplate>
                        </GridViewColumn>
                        <GridViewColumn Width="150">
                            <HeaderedContentControl Name="hdrItem">アイテムコード</HeaderedContentControl>
                            <GridViewColumn.CellTemplate>
                                <DataTemplate>
                                    <StackPanel>
                                        <StackPanel>
                                            <TextBlock Text="{Binding ItemCode}" />
                                        </StackPanel>
                                        <StackPanel>
                                            <StackPanel>
                                                <Label Content="名称" />
                                                <TextBlock Text="{Binding Description}" />
                                            </StackPanel>
                                        </StackPanel>
                                    </StackPanel>
                                </DataTemplate>
                            </GridViewColumn.CellTemplate>
                        </GridViewColumn>
                        <GridViewColumn Width="150">
                            <HeaderedContentControl Name="hdrMark">マーク</HeaderedContentControl>
                            <GridViewColumn.CellTemplate>
                               <DataTemplate>
                                    <ComboBox DisplayMemberPath="Name"
                                              ItemsSource="{Binding Path=PhonebookEntries,
                                                                    Mode=TwoWay}"
                                              SelectedValue="{Binding Path=PhonebookEntry,
                                                                      Mode=TwoWay}"
                                              SelectedValuePath="Id">
                                        <ComboBox.ItemTemplate>
                                            <DataTemplate>
                                                <StackPanel Orientation="Horizontal">
                                                    <Image Source="{Binding Name}" />
                                                </StackPanel>
                                            </DataTemplate>
                                        </ComboBox.ItemTemplate>
                                    </ComboBox>
                                </DataTemplate>
                            </GridViewColumn.CellTemplate>
                        </GridViewColumn>
                    </GridView>
                </ListView.View>
            </ListView>

lsvHogeは以下のように自作のクラスをバインドしています。
this.lsvHoge.DataContext = 自作クラスのリスト;

以下のコンボボックスに画像を表示したいです。
自作クラスのリストにImagesはないです。

画像の元はあるファイルにある全ての画像を対象とし、そのリストをImagesとして別途バインドしたいです。

自分の調べ方が悪いかの参考になるような記事が出てこずこまっています。
選択時の値はIDとなる部分の値が取得できるようにしたいです。

参考になる記事や、やり方を教えていただきたいです。

xamlの時点でもう一工夫足りていないような気がします。

                                    <ComboBox DisplayMemberPath="Name"
                                              ItemsSource="{Binding Path=Images,
                                                                    Mode=TwoWay}"
                                              SelectedValue="{Binding Path=Image,
                                                                      Mode=TwoWay}"
                                              SelectedValuePath="Id">
                                        <ComboBox.ItemTemplate>
                                            <DataTemplate>
                                                <StackPanel Orientation="Horizontal">
                                                    <Image Source="{Binding Name}" />
                                                </StackPanel>
                                            </DataTemplate>
                                        </ComboBox.ItemTemplate>
                                    </ComboBox>

/////////////////////////////////////////////////////////////////////

以下のようなクラスを作って値を作成しバインドしたのですが、コンボボックスになにも表示されてないです。

this.DataContext = Images(Imageのリスト);

        public class Image
        {
            public string Id { get; set; }

            public BitmapImage Name { get; set; }

            public Image(string Id, BitmapImage image)
            {
                this.Id = Id;
                this.Name = image;
            }
        }

BitmapImageクラスは以下のように生成
new BitmapImage(new Uri(@"01.png")));

ebiryo

2018/07/25 03:40

「選択時の値はIDとなる部分の値が取得できるようにしたいです。」とはどういう意味ですか？

haruharu09

2018/07/25 03:57

バインドするデータに画像のパスとは別にID的な値を持たせたいです。

ebiryo

2018/07/25 04:19

ん？「持たせたいです」とはどういう意味ですか？　ＩＤを保持したクラスの作りかたがわからないということですか？

haruharu09

2018/07/25 06:09

クラスの作成は分かります。分からないのは画像のバインドの仕方です。

ebiryo

2018/07/25 06:17

this.DataContext = Images(Imageのリスト); の this は何を指しています？ListViewを保持しているWindow? もう少し丁寧に情報を提示してもらえると助かるのですが。

haruharu09

2018/07/25 06:50 編集

申し訳ございません。ListViewを保持しているwindowをさしています。更に混乱させてしまうかもしれませんが、表示しようとしているページはUserControlで作成しています。

ebiryo

2018/07/25 07:14

もう一点確認ですが、画像を表示したいのはListView１行１行にではなく、ListView のカラムに設定されているComboboxの選択肢の中に、ですよね？つまり、画像が三つあったら、「マーク」というカラムのComboboxに３画像表示されること期待していて、ListViewが3行表示されること期待しているわけではないですよね？

haruharu09

2018/07/25 07:50 編集

そうですね。listView３行表示されていたら、その１行毎のコンボボックスに同じが画像が３つ表示されることを期待しています。

行動規範の内容に同意します

回答2件

ベストアンサー

イマイチ期待されている動作が理解できていないのですが、以下でどうですか？

xaml
1<UserControl ....>
2　　　：
3 <!-- ListView内コンボボックスのソースとして UserControlのResource  CollectionViewSource-->
4 <UserControl.Resources>
5   <CollectionViewSource  x:Key="ImageSource"  Source="{Binding Images}" />
6 </UserControl.Resources>
7　　：
8
9 <ListView x:Name="lsvHoge"....
10    ：
11	<GridViewColumn Width="150">
12	    <HeaderedContentControl Name="hdrMark">マーク</HeaderedContentControl>
13	    <GridViewColumn.CellTemplate>
14	        <DataTemplate>
15	            <ComboBox DisplayMemberPath="Name"
16	                      ItemsSource="{Binding Source={StaticResource ImageSource}}"
17	                      SelectedValue="{Binding Path=ID, Mode=TwoWay}" <-- このIDはListViewの各行に対応したVMが保持しているID
18	                      SelectedValuePath="Id" 
19                          IsSynchronizedWithCurrentItem="False">
20	                <ComboBox.ItemTemplate>
21	                    <DataTemplate>
22	                        <StackPanel Orientation="Horizontal">
23	                            <Image Source="{Binding Name}" />
24	                        </StackPanel>
25	                    </DataTemplate>
26	                </ComboBox.ItemTemplate>
27	            </ComboBox>
28	        </DataTemplate>
29	    </GridViewColumn.CellTemplate>
30	</GridViewColumn>
31    ：
32  </ListView>
33</UserControl>

投稿2018/07/25 09:46

ebiryo

総合スコア797

haruharu09

2018/07/26 02:35

ありがとうございます。無事画像を表示させることができました。自分の聞き方が悪いばっかりに時間をとらせてしまい申し訳ありませんでした。

行動規範の内容に同意します

コンバーターを利用するのがよいのではないでしょうか。

XAML
1 <Image Source="{Binding Name,Converter={StaticResource IconConverter},Mode=OneTime}" />
2

C#
1	internal class IconConverter : IValueConverter
2	{
3
4		object IValueConverter.Convert(object value, Type targetType, object parameter, CultureInfo culture)
5		{
6
7			var name = (string)value;//Nameプロパティでひっぱった値
8　　　　　　　　　　　　　
9
10			return GetSource(name); // Nameを元に画像パスを返すような独自メソッド
11　　　　　　　　　}
12
13		object IValueConverter.ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
14		{
15			return value;
16		}
17	}
18

投稿2018/07/25 04:32

fantasista

総合スコア11

haruharu09

2018/07/25 06:08

<UserControl.Resources> <Converter:IconConverter x:Key="IconConverter"/> </UserControl.Resources> でリソースとして登録したのですが、:IconConverterのConvertのブレークに止まらないのはデータが正しくバインドできていないからでしょうか？

行動規範の内容に同意します

あなたの回答