Expander jumps to expanded state and then starts the animation

[Hernu]

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"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        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>

[Hernu]

Should also mention that this also just occurs with the window property "SizeToContent="WidthAndHeight".

[Martin Ivanov]

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

[Hernu]

Hi Martin,

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

Hernu

[Rob A.]

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

Cheers, Rob.

[Rob A.]

Oops, sorry found it: telerik:AnimationManager.IsAnimationEnabled="False"

[Rob A.]

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.

 

 

[Martin Ivanov]

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

[Rob A.]

Hi Martin,

Hadn't crossed my mind, that solved it! 

Many thanks!

Cheers, Rob.