Expander jumps to expanded state and then starts the animation

4 posts, 0 answers
  1. Hernu
    Hernu avatar
    4 posts
    Member since:
    Nov 2013

    Posted 07 Mar Link to this post

    I ran into a small issue while using the expander control in a window without a border. The issue is that when the expand button is clicked the control seems to jump to the expanded state, then jump back to the collapsed state and then play the expand animation. This only occurs with the following window properties:

    • "WindowStyle="None""
    • "AllowsTransparency="True""

    My question is this; has anyone come across this and found a good way around? We could probably create another animation and/or control, but it would be great if we can stay as close to the stock standard Telerik controls as possible.

    Thanks in advance.

    The code below is from the example here but with a removed window border

    <Window x:Class="ExpanderSample.MainWindow"
            <Style TargetType="telerik:RadExpander">
                <Setter Property="telerik:AnimationManager.AnimationSelector">
                                SpeedRatio="0.3" />
                                SpeedRatio="0.3" />
                <RowDefinition Height="150"/>
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="20" />
                HorizontalAlignment="Stretch" >
                <telerik:RadExpander.Content >
                    <Grid Name="ContentGrid" Height="Auto">
                            <RowDefinition Height="20"/>
                            <RowDefinition Height="20" />
                            <RowDefinition Height="20" />
                            <RowDefinition Height="20" />
                        <TextBox  Grid.Row="0" >my content</TextBox>
                        <TextBox  Grid.Row="1" >my content</TextBox>
                        <TextBox  Grid.Row="2" >my content</TextBox>

  2. Hernu
    Hernu avatar
    4 posts
    Member since:
    Nov 2013

    Posted 07 Mar in reply to Hernu Link to this post

    Should also mention that this also just occurs with the window property "SizeToContent="WidthAndHeight".
  3. DevCraft R3 2016 release webinar banner
  4. Martin
    Martin avatar
    1042 posts

    Posted 09 Mar Link to this post

    Hi Hernu,

    I was able to reproduce the described behavior but only from time to time. It is observed because of the SizeToContent mechanism of the window element and the animation implementation of RadExpander. Basically, when the expander content is collapsed/expanded its visibility is changed, just before the animation start. In some cases there is a little bit longer delay between the visibility change and the animation start. In this time gap the expander content is measured with its original size and the SizeToContent functionality kicks in and resizes the window. At the next moment the animation starts and the content is measured again but this time with the animation start height which is 0. This is why the flicker is observed. After this the animation runs normally.

    To resolve this you can avoid using the WidthAndHeight value of the SizeToContent property. Or you can disable the RadExpander's default animation and implement custom one using Storyboard.

    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  5. Hernu
    Hernu avatar
    4 posts
    Member since:
    Nov 2013

    Posted 09 Mar in reply to Martin Link to this post

    Hi Martin,

    Thanks for having a look at it. We will then disable the default animation for now and create a normal animation.


Back to Top