C#/WPF: Display Images like a LightBox in jQuery?

Question

Hello,

Did anyone ever try to create a jQuery "LightBox"-Like "Popup" (WPF UserControl) for displaying Images? See this page for an example: http://www.huddletogether.com/projects/lightbox2/

Thanks!

Answer 1

Hello Joseph,

Here is a site that appears to have done it, but it is only version 0.5 and might change dramatically before 1.0:
http://leandrovieira.com/projects/jquery/lightbox/#

This should be what you're looking for, and here is a sample of their code to implement:

$(function() {
    $('#gallery a').lightBox({fixedNavigation:true});
});

I hope this helps,

Thanks!

---

EDIT:

Sorry that I didn't fully understand what you ment in version one of your question. Here is an updated answer (with code / source) to your question.

First I created a control that will act as a modal dialog box that grays everything out in the background. Then I added the ability to put a picture in there, with added ability to have a comment with each picture. Here are images of the final product:

First Image Loaded:

Second Image Fading In:

Second Image Loaded:

I also added animations to resize the images like the Lightbox project does. I added the ability to have a forward and back buttons, accelerator keys, forward and back arrow control, and escape to exit. I think I've captured what you're looking for in this control.

As usual, I've uploaded the full source code to Google Code for your download.

The direct link to the zip file is here:
http://stackoverflow-answers-by-scott.googlecode.com/files/1755872.zip

I hope this helps,

Thanks!

Answer 2

Duplicating the functionality you linked to is absolutely trivial in WPF. Just:

1. Create a UserControl with a single ItemList property of type IEnumerable<ImageSource>
2. Add a Popup to the UserControl
3. Add a Grid to the Popup that lays out the LightBox the way you want, including panels for the Image, TextBlock, and Button
4. Add a StoryBoard that is triggered by the Loaded event that animates the changes.
5. Use an EventTrigger to set the Popup's IsOpen property to false when the button is clicked
6. Bind the Image.Source to {Binding ItemList/} to show the current item in the ItemList
7. Add a Background="Transparent" rectangle to each side of the Grid that runs code-behind to change the current item in ItemList
8. Optionally also repeat the BeginStoryboard when changing the current item