Question on Transition sample

17 posts, 1 answers
  1. Ben Hayat
    Ben Hayat avatar
    892 posts
    Member since:
    May 2008

    Posted 19 Feb 2010 Link to this post

    Firstly, congrats to the team for Q1 beta. I'll soon download it and replace my Q3.
    One question from looking at the "First look" sample. I see the transition from one form to another. Is this transition using MS Navigation and frame to perform transition between pages or is this one page with a tab control, hiding the tab header and transitioning between different tab items or what.

    Thanks!
    [UPDATE] Never mind, I see it's transitioning through images...
  2. Answer
    Hristo Borisov
    Admin
    Hristo Borisov avatar
    298 posts

    Posted 22 Feb 2010 Link to this post

    Hi Ben,

    One of the first thing you should know about the TransitionControl is that it is a ContentControl. Thus, whenever you change the content of the control, a transition animation will be triggered.

    In our Transition Control First Look example, we simply have a PagerViewModel that has a collection of PageViewModels and several indices for controlling the selection of its view which is a listbox. The transition control is bound to the selected item of the listbox, which is of type PageViewModel and simply holds an image and a string.

    We are glad that you are satisfied with our new control, and we are eager to receiving any valuable feedback from our customers.


    Regards,
    Hristo Borisov
    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. Ben Hayat
    Ben Hayat avatar
    892 posts
    Member since:
    May 2008

    Posted 22 Feb 2010 Link to this post

    Hristo, can this transition control be used with MS navigation system when navigating from one page to another? If yes, can it be done at the Frame control level once rather than in each page separately, so if we need to change that, we could change only one place rather than all the pages?

    Thanks!
  5. Miroslav Nedyalkov
    Admin
    Miroslav Nedyalkov avatar
    1718 posts

    Posted 25 Feb 2010 Link to this post

    Hello ..Ben,

    Yes, you can use it with the MS Page navigation. What you need to do in order to achive this is to change the ControlTemplate of the Frame Control and to use the TransitionControl instead of a ContentPresenter.

    Hope this answers your question.

    Regards,
    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.
  6. Ben Hayat
    Ben Hayat avatar
    892 posts
    Member since:
    May 2008

    Posted 25 Feb 2010 Link to this post

    Miro, would it be possible by release time you can give us a sample? I'm very sure this will be used a lot by many developers who want to add transition to frame control. I think having a "working" version will go a long way even for new prospects. Thanks for the good news.
  7. Jeremy Brown
    Jeremy Brown avatar
    6 posts
    Member since:
    Jan 2010

    Posted 25 Feb 2010 Link to this post

    Just change the transition to the one you wish to use.

    <UserControl 
        x:Class="TransitionTest.MainPage" 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"  
        xmlns:uriMapper="clr-namespace:System.Windows.Navigation;assembly=System.Windows.Controls.Navigation" 
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
        xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls" 
        xmlns:telerikTransitions="clr-namespace:Telerik.Windows.Controls.TransitionEffects;assembly=Telerik.Windows.Controls"  
        mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480"
        <UserControl.Resources> 
            <ControlTemplate x:Key="FrameControlTemplate1" TargetType="navigation:Frame"
                <Border Background="{TemplateBinding Background}" 
                    BorderBrush="{TemplateBinding BorderBrush}" 
                    BorderThickness="{TemplateBinding BorderThickness}" 
                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                    <telerik:RadTransitionControl x:Name="TransitionControl" 
                                Content="{TemplateBinding Content}" 
                                Cursor="{TemplateBinding Cursor}" 
                                Margin="{TemplateBinding Padding}" 
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                        <telerik:RadTransitionControl.Transition> 
                            <telerikTransitions:SlideAndZoomTransition /> 
                        </telerik:RadTransitionControl.Transition>   
                    </telerik:RadTransitionControl> 
                </Border> 
            </ControlTemplate> 
        </UserControl.Resources> 
        <Grid x:Name="LayoutRoot" Style="{StaticResource LayoutRootGridStyle}"
            <Border x:Name="ContentBorder" Style="{StaticResource ContentBorderStyle}"
                <navigation:Frame x:Name="ContentFrame" Style="{StaticResource ContentFrameStyle}"  
                                  Source="/Home" Navigated="ContentFrame_Navigated"  
                                  NavigationFailed="ContentFrame_NavigationFailed"  
                                  Template="{StaticResource FrameControlTemplate1}"
                    <navigation:Frame.UriMapper> 
                      <uriMapper:UriMapper> 
                        <uriMapper:UriMapping Uri="" MappedUri="/Views/Home.xaml"/> 
                        <uriMapper:UriMapping Uri="/{pageName}" MappedUri="/Views/{pageName}.xaml"/> 
                      </uriMapper:UriMapper> 
                    </navigation:Frame.UriMapper> 
                </navigation:Frame> 
            </Border> 
            <Grid x:Name="NavigationGrid" Style="{StaticResource NavigationGridStyle}"
                <Border x:Name="BrandingBorder" Style="{StaticResource BrandingBorderStyle}"
                    <StackPanel x:Name="BrandingStackPanel" Style="{StaticResource BrandingStackPanelStyle}"
                        <ContentControl Style="{StaticResource LogoIcon}"/> 
                        <TextBlock x:Name="ApplicationNameTextBlock" Style="{StaticResource ApplicationNameStyle}"  
                                   Text="Application Name"/> 
                    </StackPanel> 
                </Border> 
                <Border x:Name="LinksBorder" Style="{StaticResource LinksBorderStyle}"
                    <StackPanel x:Name="LinksStackPanel" Style="{StaticResource LinksStackPanelStyle}"
                        <HyperlinkButton x:Name="Link1" Style="{StaticResource LinkStyle}"  
                                         NavigateUri="/Home" TargetName="ContentFrame" Content="home"/> 
                        <Rectangle x:Name="Divider1" Style="{StaticResource DividerStyle}"/> 
                        <HyperlinkButton x:Name="Link2" Style="{StaticResource LinkStyle}" 
                                         NavigateUri="/About" TargetName="ContentFrame" Content="about"/> 
                    </StackPanel> 
                </Border> 
            </Grid> 
        </Grid> 
    </UserControl> 

    Regards
  8. Miroslav Nedyalkov
    Admin
    Miroslav Nedyalkov avatar
    1718 posts

    Posted 26 Feb 2010 Link to this post

    Hello Jeremy,

     Thank you for your suggestion! We should write a blog post about this - it is a good example how the TransitionControl could be used..

    Sincerely yours,
    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.
  9. Jeremy Brown
    Jeremy Brown avatar
    6 posts
    Member since:
    Jan 2010

    Posted 26 Feb 2010 Link to this post

    No problem, it was the first thing I did after downloading the beta. It was fun to play with.

    Regards
  10. John
    John avatar
    17 posts
    Member since:
    Feb 2009

    Posted 08 Mar 2010 Link to this post

    Hi,

    Where can i get the Telerik.Windows.Controls.TransitionEffects control?  I don't see it in our current set of controls and I don't see where I can download it.

    Thanks

    John
  11. John
    John avatar
    17 posts
    Member since:
    Feb 2009

    Posted 08 Mar 2010 Link to this post

    Okay, nvm.  I see that this is part of the beta controls.  I'll see about downloading those.

    Thanks

    John
  12. Ben Hayat
    Ben Hayat avatar
    892 posts
    Member since:
    May 2008

    Posted 08 Mar 2010 Link to this post

    John, RTM will be out any day now. You may want to wait to install the full RTM.
  13. John
    John avatar
    17 posts
    Member since:
    Feb 2009

    Posted 08 Mar 2010 Link to this post

    Well I'm trying to do a sink and flip type transition on my project just like what the demo site does when you switch between preview and code view.  I"m designing my controls demo site almost exactly like the telerik one except mine is themed differently.  So mind has the piece in the middle that I'm trying to have sink and flip and I was hoping the new transition control would do this.  However when I use the new dll i'm having issues.  For some reason when I switched to the new dll my radtreeview on my page is breaking..ie i get a xaml exception error and it's the treeview because if I comment it out then the error goes away.  So do you know how to do a transition like that?  I'm doing the sink and slide using the provided transition code from another forum post.  Unfortunately i'm not very learned in this stuff yet so I was hoping to find a similar example of the sink and flip.

    Here is the PageSinkAndSlideTransition.cs from Telerik.  I have this working so if I could figure out how to do the sink and flip it would be great.  Otherwise I'll use new controls from Telerik and have to figure out what they changed to break my radtreeview.

    using System;  
    using System.Windows;  
    using System.Windows.Controls;  
    using System.Windows.Media.Animation;  
    using Telerik.Windows.Controls;  
     
    namespace ControlsDemo.Utilities   
    {  
        public class PageSinkAndSlideTransition : ITransition  
        {  
            private Storyboard animation = new Storyboard();  
            private FrameworkElement item1;  
            private FrameworkElement item2;  
            private FrameworkElement mask1;  
            private FrameworkElement mask2;  
            private bool isRunning;  
     
            public event EventHandler<TransitionEventArgs> TransitionAnimationCompleted = delegate { };  
     
    #if WPF  
            public PageSinkAndSlideTransition(FrameworkElement mask1, FrameworkElement mask2)  
            {  
    #else  
            public PageSinkAndSlideTransition(double pageWidth, Grid panel, FrameworkElement mask1, FrameworkElement mask2)  
            {  
                this.PageWidth = pageWidth;  
                this.Container = panel;  
    #endif  
                this.mask1 = mask1;  
                this.mask2 = mask2;  
            }  
     
            public double PageWidth  
            {  
                get;  
                set;  
            }  
     
            public Grid Container  
            {  
                get;  
                set;  
            }  
     
            public bool IsRunning  
            {  
                get  
                {  
                    return isRunning;  
                }  
    #if !WPF  
                set  
                {  
                    throw new NotImplementedException();  
                }  
    #endif  
            }  
     
    #if WPF  
            public void Begin(FrameworkElement mockItem1, Grid container, FrameworkElement newPage)  
            {  
                this.Container = container;  
                this.PageWidth = container.ActualWidth;  
                this.item1 = mockItem1;  
                this.item2 = newPage;  
     
                this.Container.Children.Add(this.item1);  
     
                var width = PageWidth;  
     
                var scaleFactor = 0.8;  
                var halfSrink = (1.0 - scaleFactor) / 2;  
    #else  
            public void Begin(IFrame page)  
            {  
                double width = this.PageWidth;  
                this.item2 = page as FrameworkElement;  
     
                if (this.Container.Children.Count > 0 && this.Container.Children[0] is RadFrame)  
                {  
                    this.Container.Children.RemoveAt(0);  
                }  
     
                if (this.Container.Children.Count < 1)  
                {  
                    this.Container.Children.Add(this.item2);  
                    return;  
                }  
     
     
                thisthis.item1 = this.Container.Children[0] as FrameworkElement;  
     
                this.Container.Children.Add(this.item2);  
     
                var scaleFactor = 0.8;  
                var page1 = item1 as IFrame;  
     
                var halfSrink = (1.0 - scaleFactor) / 2;  
    #endif  
                this.Container.Children.Add(this.mask1);  
                this.Container.Children.Add(this.mask2);  
     
                var scaleDownSpline = new Spline(0.504000008106232, 0.256000012159348, 0.458999991416931, 1);  
                var moveSpline = new Spline(0.247999995946884, 0, 1, 1);  
                var scaleUpSpline = new Spline(0.321000009775162, 0, 0.45100000500679, 1);  
                var spacing = 15.0;  
     
                thisthis.animation = this.item1  
                    .Animate()  
                    .With(this.mask1)  
                        .EnsureDefaultTransforms()  
                        .Origin(0, 0.5)  
                        .Scale(0, 1, 0.2, 1, 0.7, scaleFactor)  
                            .Splines(2, scaleDownSpline)  
                        .MoveX(0.7, 0, 1.365, (-width * (scaleFactor - halfSrink)) - spacing, 1.9, (-width * scaleFactor) - spacing)  
                            .Splines(1, moveSpline)  
                            .Splines(2, scaleUpSpline)  
                    .Without(this.item1)  
                        .Opacity(0, 0, 0.2, 0, 0.7, 1)  
                            .Splines(1, scaleDownSpline)  
                    .Animate(this.mask2)  
                        .Opacity(1.35, 1, 1.9, 0)  
                            .Splines(scaleUpSpline)  
                    .With(this.item2)  
                        .EnsureDefaultTransforms()  
                        .Origin(0.5, 0.5)  
                        .Scale(0, scaleFactor, 1.365, scaleFactor, 1.9, 1)  
                            .Splines(1, moveSpline)  
                            .Splines(2, scaleUpSpline)  
                        .MoveX(0.0, ((scaleFactor + halfSrink) * width) + spacing, 0.2, ((scaleFactor + halfSrink) * width) + spacing, 0.7, ((scaleFactor - halfSrink) * width) + spacing, 1.365, 0)  
                            .Splines(2, scaleDownSpline)  
                            .Splines(3, moveSpline)  
                    .Instance;  
     
                this.animation.SpeedRatio = 755.0 / width * 1.5;  
     
                this.isRunning = true;  
    #if WPF  
                this.animation.Completed += (sender, e) => 
                {  
                    this.TransitionAnimationCompleted(this, new TransitionEventArgs(item2));  
     
                    Container.Children.Remove(mask1);  
                    Container.Children.Remove(mask2);  
                    RemoveVisualBrush();  
                    Container.Children.Remove(item1);  
                    item1 = null;  
                    item2 = null;  
                };  
    #else  
                this.animation.Completed += (sender, e) => 
                {  
                    this.TransitionAnimationCompleted(this, new TransitionEventArgs(item2));  
     
                    // Unregister!  
                    Container.Children.Remove(mask1);  
                    Container.Children.Remove(mask2);  
                    this.Container.Children.Remove(this.item1);  
                    item1 = null;  
                    item2 = null;  
     
                };  
    #endif  
                this.animation.Begin();  
            }  
     
    #if WPF  
            private void RemoveVisualBrush()  
            {  
                var shape = item1 as Shape;  
                if (shape != null)  
                {  
                    var visBrush = shape.Fill as VisualBrush;  
                    if (visBrush != null)  
                    {  
                        visBrush.Visual = null;  
                    }  
                }  
            }  
    #endif  
     
            public void StopTransition()  
            {  
                // Move to initial state:  
                this.animation.Stop();  
    #if WPF  
                this.Container.Children.Remove(this.item1);  
    #else  
                this.Container.Children.Remove(this.item1);  
    #endif  
                this.Container.Children.Remove(this.mask1);  
                this.Container.Children.Remove(this.mask2);  
                this.item1 = null;  
                this.item2 = null;  
                this.isRunning = false;  
            }  
        }  
     
        public class TransitionEventArgs : EventArgs  
        {  
            public FrameworkElement TargetExamplePage  
            {  
                get;  
                set;  
            }  
     
            public TransitionEventArgs(FrameworkElement targetExample)  
            {  
                this.TargetExamplePage = targetExample;  
            }  
        }  
    }  
     
  14. John
    John avatar
    17 posts
    Member since:
    Feb 2009

    Posted 08 Mar 2010 Link to this post

    I'm just really having an off day.  I forgot to point my reference for the treeview which is Telerik.Windows.Controls.Navigation to the beta dll so it was blowing up because I was using the beta Telerik.Windows.Controls.dll but the old Telerik.Windows.Controls.Navigation.  So i'm playing with the transition control now.  Pretty cool so far.

    Thanks

    John
  15. John
    John avatar
    17 posts
    Member since:
    Feb 2009

    Posted 09 Mar 2010 Link to this post

    So I have the telerikTransitions control working.  My issue is the limited number of transitions included and the fact that the sink and flip transition like in the demo site when you click preview is not one of them.  Do you have a transition example like that?  If so can I simply create a transition and tell the telerikTransitions control to use that instead of the built in ones?

    Thanks

    John
  16. Miroslav Nedyalkov
    Admin
    Miroslav Nedyalkov avatar
    1718 posts

    Posted 11 Mar 2010 Link to this post

    Hi John,

     Yes, you can create your custom transition for the TransitionControl. Unfortunately we don't have such example (for the sink and flip transition), but hopefully we will develop one soon.

    For more information about how to develop your custom transition you could refer to the following example: http://demos.telerik.com/silverlight/#TransitionControl/SL/FirstLook. There is a transition, called SampleShaderProvider in it - it implements a TransitionEffect provider that creates TransitionEffects.

    Hope this information is helpful.

    All the best,
    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.
  17. John
    John avatar
    17 posts
    Member since:
    Feb 2009

    Posted 11 Mar 2010 Link to this post

    Hi,

    Thanks for the reply.  I have looked at what you provided.  It seems to be missing the key file that has the actual transition code in it.

    Notice the shader(SampleShader.ps) being loaded below and it's not in the demo code example files.

    using System.Windows.Media.Effects;  
    using Telerik.Windows.Controls.TransitionEffects;  
     
    namespace Telerik.Windows.Examples.TransitionControl.CustomTransition  
    {  
        public class SampleShaderEffect : BaseTransitionEffect  
        {  
            protected override System.Windows.Media.Effects.PixelShader LoadShader()  
            {  
                return new PixelShader  
                {  
                    UriSource = PackUri<SampleShaderEffect>("SL/FirstLook/SampleShader.ps")  
                };  
            }  
        }  
    }  
     

    Thanks

    John
  18. Miroslav Nedyalkov
    Admin
    Miroslav Nedyalkov avatar
    1718 posts

    Posted 15 Mar 2010 Link to this post

    Hi John,

    This file is actually in the project, but it is not shown in the code-viewer of the examples application because it is a compiled shader file. I would suggest you to download the whole instalation that contains the demo project and take a look at the examples project.

    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
DevCraft banner