Animated Navigation Page In WPF Application

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

Requirements

Many applications are made up of several screens. Here when I used 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 Implementation

By looking at the previous diagram, we can imagine the first implementation. Why not playing with the Margin property to slide out the view that we want to hide? Let’s try to implement this first solution…

I will use a grid with a single cell to overlay the views. Please also note that in this simple example, I used a TextBlock inside each view. We can of course imagine that we would put a custom UserControl containing the real view (for example the first one with a welcome image, the next one a basic form…)