A list in which items have more than one selectable region

Question

I am not sure how best to implement this in WPF, so I will first outline my problem.

I have a set of frames. Each frame has two images. Say I have 10 frames giving a total of 20 images. I want to show the images at the bottom of the screen, organized as a film strip - 2 lines and 10 columns. When the user clicks on one of these images or uses the arrow, he must be selected and the selected image information will be used somewhere else in the application.

I implemented it as a ListBox with the ItemsSource associated with my collection of viewmodel frames (observed by the collection). In the DataTemplate ListBox, I created a grid with two rows, each of which contains an Image control. The one on line 0 is bound to TopImage (a property of my Frame class), and the bottom one to BottomImage.

All this work, but the problem is that when using the arrows, the whole frame (element) is selected. How to select each image in the data table separately?

OR

Is there a better way to implement this>

Answer 1

You have two problems:

• You want to separate the selectivity of the top and bottom images in the frame
• You want the arrow keys to move through the images in two dimensions.

If you did not have an arrow requirement, you can solve the first problem by nesting the ListBox objects inside the parent ItemsControl . But then the arrows do the right thing within the ListBox . A different approach is required to solve this.

Here are the 2x2 grid data tied to a four-element image collection. Here we use the underused UniformGrid to make the collection wrap around after so many columns. Since we use ItemsControl , we lose support for automatic selection, but return it, making Image manage the contents of the Button .

 <Grid> <Grid.Resources> <x:Array x:Type="sys:String" x:Key="sampleData"> <sys:String>http://thecybershadow.net/misc/stackoverflow.png</sys:String> <sys:String>http://thecybershadow.net/misc/sourceforge.png</sys:String> <sys:String>http://thecybershadow.net/misc/stackoverflow.png</sys:String> <sys:String>http://thecybershadow.net/misc/sourceforge.png</sys:String> </x:Array> </Grid.Resources> <ItemsControl ItemsSource="{StaticResource sampleData}" Focusable="False"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <UniformGrid Columns="2"/> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> <ItemsControl.ItemTemplate> <DataTemplate> <Button> <Button.Content> <Image Source="{Binding}"/> </Button.Content> </Button> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> </Grid> 

The net effect is a 2x2 grid of images with which you can freely shoot around. You can use the style to make the button aspect less empty without losing focus. Therefore, attach all twenty images to this view, first the top ten, and then the bottom ten. You can also associate a column count with the same data source.