Skip to main content
Version: 0.10.x

TransitioningContentControl

Common Properties​

PropertyDescription
ContentGets or sets the content to display in the control
ContentTemplateGets or sets the DataTemplate used to display the content
PageTransitionGets 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>