Data Binding

You are able to bind the content of the RadTransitionCotnrol to a data item or to a property of another control. Whenever the value of the data item or the property changes, the RadTransitionControl will apply a transition to the change.

In case of using data binding, you have to combine the Content property with the ContentTemplate property. This is needed when the bound object is not an UIElement. In this case use the ContentTemplate property to define a DataTemplate, in which to define the appropriate data bindings to the object.

Here is an example:

<telerik:RadTransitionControl x:Name="radTRansitionControl" 
                        Content="{Binding MyDataItem}"> 
    <telerik:RadTransitionControl.ContentTemplate> 
        <DataTemplate> 
            <TextBlock Text="{Binding Text}" /> 
        </DataTemplate> 
    </telerik:RadTransitionControl.ContentTemplate> 
</telerik:RadTransitionControl> 

The object that you have bound to the Content property becomes the DataContext of the ContentTemplate and you can bind your UIElements to its properties. In this example the TextBlock's Text property is bound to the Text property of the MyDataItem object.

You can also bind the RadTransitionControl to another Control in your UserControl. For example, bind the RadTransitionControl to the SelectedItem property of a ListBox.

Note that when the ItemsControl works with a dynamic data via its ItemsControl property, the SelectedItem will return the respective data item object. When the ItemsControl works with static container items (e.g. ListBoxItem, ComboBoxItem etc.), the SelectedItem will return the container itself.

<ListBox x:Name="MyListBox"> 
    ... 
</ListBox> 
<telerik:RadTransitionControl x:Name="radTRansitionControl1" 
                        Content="{Binding SelectedItem, ElementName=MyListBox}"> 
    <telerik:RadTransitionControl.ContentTemplate> 
        <DataTemplate> 
            <TextBlock Text="{Binding Text}" /> 
        </DataTemplate> 
    </telerik:RadTransitionControl.ContentTemplate> 
</telerik:RadTransitionControl> 

In this case the data item representing the SelectedItem is the DataContext of the ControlTemplate.

In the Getting Started topic you can find an example of a RadTransitionControl bound to a ListBox, which lists photos.

See Also

• Working with the RadTransitionControl

• Integration with Content Controls

• Transitions