WPF listbox display image using a KeyValuePair's .Value as image source?

Question

Hi! :D

I've been learning WPF for about two weekends now. I can say it's harder to learn than common Windows Forms, and the lack of useful intellisense in VS2008 doesn't help at all (like, I don't know what "bindings" to use, or which are "DependencyProperties") ... nonetheless, it's great what you can archieve after a bit of frustration, searching and trial and error :)

However, I'm stumped on this one, so I've came to seek some help from you guys :D:

I have a listbox which must show images (in this case, PC game covers) inside a wrappanel (so they fill the whole listbox) but the problem is that I don't know what to put in the <Image Source={Binding ?????}> tag, since in my listbox I add KeyValuePair<int, string> items (int = id in internal code-behind list, string = image source (as C:\bla.jpg)) manually in the code-behind.

The idea is for the listbox to show the images, but I don't know how to access the KVP in an Image Source Binding attribute.

Do you guys have any ideas about it? any help is appreciated! :D

- N7

Answer 1

Hi,
Change the ItemTemplate of the ListBox

 <ListBox Margin="45,30,52,77" Name="ListBox1" >
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal" >
                        <Label Content="{Binding Key}"/>
                    <Image Source="{Binding Value}"/>
                        </StackPanel>
                </DataTemplate> 
            </ListBox.ItemTemplate>  
            </ListBox>

From code behind

 Dim dictValues As New Dictionary(Of Integer, String)
        dictValues.Add(1, "/WpfApplication4;component/1.jpg")
        dictValues.Add(2, "/WpfApplication4;component/2.jpg")
        ListBox1.ItemsSource = dictValues

Hope it helps

---

Please mark posts as answers/helpful if it answers your query. This would be helpful for others facing the same kind of problem

Answer 2

Hey Rahul!

Thanks! your solution worked perfectly :) I had to tweak it a bit, but using that as an skeleton and adding my own style I was able to archieve the needed effect.

Thanks a lot! :D

- N7