# TransitioningContentControl

## Common Properties

| Property          | Description                                                                                                                                 |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| `Content`         | Gets or sets the content to display in the control                                                                                          |
| `ContentTemplate` | Gets or sets the [DataTemplate](https://docs.avaloniaui.net/docs/templates/data-templates) used to display the content                      |
| `PageTransition`  | Gets or sets the [PageTransition](https://docs.avaloniaui.net/docs/animations/PageTransitions) which will be shown when the content changes |

## Reference

[TransitioningContentControl](http://reference.avaloniaui.net/api/Avalonia.ReactiveUI/TransitioningContentControl/)

## Source code

[TransitioningContentControl.cs](https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Controls/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:

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

![TransitioningContentControl Example](https://4025525846-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9CodmwWc6hOAzwuMGtm4%2Fuploads%2Fgit-blob-a8a69a85993098c24970fe2875ed947d23871422%2FTransitioningContentControl_01.webp?alt=media)

## Changing the PageTransition

If you don't like the `PageTransition` which is provided by the applied theme, you can also provide your own [PageTransition](https://docs.avaloniaui.net/docs/animations/PageTransitions). This can be done in XAML, provided via `Binding` or via `DynamicResource`.

In the sample below we will change the [PageTransition](https://docs.avaloniaui.net/docs/animations/PageTransitions) to slide the images horizontally.

```markup
<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](https://4025525846-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9CodmwWc6hOAzwuMGtm4%2Fuploads%2Fgit-blob-b7a50acc12a6ae5f0e9b640a88b3a05fd9a406fc%2FTransitioningContentControl_02.webp?alt=media)

## Disable the PageTransition

If you want to disable the transition, set the `PageTransition` to `null`.

```markup
<TransitioningContentControl Content="{Binding SelectedImage}" PageTransition="{x:Null}" >
    <TransitioningContentControl.ContentTemplate>
        <DataTemplate DataType="Bitmap">
            <Image Source="{Binding}"  />
        </DataTemplate>
    </TransitioningContentControl.ContentTemplate>
</TransitioningContentControl>
```