Animation

8 posts, 1 answers
  1. Oksana
    Oksana avatar
    10 posts
    Member since:
    Feb 2008

    Posted 17 Mar 2011 Link to this post

    Hello,

    can you please show an example of how to change the speed of transition animation when it is enabled for the extender control(telerik:AnimationManager.IsAnimationEnabled="True")

    Thank you
  2. Answer
    Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 19 Mar 2011 Link to this post

    Hi Oksana,

    With the latest official release you can take advantage of the Telerik AnimationManager to control the RadExpander animations in WPF:
    <Style TargetType="telerik:RadExpander">
        <Setter Property="telerik:AnimationManager.AnimationSelector">
            <Setter.Value>
                <telerik:AnimationSelector>
                    <telerik:ExpanderExpandCollapseAnimation
                                    AnimationName
    ="Expand"
                 Direction="In"
                 TargetElementName="Content"
                 SpeedRatio="0.2" />
                    <telerik:ExpanderExpandCollapseAnimation
                                    AnimationName="Collapse"
                Direction="Out"
                TargetElementName="Content"
                SpeedRatio="0.2" />
                </telerik:AnimationSelector>
            </Setter.Value>
        Setter>
    </Style>
    You can control the speed of the animation through the SpeedRatio property. I attached a sample project to help you get started. Let us know if we can further assist you.

    All the best,
    Tina Stancheva
    the Telerik team
  3. UI for WPF is Visual Studio 2017 Ready
  4. Oksana
    Oksana avatar
    10 posts
    Member since:
    Feb 2008

    Posted 21 Mar 2011 Link to this post

    Thank you, Tina.
  5. John
    John avatar
    2 posts
    Member since:
    Jul 2013

    Posted 16 Nov 2015 Link to this post

    This doesn't seem to work for Right expanding expanders?  Is there a different selector to handle that scenario?

    <telerik:RadExpander
         ExpandDirection="Right"
         Header="MyHeader"
         Content="MyContent">
    </telerik:RadExpander>

     

  6. Nils
    Nils avatar
    4 posts
    Member since:
    May 2015

    Posted 10 Oct Link to this post

    I have encountered the same behavior as described by John with Q1 2016: ResizeDirection="Right" leads to the SpeedRatio of the animation being ignored. Any feedback on this?
  7. Evgenia
    Admin
    Evgenia avatar
    1406 posts

    Posted 13 Oct Link to this post

    Hi John and Nils,

    I'm currently looking on your case. I'll contact you soon with more information on it.

    Regards,
    Evgenia
    Telerik by Progress
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  8. Evgenia
    Admin
    Evgenia avatar
    1406 posts

    Posted 13 Oct Link to this post

    Hi,

    I investigated the case with Animations, (more specifically) SpeedRatio and different ExpandDirection-s. Everything is working as expected on my side. There's something important that should be mentioned here. When the ExpandDirection is set to Left or Right you should change the AnimationName so that it takes into consideration that you are animating the Width of the target and not Height as in other two cases. Now you might tweak the SpeedRatio property and you'll see that everything works as desired.
    Here's an example:

    <Window.Resources>
        <Style TargetType="telerik:RadExpander" BasedOn="{StaticResource RadExpanderStyle}" >
            <Setter Property="ExpandDirection" Value="Left" />
            <Setter Property="telerik:AnimationManager.AnimationSelector">
                <Setter.Value>
                    <telerik:AnimationSelector>
                        <telerik:ExpanderExpandCollapseAnimation AnimationName="ExpandHorizontal"
                                                                 Direction="In"
                                                                 TargetElementName="Content"
                                                                 SpeedRatio="0.2" />
                        <telerik:ExpanderExpandCollapseAnimation AnimationName="CollapseHorizontal"
                                                                 Direction="Out"
                                                                 TargetElementName="Content"
                                                                 SpeedRatio="0.2" />
                    </telerik:AnimationSelector>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <telerik:RadExpander Header="MyHeader"
                             Content="MyContent">
        </telerik:RadExpander>
    </Grid>

    We'll update our documentation accordingly to avoid further confusions.

    Regards,
    Evgenia
    Telerik by Progress
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  9. Nils
    Nils avatar
    4 posts
    Member since:
    May 2015

    Posted 14 Oct in reply to Evgenia Link to this post

    Hi Evgenia,

    that did the trick. Thanks!

    Regards
    Nils

Back to Top
UI for WPF is Visual Studio 2017 Ready