Animated Navigation Page In WPF Application

Introduction

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…)

<Window x:Class="FirstTry.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" SizeToContent="WidthAndHeight" ResizeMode="NoResize">

    <Grid>
        <StackPanel>
            <StackPanel Orientation="Horizontal">
                <Button x:Name="previousButton" Click="previousButton_Click">Previous</Button>
                <Button x:Name="nextButton" Click="nextButton_Click">Next</Button>
            </StackPanel>
            <Grid Width="300" Height="300">
                <Border x:Name="view3" Width="300" Background="LightBlue">
                    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">
                        View 3
                    </TextBlock>
                </Border>
                <Border x:Name="view2" Width="300" Background="AntiqueWhite">
                    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">
                        View 2
                    </TextBlock>
                </Border>
                <Border x:Name="view1" Width="300" Background="AliceBlue">
                    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">
                        View 1
                    </TextBlock>
                </Border>
            </Grid>
        </StackPanel>
    </Grid>
</Window>

In the code behind, I updated the Margin property of the border elements regarding the one I’ve to display in the UI. 

Using An ItemsControl And An ImageBrush

A problem with the previous implementation is that all views are loaded into memory, even those that never got displayed.

How could we improve that? The solution I present here uses an ItemsControl as view’s host control. I also used a ListBox to display available views through a binding to XML data (in order to improve flexibility).

The XML data:

<XmlDataProvider x:Key="views">
    <x:XData>
        <Views xmlns="">
            <View Title="View1">
                <Page Source="view1.xaml"/>
            </View>
            <View Title="View2">
                <Page Source="view2.xaml"/>
            </View>
            <View Title="View3">
                <Page Source="view3.xaml"/>
            </View>
        </Views>
    </x:XData>
</XmlDataProvider>

Here, I basically described the available views in my application. Using this XML formatting, it becomes straightforward to add or remove a view. I’m going to use this XMLDataProvider as a source data in order to bind other controls to it.

The ListBox:

<ListBox x:Name="viewList" Height="20" Width="300" SelectedIndex="0"
    ItemsSource="{Binding Source={StaticResource views}, XPath=Views/View}"
    DisplayMemberPath="@Title"
    SelectionChanged="viewList_SelectionChanged">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
</ListBox>

Here, ListBox is used to display available views in the application. IItemsSource property is used above in order to bind it to the XML data. I also specified an ItemsPanel in order to change the default vertical StackPanel to horizontal one.

The ItemsControl:

<ItemsControl x:Name="viewer" DataContext="{Binding Path=SelectedItem, ElementName=viewList}" ItemsSource="{Binding XPath=Page}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Frame x:Name="frame" Source="{Binding XPath=@Source}"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
    <ItemsControl.RenderTransform>
        <TranslateTransform/>
    </ItemsControl.RenderTransform>
</ItemsControl>

In order to create this ImageBrush, I will use a function that converts any FrameworkElement into a bitmap:

public RenderTargetBitmap RenderBitmap(FrameworkElement element)
{
    double topLeft = 0;
    double topRight = 0;
    int width = (int)element.ActualWidth;
    int height = (int)element.ActualHeight;
    double dpiX = 96; // this is the magic number
    double dpiY = 96; // this is the magic number

    PixelFormat pixelFormat = PixelFormats.Default;
    VisualBrush elementBrush = new VisualBrush(element);
    DrawingVisual visual = new DrawingVisual();
    DrawingContext dc = visual.RenderOpen();

    dc.DrawRectangle(elementBrush, null, new Rect(topLeft, topRight, width, height));
    dc.Close();

    RenderTargetBitmap bitmap = new RenderTargetBitmap(width, height, dpiX, dpiY, pixelFormat);

    bitmap.Render(visual);
    return bitmap;
}