TransitionControl (or TransitionPresenter?) in a Frame

[Stefan]

Hi,

I'm trying to replace the ContentPresenter in a Frame with the TransitionControl as described here:

http://docs.telerik.com/devtools/wpf/controls/radtransitioncontrol/features/radtransition-integration-with-content-controls

If I follow this example, no content is displayed.

I also tried using TransitionPresenter, which is better in that the content does show up, but there are no transition animations?

I have successfully used a TransitionControl stand-alone, but I'm hoping to use the navigation features of Frame along with transition animations.

What am I doing wrong?

<Frame x:Name="NavFrame" NavigationUIVisibility="Visible" Margin="0,50,0,0">
    <Frame.Template>
        <ControlTemplate TargetType="{x:Type Frame}">
            <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}">
                <teleriktp:TransitionPresenter CurrentContent="{TemplateBinding Content}" Duration="0:0:3">
                    <teleriktp:TransitionPresenter.Transition>
                        <telerikTransitions:WaveTransition />
                    </teleriktp:TransitionPresenter.Transition>
                </teleriktp:TransitionPresenter>
            </Border>
        </ControlTemplate>
    </Frame.Template>
</Frame>

[Martin Ivanov]

Hello Stefan,

In order for the TransitionPresenter to execute its animation you need to set its Host property to a Panel element. In your case you can wrap the TransitionPresenter into a Grid element, set the Grid's x:Name and use ElementName binding to bind the transition control's Host to the Grid. For example:

<Grid x:Name="hostPanel">
    <telerikTransitionControl:TransitionPresenter CurrentContent="{TemplateBinding Content}" Duration="0:0:3" Host="{Binding ElementName=hostPanel}">
        <telerikTransitionControl:TransitionPresenter.Transition>
            <telerikTransitions:WaveTransition />
        </telerikTransitionControl:TransitionPresenter.Transition>
    </telerikTransitionControl:TransitionPresenter>
</Grid>

I also tested your scenario with the RadTransitionControl and it is displayed properly. You can check this in the attached project.

Regards,
Martin Ivanov
Progress Telerik