Edit this page

Getting Started

The RadTransitionControl derives form the ContentControl and its purpose is to visualize some content (UserControls, UIElements, Data etc). Additionally it can apply transition effects upon changing its content. This tutorial will help you to get started with the RadTransitionControl basics. It will show you how to:

Add a RadTransitionControl to your application

In order to add a RadTransitionControl to your application, you have to simply create an instance of it in your XAML. Here is a sample code:

As the RadTransitionControl is located in the Telerik.Windows.Controls namespace of the Telerik.Windows.Controls assembly, you have to add the following namespace declaration in your UserControl:

XAML

xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"

XAML

<telerik:RadTransitionControl x:Name="radTransitionControl" />

The RadTransitionControl doesn't have any visual elements, so if it has no content, nothing will be visualized.

Display Images listed in a ListBox

The RadTransitionControl is a content control. Besides displaying content it can apply transition effects upon its change. To make you familiar with this, a collection of images will be used in this tutorial, which will be listed in a ListBox control. The selected image should appear as content of the RadTransitionControl. Changing the selected image should change the content of the control, too.

Here is a sample ListBox definition, which is populated with objects of type Photo (string Name, string ImageUrl).

XAML

<ListBox x:Name="PhotosListBox"
    DisplayMemberPath="Name"
    ItemsSource="{Binding PhotosCollection}" />

The content of the RadTransitionControl should be represented by the SelectedItem of the ListBox. This can be done by using element to element binding.

You can learn more about binding the RadTransitionControl in the Data Binding topic.

As the SelectedItem is represented by the respective data item, you have to define a DataTemplate for the content of the RadTransitionControl and bind it to the appropriate property of the data item (in this case ImageUrl). Note that as the Content property is bound to the data item, the latter is the DataContext for the elements in the ContentTemplate.

XAML

<Grid x:Name="LayoutRoot">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <ListBox x:Name="PhotosListBox1"
DisplayMemberPath="Name"
ItemsSource="{Binding PhotosCollection}" />
    <telerik:RadTransitionControl Grid.Column="1"
                            Content="{Binding SelectedItem, ElementName=PhotosListBox}">
        <telerik:RadTransitionControl.ContentTemplate>
            <DataTemplate>
                <Image Source="{Binding ImageUrl}"
                Stretch="Uniform"
                Width="320"
                Height="240" />
            </DataTemplate>
        </telerik:RadTransitionControl.ContentTemplate>
    </telerik:RadTransitionControl>
</Grid>

If you run your application at this point, the content of the RadTransitionControl should change when you select an item in the ListBox. Note that no transition will apply. This is because there is no transition effect set to the RadTransitionControl. Read the next section to learn how to set transition effects.

Apply transitions when the Image is changed

The RadTransitionControl automatically detects when the content is changed and applies a transition to the content. By default there is no preset transition, so you have to set it via the Transition property.

To learn more about the transitions in the RadTransitionControl read this topic.

As the built-in transition effects are located in the Telerik.Windows.Controls.TransitionEffects namespace of the Telerik.Windows.Controls assembly, you have to add the following namespace declaration in your UserControl:

XAML

xmlns:telerikTransitions="clr-namespace:Telerik.Windows.Controls.TransitionEffects;assembly=Telerik.Windows.Controls"

XAML

<telerik:RadTransitionControl Grid.Column="1"
                      Content="{Binding SelectedItem, ElementName=PhotosListBox}">
    <telerik:RadTransitionControl.Transition>
        <telerikTransitions:MotionBlurredZoomTransition />
    </telerik:RadTransitionControl.Transition>
</telerik:RadTransitionControl>

Now, if you run your application and select an image from the list, you should see the transition upon the content change.

See Also