Question on Transition sample

[Ben Hayat]

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...

[Hristo Borisov]

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.

[Ben Hayat]

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!

[Miroslav Nedyalkov]

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.

[Ben Hayat]

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.

[Jeremy Brown]

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

[Miroslav Nedyalkov]

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.

[Jeremy Brown]

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

Regards

[John]

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

[John]

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

Thanks

John

[Ben Hayat]

John, RTM will be out any day now. You may want to wait to install the full RTM.

[John]

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;
        }
    }
}

[John]

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

[John]

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

[Miroslav Nedyalkov]

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.

[John]

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

[Miroslav Nedyalkov]

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.