Skip to main content
Version: 11.0.0

Transitioning Content Control

The transitioning content control can use a page transition to animate a content change on an inner control.

You can use this control to display a collection of different images in a slideshow.

Useful Properties

You will probably use these properties most often:

PropertyDescription
ContentThe content to display in the control.
TransitioningContentControl. ContentTemplateA data template used to display the content.
TransitioningContentControl. PageTransitionThe page transition to be used to animate the content changes. There will be a default page transition provided by the applied theme. To disable the transition, set this property to null.

Example

In this example, the view model contains a collection of different images to show them in a slideshow. The following XAML will use the default page transition to change the image (in the data template) whenever the bound SelectedImage property changes:

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

In this example, a different page transition has been specified 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>

More Information

info

For the complete API documentation about this control, see here.

info

View the source code on GitHub TransitioningContentControl.cs