TransitioningContentControl
The TransitioningContentControl is a ContentControl which can render PageTransions when the Content changes.

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

Source code

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:
1
<TransitioningContentControl Content="{Binding SelectedImage}" >
2
<TransitioningContentControl.ContentTemplate>
3
<DataTemplate DataType="Bitmap">
4
<Image Source="{Binding}" />
5
</DataTemplate>
6
</TransitioningContentControl.ContentTemplate>
7
</TransitioningContentControl>
Copied!
TransitioningContentControl Example

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.
1
<TransitioningContentControl Content="{Binding SelectedImage}" >
2
<TransitioningContentControl.PageTransition>
3
<PageSlide Orientation="Horizontal" Duration="0:00:00.500" />
4
</TransitioningContentControl.PageTransition>
5
<TransitioningContentControl.ContentTemplate>
6
<DataTemplate DataType="Bitmap">
7
<Image Source="{Binding}" />
8
</DataTemplate>
9
</TransitioningContentControl.ContentTemplate>
10
</TransitioningContentControl>
Copied!
TransitioningContentControl Example

Disable the PageTransition

If you want to disable the transition, set the PageTransition to null.
1
<TransitioningContentControl Content="{Binding SelectedImage}" PageTransition="{x:Null}" >
2
<TransitioningContentControl.ContentTemplate>
3
<DataTemplate DataType="Bitmap">
4
<Image Source="{Binding}" />
5
</DataTemplate>
6
</TransitioningContentControl.ContentTemplate>
7
</TransitioningContentControl>
Copied!
Last modified 22d ago