TransitioningContentControl

Common Properties

Property	Description
Content	Gets or sets the content to display in the control
ContentTemplate	Gets or sets the DataTemplate used to display the content
PageTransition	Gets or sets the PageTransition which will be shown when the content changes

Reference

TransitioningContentControl

Source code

TransitioningContentControl.cs

Example

Let's assume we have a collection of different images and we want to show them in a slideshow like view. In order to do this we can setup our TransitioningContentControl like this:

<TransitioningContentControl Content="{Binding SelectedImage}" >
    <TransitioningContentControl.ContentTemplate>
        <DataTemplate DataType="Bitmap">
            <Image Source="{Binding}" />
        </DataTemplate>
    </TransitioningContentControl.ContentTemplate>
</TransitioningContentControl>

Changing the PageTransition

If you don't like the PageTransition which is provided by the applied theme, you can also provide your own PageTransition. This can be done in XAML, provided via Binding or via DynamicResource.

In the sample below we will change the PageTransition to slide the images horizontally.

<TransitioningContentControl Content="{Binding SelectedImage}" >
    <TransitioningContentControl.PageTransition>
        <PageSlide Orientation="Horizontal" Duration="0:00:00.500" />
    </TransitioningContentControl.PageTransition>
    <TransitioningContentControl.ContentTemplate>
        <DataTemplate DataType="Bitmap">
            <Image Source="{Binding}"  />
        </DataTemplate>
    </TransitioningContentControl.ContentTemplate>
</TransitioningContentControl>

Disable the PageTransition

If you want to disable the transition, set the PageTransition to null.

<TransitioningContentControl Content="{Binding SelectedImage}" PageTransition="{x:Null}" >
    <TransitioningContentControl.ContentTemplate>
        <DataTemplate DataType="Bitmap">
            <Image Source="{Binding}"  />
        </DataTemplate>
    </TransitioningContentControl.ContentTemplate>
</TransitioningContentControl>