Displaying Selected Images from a Listbox

Question

Can someone please explain the best way to display images selected in a Listbox in a Silverlight app? For example, I would like to have 5 images that a user could select from and have the selected image show in a different section of the application. Thank you.

Answer 1

You can get an example of this very quickly using the sample data feature, this should show you how it is done.

1. Create a new sample data source in the data panel, remove one of the default properties, change the other property type to image, and select a folder with some images
2. Drag the collection item onto the artboard, when you let go it should create a listbox full of images
3. Hold down the alt key, and drag Property1 onto the artboard, the tooltip should say "Create detail view", let go and it will create a grid and image bound to the selected item in the list box

Now some explanation if you want to do this by hand:

• The grid has its datacontext bound to the selected item of the listbox
• The image in the grid has its source databound to the Property1 item (which is an image)

Hope that helps.

Answer 2

Thanks Chuck. Do the images need to be in an external data source? Can they be added to the listbox by drag/drop from the Media asset library?

Answer 3

You can make it work the other way as well.

• Create a listbox
• Drag your iamges into it
• Create the image you want to databind to the selected image, inside a grid (if you forget, right click it and pick group into -> grid)
• Select the grid
• On the grid's datacontext property, click the little box and select databinding
• Select element property, your listbox, and pick the selected element item
• On your image, find the source property, and click the little square, then databinding
• You will have to do a custom expression, use "Source" with no quotes, this binds your image source to the source property of the selected image

What the xaml should look like:

<UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	x:Class="SilverlightApplication20.MainPage"
	Width="640" Height="480">

	<Grid x:Name="LayoutRoot" Background="White">
		<ListBox x:Name="listBox" HorizontalAlignment="Left" Margin="22,43,0,107" Width="239">
		
			<Image Height="71" Width="95" Source="Chrysanthemum.jpg" Stretch="Fill"/>
			<Image Height="71" Width="95" Source="Desert.jpg" Stretch="Fill"/>
			<Image Height="71" Width="94" Source="Jellyfish.jpg" Stretch="Fill"/>
			<Image Height="71" Width="94" Source="Hydrangeas.jpg" Stretch="Fill"/>
			<Image Height="71" Width="94" Source="Koala.jpg" Stretch="Fill"/>
			<Image Height="71" Width="94" Source="Penguins.jpg" Stretch="Fill"/>
			<Image Height="71" Width="94" Source="Tulips.jpg" Stretch="Fill"/>
			<Image Height="71" Width="94" Source="Lighthouse.jpg" Stretch="Fill"/>
		</ListBox>
		<Grid HorizontalAlignment="Right" Margin="0,95,137,221" Width="172" DataContext="{Binding SelectedItem, ElementName=listBox, Mode=OneWay}">
			<Image Source="{Binding Source, Mode=OneWay}"/>
		</Grid>
	</Grid>
</UserControl>

Answer 4

I have looked for this solution for a very long time.  The explanation you gave is the most incredibe, fastest way of getting there.  However, if you have another larger set of images that you would want data binded to the thumbnails in the first box, how would you data bind the larger images to the thumbnails?  Basically, the idea is just a simple photo viewer.  I realize that there is slide.show 2 out there, but I am going to use this as a foundation to build my knowledge upon.  I hope you are still out there somewhere in cyberspace to guide me.

Thank  you,

Robert