Image navigation

Question

How to navigate the image using Keyboard arrow keys in C#.

My 1st form contains listView. The listview contains 10 images in thumbnail format. The image are from particular folder. When I double click the image in the list view, it opens in a new window as large image. I want to navigate the image in the new window as per listview order.

If I click the image randomly, want to navigate the image from that selected image.

It's like a Microsoft picture manager.

Plz give me an Idea.

Answer 1

M-V-VM method.

ViewModel contains two properties (okay, not exactly MVVM but whatever):

ObservableCollection Images ImageSource SelectedImage

The ListView in the first page is bound to Images. The SelectedItem property of the ListView is bound to SelectedImage.

The second window also is bound to the same ViewModel. The large image it shows is bound to the SelectedImage property.

As images are added to Images, they are displayed in the ListView. As the SelectedItem in the ListView changes, SelectedImage changes in the ViewModel, which changes the image in the second window.

There's an idea of how it would work. Little bit more todo in order to actually accomplish this, however.

Answer 2

Shouldn't be too hard. WPF, I'm assuming?

1. Load the listview with your thumbnail images, each accessed using a index.
2. The images themselves have a click event which replaces the current frame with another.
3. It has the full-sized image along with 'Next' and 'Previous' buttons.
4. The Next button replaces the current image (index X) with any image whose index is X+1. Previous does the same with X-1.

Don't forget bounds checking. If the index goes negative, set X to the List's highest index and if X goes higher than the highest, set it to zero.

Here are a couple of sample apps from Microsoft that have actual code to get you started:

Photo Store Demo

WPF Photo Viewer Demo