I didn’t wanted to implement all the transitions, instead I decided to use the famous FluidKit library and to wrap its transition control into a reusable and “MVVM compliant” control. I thank Pavan Podila for giving me feedback while designing this control.

Basically, based on Pavan suggestions I created an INavigationAware interface and subclass transitions I wanted to reuse from FluidKit. The INavigationAware interface allows me to specify that the transition supports going forward and going backward (regarding the previous and current selection of the user in the menu).

The control itself (that I call a NavigationPresenter) is very simple, I just use 2 ContentPresenter that I switch when the Content property changes using the TransitionPresenter control from the FluidKit library. The NavigationPresenter works with 3 dependency properties:

• GoForward (bool): to specifiy the way of the transition
• Transition: to specify the transition to use
• Content: to specify the content of the control

Here is the XAML for using the NavigationPresenter

1
2
3
4
5
6
7
8
9

<!-- The ContentProperty is not bound directly to the SelectedItem of the ListBox because the
     GoForward property must be updated BEFORE the content changes. The CurrentContent property
     is defined in the ViewModel class and updated everytime the selection of the ListBox changes,
     after setting up the GoForward value. -->
<NavigationTransition:NavigationPresenter 
    Content="{Binding CurrentContent}"
    Transition="{Binding ElementName=transitionComboBox, Path=SelectedItem.Tag}"
    GoForward="{Binding DataContext.GoForward, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type AnimatedContentPresenter:MainDialog}}}">            
</NavigationTransition:NavigationPresenter>

The sample application comes with 3 animations but more can be used from the FluidKit library. It’s also possible to create your own transition (inherit from Transition base class). You can download the sample application here. Hope you’ll like it !

• pixel shaders
• skinning/theme support
• dynamic templates
• clickonce deployment
• and a lot more !

The good news about that is that the SOURCE CODE IS AVAILABLE. Yes, you read right ! The entire source code is available for free, and moreover, a SDK is available to leverage the functionalities of photoSuru in your own application.

Interestings links:

• introduction video on Channel9
• dedicated website
• the blog post on WPF SDK team
• the home page of the SDK

Here are some snapshots of photoSuru, enjoy

The welcome screen.

The main screen of the application. Note how each image is used two times to give a nice preview of the album.

The image browser. You can browse the images using the top control which looks like a film strip (and which is a ListBox by the way :p)

Note the use of pixel shaders when selecting an image in the ListBox

The use of pixel shaders over an image (water effect)

The search functionality is wonderful ! Basically, you type a keyword and you get a set of images. By clicking an images, you’ll discover the keywords that are attached to this image. You can this way navigates easily from images to images…

I hope I’ll have some free time to investigate the source code. I’m sure there are a lot of things to learn in this new application.