This is a migrated thread and some comments may be shown as answers.

How to Add TransitionControl to existing Navigation Frame with urimapper?

3 Answers 275 Views

TransitionControl

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

Fred asked on 26 Mar 2010, 09:47 PM

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?

3 Answers, 1 is accepted

Accepted

answered on 29 Mar 2010, 01:46 PM

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.

answered on 06 Apr 2010, 06:53 PM

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.

Accepted

answered on 07 Apr 2010, 09:00 AM

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