How to Add TransitionControl to existing Navigation Frame with urimapper?

[Fred]

I saw your sample project on the other post of using the this control.. My question is how can I incorporate that properly into my existing Navigation:Frame?

My existing code:

 <navigation:Frame x:Name="ContentFrame"
                    Style="{StaticResource ContentFrameStyle}"
                    Source="/Start"
                    Navigated="ContentFrame_Navigated"
                    NavigationFailed="ContentFrame_NavigationFailed" Padding="0"
                    ScrollViewer.HorizontalScrollBarVisibility="Visible"
                    ScrollViewer.VerticalScrollBarVisibility="Visible"
                    BorderThickness="0" Margin="0,-1,0,1">
                <navigation:Frame.UriMapper>
                  <uriMapper:UriMapper>
                    <uriMapper:UriMapping Uri="" MappedUri="/Views/Start.xaml"/>
                    <uriMapper:UriMapping Uri="/{pageName}" MappedUri="/Views/{pageName}.xaml"/>
                  </uriMapper:UriMapper>
                </navigation:Frame.UriMapper>

            </navigation:Frame>

And here is your version from project sample:

<navigation:Frame Grid.Row="1">
            <navigation:Frame.Template>
                <ControlTemplate>
                    <telerik:RadTransitionControl Content="{TemplateBinding Content}"
                            ContentTemplate="{TemplateBinding Content}" />
                </ControlTemplate>
            </navigation:Frame.Template>
        </navigation:Frame>

How can I marry the two?

[Valeri Hristov]

Hello Fred,

You could try this:

<navigation:Frame x:Name="ContentFrame"
    Style="{StaticResource ContentFrameStyle}"
    Source="/Start"
    Navigated="ContentFrame_Navigated"
    NavigationFailed="ContentFrame_NavigationFailed" Padding="0"
    ScrollViewer.HorizontalScrollBarVisibility="Visible"
    ScrollViewer.VerticalScrollBarVisibility="Visible"
    BorderThickness="0" Margin="0,-1,0,1">

    <navigation:Frame.UriMapper>
        <uriMapper:UriMapper>
            <uriMapper:UriMapping Uri="" MappedUri="/Views/Start.xaml"/>
            <uriMapper:UriMapping Uri="/{pageName}" MappedUri="/Views/{pageName}.xaml"/>
        </uriMapper:UriMapper>
    </navigation:Frame.UriMapper>

    <navigation:Frame.Template>
        <ControlTemplate>
        <telerik:RadTransitionControl Content="{TemplateBinding Content}"
            ContentTemplate="{TemplateBinding Content}" />
        </ControlTemplate>
    </navigation:Frame.Template>

</navigation:Frame>

Please, note that the Transition property of RadTransitionControl could not be set inline, e.g. you should write something like this:
<telerik:RadTransitionControl Content="{TemplateBinding Content}" 
   ContentTemplate="{TemplateBinding Content}">
    <telerik:RadTransitionControl.Transition>
        <effects:FadeTransition />
    </telerik:RadTransitionControl.Transition>
</telerik:RadTransitionControl>

where effects is declared like this:
xmlns:effects="clr-namespace:Telerik.Windows.Controls.TransitionEffects;assembly=Telerik.Windows.Controls"

All the best,
Valeri Hristov
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Fred]

Almost there..

If I put in this...

<navigation:Frame.Template>
                    <ControlTemplate TargetType="navigation:Frame">
                        <telerik:RadTransitionControl Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding Content}">
                            <effects:SlideAndZoomTransition />
                        </telerik:RadTransitionControl>
                    </ControlTemplate>
                </navigation:Frame.Template>

The project builds and does the wave transition, and doesn't do the SlideAndZoom.  In expression blend I get an error on Line 4.

<effects: line.. stating "The property "Content" is set multiple times"  If I take out the property Content, I just get the txt in my view that says SlideAndZoomTransition and my original view is gone. 

So it's close, as if I don't put any effect it works with the wave trans, or if I build and ignore the error it does as well, but not slide.

[Miroslav Nedyalkov]

Hi Fred,

 You didn't put the property element and the XAML parser interprets your code as the transition is used as content of the Transition control. Your code should look like the following:

<navigation:Frame.Template>
                    <ControlTemplate TargetType="navigation:Frame">
                        <telerik:RadTransitionControl Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding Content}">
<telerik:RadTransitionControl.Transition>
                            <effects:SlideAndZoomTransition />
</telerik:RadTransitionControl.Transition>
                        </telerik:RadTransitionControl>
                    </ControlTemplate>
                </navigation:Frame.Template>

Hope this helps!

Best wishes,
Miroslav Nedyalkov
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.