Animating a RadWindow

2 posts, 0 answers
  1. Tony
    Tony avatar
    24 posts
    Member since:
    Nov 2011

    Posted 26 Mar 2012 Link to this post

    Whats the best way to animate a rad window and can you provide an example? Ive seen lots of posts dated 2009 talking about this topic but I was wondering if there are any  updates. Also, my RadWindow is instantiated in the code behind of its parent page as well and I would like to animate it (differently from the default fade in) when opened.

    public partial class ParentPage {
        ApplyGradeWindow agw = new ApplyGradeWindow();
     
        protected void ShowWindow(GradeDocumentArgs gradeArgs)
        {
            agw.CurrentGradeDocumentArgs = gradeArgs;
            agw.ShowDialog();
        }
    }

  2. Ivo
    Admin
    Ivo avatar
    390 posts

    Posted 27 Mar 2012 Link to this post

    Hello Tony,

    You can achieve this by setting a creating a style into the App.xaml for the RadWindow. The property you will have to set is telerik:AnimationManager.AnimationSelector. Here is the default style, you can modify it to suit your needs.
    <Style TargetType="telerik:RadWindow" >
                <Setter Property="telerik:AnimationManager.AnimationSelector">
                    <Setter.Value>
                        <telerik:AnimationSelector>
                            <telerik:AnimationGroup AnimationName="Show">
     
                                <telerik:FadeAnimation Direction="Out" TargetElementName="LayoutRoot">
     
                                    <telerik:FadeAnimation.Easing>
                                        <QuarticEase EasingMode="EaseOut" />
                                    </telerik:FadeAnimation.Easing>
     
                                </telerik:FadeAnimation>
                                <telerik:ScaleAnimation Direction="Out" TargetElementName="LayoutRoot" MinScale="0.9">
     
                                    <telerik:ScaleAnimation.Easing>
                                        <QuarticEase EasingMode="EaseIn" />
                                    </telerik:ScaleAnimation.Easing>
     
                                </telerik:ScaleAnimation>
     
                                <telerik:FadeAnimation Direction="In" TargetElementName="LayoutRoot">
                                    <telerik:FadeAnimation.Easing>
                                        <QuarticEase EasingMode="EaseOut" />
                                    </telerik:FadeAnimation.Easing>
                                </telerik:FadeAnimation>
                                <telerik:ScaleAnimation Direction="In" TargetElementName="LayoutRoot" MinScale="0.9">
     
                                    <telerik:ScaleAnimation.Easing>
                                        <QuarticEase EasingMode="EaseOut" />
                                    </telerik:ScaleAnimation.Easing>
     
                                </telerik:ScaleAnimation>
                            </telerik:AnimationGroup>
                            <telerik:AnimationGroup AnimationName="Hide">
     
                            </telerik:AnimationGroup>
                        </telerik:AnimationSelector>
                    </Setter.Value>
                </Setter>
            </Style>


    Greetings, Ivo
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  3. DevCraft banner
Back to Top