Integration with Content Controls

The RadTransitionControl can be easily integrated in other more complex ContentControls in order to extend their functionality. For example - ScrollViewer, HeaderedContentControl etc.

You can also integrate the RadTransitionControl in any control that somehow visualizes content.

To integrate a RadTransitionControl with a more complex ContentControl, you have to replace the ContentControl or the ContentPresenter of the latter one ControlTemplate with an instance of the RadTransitionControl and to configure the TemplateBindings for the Content and the ContentTemplate properties.

Here is an example with the HeaderedContentControl. Take a look at the default ControlTemplate:

In order to use the HeaderedContentControl you have to add the following namespace to your UserControl: xmlns:controlsToolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"

• XAML

<ControlTemplate x:Key="HeaderedContentControlTemplate1" TargetType="controlsToolkit:HeaderedContentControl"> 
    <StackPanel> 
        <ContentPresenter Cursor="{TemplateBinding Cursor}" 
                    ContentTemplate="{TemplateBinding HeaderTemplate}" 
                    Content="{TemplateBinding Header}" 
                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                    Margin="{TemplateBinding Padding}" 
                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}" /> 
        <ContentPresenter Cursor="{TemplateBinding Cursor}" 
                    ContentTemplate="{TemplateBinding ContentTemplate}" 
                    Content="{TemplateBinding Content}" 
                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                    Margin="{TemplateBinding Padding}" 
                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}" /> 
    </StackPanel> 
</ControlTemplate> 

• XAML

<ControlTemplate x:Key="HeaderedContentControlTemplate2" TargetType="HeaderedContentControl"> 
    <StackPanel> 
        <ContentPresenter Cursor="{TemplateBinding Cursor}" 
                    ContentTemplate="{TemplateBinding HeaderTemplate}" 
                    Content="{TemplateBinding Header}" 
                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                    Margin="{TemplateBinding Padding}" 
                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}" /> 
        <ContentPresenter Cursor="{TemplateBinding Cursor}" 
                    ContentTemplate="{TemplateBinding ContentTemplate}" 
                    Content="{TemplateBinding Content}" 
                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                    Margin="{TemplateBinding Padding}" 
                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}" /> 
    </StackPanel> 
</ControlTemplate> 

The first ContentPresenter is responsible for the header and the second one - for the content. Replace the second one with the RadTransitionControl and preserve the TemplateBindings.

In order to use the RadTransitionControl you have to add the following namespace to your UserControl:

• XAML

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

• XAML

<ControlTemplate x:Key="HeaderedContentControlTemplate3" TargetType="controlsToolkit:HeaderedContentControl"> 
    <StackPanel> 
        <ContentPresenter Cursor="{TemplateBinding Cursor}" 
                    ContentTemplate="{TemplateBinding HeaderTemplate}" 
                    Content="{TemplateBinding Header}" 
                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                    Margin="{TemplateBinding Padding}" 
                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}" /> 
 
        <telerik:RadTransitionControl Cursor="{TemplateBinding Cursor}" 
                    ContentTemplate="{TemplateBinding ContentTemplate}" 
                    Content="{TemplateBinding Content}" 
                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                    Margin="{TemplateBinding Padding}" 
                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}" /> 
 
    </StackPanel> 
</ControlTemplate> 

• XAML

<ControlTemplate x:Key="HeaderedContentControlTemplate" TargetType="HeaderedContentControl"> 
    <StackPanel> 
        <ContentPresenter Cursor="{TemplateBinding Cursor}" 
                    ContentTemplate="{TemplateBinding HeaderTemplate}" 
                    Content="{TemplateBinding Header}" 
                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                    Margin="{TemplateBinding Padding}" 
                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}" /> 
 
        <telerik:RadTransitionControl Cursor="{TemplateBinding Cursor}" 
                    ContentTemplate="{TemplateBinding ContentTemplate}" 
                    Content="{TemplateBinding Content}" 
                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                    Margin="{TemplateBinding Padding}" 
                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}" /> 
 
    </StackPanel> 
</ControlTemplate> 

Next, configure the RadTransitionControl to match your needs. For example, define its Transition.

To learn more about working with the RadTransitionControl read this topic. To learn more about transition effects read the Transitions topic.

In order to use the built-in transition effects you have to add the following namespace to your UserControl: xmlns:telerikTransitions="clr-namespace:Telerik.Windows.Controls.TransitionEffects;assembly=Telerik.Windows.Controls"

• XAML

<telerik:RadTransitionControl Cursor="{TemplateBinding Cursor}" 
                      ContentTemplate="{TemplateBinding ContentTemplate}" 
                      Content="{TemplateBinding Content}" 
                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                      Margin="{TemplateBinding Padding}" 
                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"> 
    <telerik:RadTransitionControl.Transition> 
        <telerikTransitions:MotionBlurredZoomTransition /> 
    </telerik:RadTransitionControl.Transition> 
</telerik:RadTransitionControl>