How to Add TransitionControl to existing Navigation Frame with urimapper?

4 posts, 2 answers
  1. Fred
    Fred avatar
    86 posts
    Member since:
    Sep 2008

    Posted 26 Mar 2010 Link to this post

    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?
  2. Answer
    Valeri Hristov
    Admin
    Valeri Hristov avatar
    2252 posts

    Posted 29 Mar 2010 Link to this post

    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.
  3. DevCraft banner
  4. Fred
    Fred avatar
    86 posts
    Member since:
    Sep 2008

    Posted 06 Apr 2010 Link to this post

    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.
  5. Answer
    Miroslav Nedyalkov
    Admin
    Miroslav Nedyalkov avatar
    1718 posts

    Posted 07 Apr 2010 Link to this post

    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.
Back to Top