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>
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.
<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>
TransitioningContentControl Example
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>

TreeView

UserControl

Last modified 5mo ago

Export as PDF

Copy link

Edit on GitHub

On this page

Common Properties

Reference

Source code

Example

Changing the PageTransition

Disable the PageTransition