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:

Property	Description
Content	The content to display in the control.
TransitioningContentControl. ContentTemplate	A data template used to display the content.
TransitioningContentControl. PageTransition	The 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