This is a migrated thread and some comments may be shown as answers.

Expander jumps to expanded state and then starts the animation

8 Answers 441 Views
Expander
This is a migrated thread and some comments may be shown as answers.
Hernu
Top achievements
Rank 1
Hernu asked on 07 Mar 2016, 06:24 AM

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"
        Title="MainWindow" 
        WindowStyle="None"            
        AllowsTransparency="True"
        SizeToContent="WidthAndHeight"   
        Height="350"
        Width="525">
    <Window.Resources>
        <Style TargetType="telerik:RadExpander">
            <Setter Property="telerik:AnimationManager.AnimationSelector">
                <Setter.Value>
                    <telerik:AnimationSelector>
                        <telerik:ExpanderExpandCollapseAnimation
                            AnimationName="Expand"
                            Direction="In"
                            TargetElementName="Content"
                            SpeedRatio="0.3" />
                        <telerik:ExpanderExpandCollapseAnimation
                            AnimationName="Collapse"
                            Direction="Out"
                            TargetElementName="Content"
                            SpeedRatio="0.3" />
                    </telerik:AnimationSelector>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="150"/>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="20" />
        </Grid.RowDefinitions>
        <telerik:RadExpander
            Header="MyHeader"                             
            Grid.Row="1"
            IsExpanded="False"    
            VerticalContentAlignment="Top"
            HorizontalContentAlignment="Stretch"
            HorizontalAlignment="Stretch" >
            <telerik:RadExpander.Content >
                <Grid Name="ContentGrid" Height="Auto">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="20"/>
                        <RowDefinition Height="20" />
                        <RowDefinition Height="20" />
                        <RowDefinition Height="20" />
                    </Grid.RowDefinitions>
                    <TextBox  Grid.Row="0" >my content</TextBox>
                    <TextBox  Grid.Row="1" >my content</TextBox>
                    <TextBox  Grid.Row="2" >my content</TextBox>
                </Grid>
            </telerik:RadExpander.Content>
        </telerik:RadExpander>
    </Grid>
</Window>

8 Answers, 1 is accepted

Sort by
0
Hernu
Top achievements
Rank 1
answered on 07 Mar 2016, 06:41 AM
Should also mention that this also just occurs with the window property "SizeToContent="WidthAndHeight".
0
Martin Ivanov
Telerik team
answered on 09 Mar 2016, 03:46 PM
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.

Regards,
Martin
Telerik
Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
0
Hernu
Top achievements
Rank 1
answered on 10 Mar 2016, 05:46 AM

Hi Martin,

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

Hernu

0
Rob A.
Top achievements
Rank 2
Iron
Iron
Veteran
answered on 24 Nov 2020, 11:15 PM

I have this exact same issue ... I don't see any property on the RadExpander to disable the animation?

Cheers, Rob.

0
Rob A.
Top achievements
Rank 2
Iron
Iron
Veteran
answered on 24 Nov 2020, 11:28 PM
Oops, sorry found it: telerik:AnimationManager.IsAnimationEnabled="False"
0
Rob A.
Top achievements
Rank 2
Iron
Iron
Veteran
answered on 01 Feb 2021, 12:00 AM

Bringing this back to life, when I use this:

<telerik:RadExpander x:Name="expAdvancedOptions" Grid.Row="5" Grid.Column="1" Grid.ColumnSpan="4" Grid.RowSpan="2" IsExpanded="False" telerik:AnimationManager.IsAnimationEnabled="False">

 

It will disable ALL animations within the RadExpander ... so for example if I use RadCallouts, they will not animate.  Is there an "EASY" way around this problem so that the ONLY animated affected is that of the RadExpander.

Ahh the pitfalls of inheritance.

Cheers, Rob.

 

 

0
Martin Ivanov
Telerik team
answered on 03 Feb 2021, 11:24 AM

Hello Rob,

To achieve your requirement (where you disable the parent animation, but keep the children animations), you can enable the animations for the child elements explicitly.

<telerik:RadExpander telerik:AnimationManager.IsAnimationEnabled="False">
	<Grid x:Name="parentElementThatHostsOtherTelerikControls" 
	          telerik:AnimationManager.IsAnimationEnabled="True">	
		<!-- other Telerik controls that support animations here -->
	</Grid>
</telerik:RadExpander>

I hope that helps.

Regards,
Martin Ivanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Rob A.
Top achievements
Rank 2
Iron
Iron
Veteran
answered on 03 Feb 2021, 06:51 PM

Hi Martin,

Hadn't crossed my mind, that solved it! 

Many thanks!

Cheers, Rob.

Tags
Expander
Asked by
Hernu
Top achievements
Rank 1
Answers by
Hernu
Top achievements
Rank 1
Martin Ivanov
Telerik team
Rob A.
Top achievements
Rank 2
Iron
Iron
Veteran
Share this question
or