JAPF

It has been a long time since my last post, I’m must admit I was both busy and trying to find something cool to blog about. Because I’ll be in holidays tomorrow, I decided to take some time to build a sample application that demonstrates a feature of WPF I’m going to use soon.

In the sample application (source code available here), you will be able to play with the BezierSegment class. I created a simple control that wrap the BezierSegment into something more easy to visualize.The application allows you to drag and drop points and to animate the line.

Here is the result:

I hope you’ll like it ! The reason I’m going to use this class is in a diagramming control (like Visio) to connect shapes together…

Download the source code.

In my last blog post about MVVM, I showed how it is natural to build a common WPF dialog using DataBinding and Templates with the Model-View-ViewModel methodology. Because I’m having a lot of feedback on posts I wrote about how transitions can be done in WPF, I decided to reuse my previous demo application and add transitions when switching from one element to another. Here is the result of the demo application:

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 !

Yesterday, Microsoft released a new WPF application: photoSuru. photoSuru has been designed to give the a spectacular user experience and demonstrate the power of the WPF platform. You’ll discover in this application a lot of cool things:

• 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.

By looking at Worpress statistics for my blog, I realized that many people were coming here by searching keywords like “animation”, “transition”, etc. A couple of month ago, I wrote an article about a control that I created: the ContentSlider control. The article described a control that could be used to create an animation when switching from one page to another, but it was very basic.

If you’re looking for a more complete solution, I recommend you to take a look at the FluidKit library created by Paven Podila. The FluidKit library contains very powerful control, the most known is probably the ElementFlow control that is similar to Apple’s famous CoverFlow functionality:

FluidKit also contains a TransitionPresenter control that is an extended and more powerful version of my ContentSlider control. The TransitionPresenter control comes with 4 transitions that you can easily use in your application (Cube, Flip, Slide, Genie):

Pavan really did a great job with the FluidKit library. Go ahead a grab the source to play with it and learn very cool stuff about WPF !

In my very first article, I wrote an article about an implementation of a solution allowing to use transition (using a sliding effect) between views in a WPF application.

As a reminder, here when I talk about “views” I mean a screen of the application. One of this screen could be used as a login screen, the other one to setup parameters, etc.

In this article, I introduce a CustomControl that I build in order to re-use the implementation I described in an easy way. Basically, using this control, you can write something like:

1
2
3

<control:ContentSlider>
    <!-- here is the content -->
</control:ContentSlider>

All the specific stuff related to the transition (the animation, the use of a VisualBrush…) is handled INSIDE the control so that it is completely transparent to use.

From C# code point of view, you’ll need to use 3 functions:

• PrepareSlide()
• SlideToLeft()
• SlideToRight()

The first one (PrepareSlide) must be called right before changing the content of the view. It will create a “snapshot” of the view so that it will become possible to animate it.

The next two one should be called to slide the content to the left (or to the right).

I hope you’ll enjoy it. Here is a solution containing the control with example.

Article updated ! You can now download the example as a Visual Studio 2008 solution.
Article updated ! For a more complete solution, please take a look at this post

Introduction

Before going into fun topics, let me give some information about myself. I started to play with WPF about 1 year ago. Since the beginning, I fell in love with this new technology and the more I work with it, the more I like it. Today, I consider I’m still a newbie in the WPF world and this is my first article, so please forgive me if I do some mistakes. Please also forgive my English as this is not my natural language (I’m French).

In this article, I describe a technique that I’ve been using in order to use navigation pages in a WPF application. In the next section, I’m going to give more details about what I mean by “navigation pages”.

Requirements

Many applications are made up several screens. Here when I use the word “screen” I mean a view in the application. For example, you might have a view as a welcome screen and several other views.

In this case, you would like the current screen to display the current view, but you also need a technique to switch from one view to another. If you also want to improve the user experience, you might want to have some kind of animation when the user switches from one view to another.

A possible animation is to use a “slide effect”:

I’m going to describe 2 techniques that could be used to achieve this behaviour. I will also show you why the last one is better than the first one.

Read the rest of this entry »