defaulted as expanded?

[Stan]

Hi there

I have set IsExpanded=True to default the expander to expanded, but what I really want is to have the expander fully opened when the page is loaded, not load as collapsed, then expand itself. This is causing my app to "jerk"...

Hope that makes sense...
Thanks in advance for your help.

[Tina Stancheva]

Hello Stan,

I am not sure what you mean by "jerk". However, your issues might be caused by the Expanded visual state storyboard of the Expander control.

Can you try editing the default ControlTemplate of the control and setting the Duration of the DoubleAnimation animating the Expander arrow element to 0:

<VisualStateGroup x:Name="ExpandStateGroup">
    <VisualState x:Name="Expanded">
        <Storyboard>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Content">
                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
            </ObjectAnimationUsingKeyFrames>
            <DoubleAnimation Duration="0:0:0" To="180" Storyboard.TargetProperty="(FrameworkElement.RenderTransform).Angle" Storyboard.TargetName="arrow"/>
        </Storyboard>
    </VisualState>
    <VisualState x:Name="Collapsed">
        <Storyboard>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Content">
                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
            </ObjectAnimationUsingKeyFrames>
            <DoubleAnimation Duration="0:0:0.2" To="0" Storyboard.TargetProperty="(FrameworkElement.RenderTransform).Angle" Storyboard.TargetName="arrow"/>
        </Storyboard>
    </VisualState>
</VisualStateGroup>

Does this fix the "jerk"? If it doesn't can you please send us a screencast demonstrating the behavior on your side? Thank you in advance.

Kind regards,
Tina Stancheva
the Telerik team

[Stan]

Hi Tina

Your solution seems to minimize the "jerking" now :) Thanks for your help.

[Manoj]

I am facing the same issue. But above mentioned change did not work for me. Here is the style and template that I am using for Expander. Could you please let me know what am I missing?
I am using this in a user control.The version of Telerik controls I am using is 2011.1.419.1040. I may not be able to update them to recent version, if required.
<ControlTemplate x:Key="ExpanderTemplate" TargetType="telerik:RadExpander">

            <Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">

                <VisualStateManager.VisualStateGroups>

                    <VisualStateGroup x:Name="CommonStateGroup">

                        <VisualState x:Name="Normal"/>

                        <VisualState x:Name="Disabled">

                            <Storyboard>

                                <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetProperty="Stroke" Storyboard.TargetName="OuterCircle">

                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ControlOuterBorder_Disabled}"/>

                                </ObjectAnimationUsingKeyFrames>

                                <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetProperty="Stroke" Storyboard.TargetName="InnerCircle">

                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ControlInnerBorder_Disabled}"/>

                                </ObjectAnimationUsingKeyFrames>

                                <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetProperty="Fill" Storyboard.TargetName="OuterCircle">

                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ControlBackground_Disabled}"/>

                                </ObjectAnimationUsingKeyFrames>

                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Fill" Storyboard.TargetName="arrow">

                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ControlElement_Disabled}"/>

                                </ObjectAnimationUsingKeyFrames>

                                <DoubleAnimation To=".5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Content"/>

                                <DoubleAnimation To=".5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HeaderContent"/>

                            </Storyboard>

                        </VisualState>

                    </VisualStateGroup>

                    <VisualStateGroup x:Name="HeaderStateGroup">

                        <VisualState x:Name="NormalHeader"/>

                        <VisualState x:Name="MouseOverHeader">

                            <Storyboard>

                                <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetProperty="Stroke" Storyboard.TargetName="OuterCircle">

                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ControlOuterBorder_MouseOver}"/>

                                </ObjectAnimationUsingKeyFrames>

                                <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetProperty="Stroke" Storyboard.TargetName="InnerCircle">

                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ControlInnerBorder_MouseOver}"/>

                                </ObjectAnimationUsingKeyFrames>

                                <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetProperty="Fill" Storyboard.TargetName="OuterCircle">

                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ControlBackground_MouseOver}"/>

                                </ObjectAnimationUsingKeyFrames>

                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Fill" Storyboard.TargetName="arrow">

                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ControlElement_MouseOver}"/>

                                </ObjectAnimationUsingKeyFrames>

                            </Storyboard>

                        </VisualState>

                        <VisualState x:Name="PressedHeader">

                            <Storyboard>

                                <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetProperty="Stroke" Storyboard.TargetName="OuterCircle">

                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ControlOuterBorder_Pressed}"/>

                                </ObjectAnimationUsingKeyFrames>

                                <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetProperty="Stroke" Storyboard.TargetName="InnerCircle">

                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ControlInnerBorder_Pressed}"/>

                                </ObjectAnimationUsingKeyFrames>

                                <ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetProperty="Fill" Storyboard.TargetName="OuterCircle">

                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ControlBackground_Pressed}"/>

                                </ObjectAnimationUsingKeyFrames>

                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Fill" Storyboard.TargetName="arrow">

                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ControlElement_Pressed}"/>

                                </ObjectAnimationUsingKeyFrames>

                            </Storyboard>

                        </VisualState>

                    </VisualStateGroup>

                    <VisualStateGroup x:Name="HeaderOrientationGroup">

                        <VisualState x:Name="HorizontalOrientation">

                            <Storyboard>

                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="LayoutTransform" Storyboard.TargetName="HeaderContentTransform">

                                    <DiscreteObjectKeyFrame KeyTime="0">

                                        <DiscreteObjectKeyFrame.Value>

                                            <RotateTransform Angle="0"/>

                                        </DiscreteObjectKeyFrame.Value>

                                    </DiscreteObjectKeyFrame>

                                </ObjectAnimationUsingKeyFrames>

                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Column)" Storyboard.TargetName="HeaderContentTransform">

                                    <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>

                                </ObjectAnimationUsingKeyFrames>

                            </Storyboard>

                        </VisualState>

                        <VisualState x:Name="VerticalOrientation">

                            <Storyboard>

                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="LayoutTransform" Storyboard.TargetName="HeaderContentTransform">

                                    <DiscreteObjectKeyFrame KeyTime="0">

                                        <DiscreteObjectKeyFrame.Value>

                                            <RotateTransform Angle="90"/>

                                        </DiscreteObjectKeyFrame.Value>

                                    </DiscreteObjectKeyFrame>

                                </ObjectAnimationUsingKeyFrames>

                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Row)" Storyboard.TargetName="HeaderContentTransform">

                                    <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>

                                </ObjectAnimationUsingKeyFrames>

                            </Storyboard>

                        </VisualState>

                    </VisualStateGroup>

                    <VisualStateGroup x:Name="ExpandStateGroup">

                        <VisualState x:Name="Expanded">

                            <!--<Storyboard>

                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Content">

                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>

                                </ObjectAnimationUsingKeyFrames>

                                <DoubleAnimation Duration="0:0:0.0" To="180" Storyboard.TargetProperty="(FrameworkElement.RenderTransform).Angle" Storyboard.TargetName="arrow"/>

                            </Storyboard>-->

                        </VisualState>

                        <VisualState x:Name="Collapsed">

                            <Storyboard>

                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Content">

                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>

                                </ObjectAnimationUsingKeyFrames>

                                <DoubleAnimation Duration="0:0:0.2" To="0" Storyboard.TargetProperty="(FrameworkElement.RenderTransform).Angle" Storyboard.TargetName="arrow"/>

                            </Storyboard>

                        </VisualState>

                    </VisualStateGroup>

                    <VisualStateGroup x:Name="ExpandDirectionStates">

                        <VisualStateGroup.Transitions>

                            <VisualTransition>

                                <Storyboard>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Row)" Storyboard.TargetName="Content">

                                        <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>

                                    </ObjectAnimationUsingKeyFrames>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Column)" Storyboard.TargetName="Content">

                                        <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>

                                    </ObjectAnimationUsingKeyFrames>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.RowSpan)" Storyboard.TargetName="Content">

                                        <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>

                                    </ObjectAnimationUsingKeyFrames>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.ColumnSpan)" Storyboard.TargetName="Content">

                                        <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>

                                    </ObjectAnimationUsingKeyFrames>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Row)" Storyboard.TargetName="HeaderButton">

                                        <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>

                                    </ObjectAnimationUsingKeyFrames>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Column)" Storyboard.TargetName="HeaderButton">

                                        <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>

                                    </ObjectAnimationUsingKeyFrames>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.RowSpan)" Storyboard.TargetName="HeaderButton">

                                        <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>

                                    </ObjectAnimationUsingKeyFrames>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.ColumnSpan)" Storyboard.TargetName="HeaderButton">

                                        <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>

                                    </ObjectAnimationUsingKeyFrames>

                                </Storyboard>

                            </VisualTransition>

                        </VisualStateGroup.Transitions>

                        <VisualState x:Name="DirectionDown">

                            <Storyboard>

                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Row)" Storyboard.TargetName="Content">

                                    <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>

                                </ObjectAnimationUsingKeyFrames>

                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.ColumnSpan)" Storyboard.TargetName="Content">

                                    <DiscreteObjectKeyFrame KeyTime="0" Value="2"/>

                                </ObjectAnimationUsingKeyFrames>

                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.ColumnSpan)" Storyboard.TargetName="HeaderButton">

                                    <DiscreteObjectKeyFrame KeyTime="0" Value="2"/>

                                </ObjectAnimationUsingKeyFrames>

                            </Storyboard>

                        </VisualState>

                        <VisualState x:Name="DirectionUp">

                            <Storyboard>

                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Row)" Storyboard.TargetName="HeaderButton">

                                    <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>

                                </ObjectAnimationUsingKeyFrames>

                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.ColumnSpan)" Storyboard.TargetName="Content">

                                    <DiscreteObjectKeyFrame KeyTime="0" Value="2"/>

                                </ObjectAnimationUsingKeyFrames>

                                <DoubleAnimation Duration="0:0:0" To="180" Storyboard.TargetProperty="(FrameworkElement.RenderTransform).Angle" Storyboard.TargetName="arrowPanel"/>

                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.ColumnSpan)" Storyboard.TargetName="HeaderButton">

                                    <DiscreteObjectKeyFrame KeyTime="0" Value="2"/>

                                </ObjectAnimationUsingKeyFrames>

                            </Storyboard>

                        </VisualState>

                        <VisualState x:Name="DirectionLeft">

                            <Storyboard>

                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Column)" Storyboard.TargetName="HeaderButton">

                                    <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>

                                </ObjectAnimationUsingKeyFrames>

                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.RowSpan)" Storyboard.TargetName="Content">

                                    <DiscreteObjectKeyFrame KeyTime="0" Value="2"/>

                                </ObjectAnimationUsingKeyFrames>

                                <DoubleAnimation Duration="0:0:0" To="90" Storyboard.TargetProperty="(FrameworkElement.RenderTransform).Angle" Storyboard.TargetName="arrowPanel"/>

                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.RowSpan)" Storyboard.TargetName="HeaderButton">

                                    <DiscreteObjectKeyFrame KeyTime="0" Value="2"/>

                                </ObjectAnimationUsingKeyFrames>

                            </Storyboard>

                        </VisualState>

                        <VisualState x:Name="DirectionRight">

                            <Storyboard>

                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Column)" Storyboard.TargetName="Content">

                                    <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>

                                </ObjectAnimationUsingKeyFrames>

                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.RowSpan)" Storyboard.TargetName="Content">

                                    <DiscreteObjectKeyFrame KeyTime="0" Value="2"/>

                                </ObjectAnimationUsingKeyFrames>

                                <DoubleAnimation Duration="0:0:0" To="-90" Storyboard.TargetProperty="(FrameworkElement.RenderTransform).Angle" Storyboard.TargetName="arrowPanel"/>

                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.RowSpan)" Storyboard.TargetName="HeaderButton">

                                    <DiscreteObjectKeyFrame KeyTime="0" Value="2"/>

                                </ObjectAnimationUsingKeyFrames>

                            </Storyboard>

                        </VisualState>

                    </VisualStateGroup>

                </VisualStateManager.VisualStateGroups>

                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">

                    <Grid>

                        <Grid.ColumnDefinitions>

                            <ColumnDefinition Width="Auto"/>

                            <ColumnDefinition Width="*"/>

                        </Grid.ColumnDefinitions>

                        <Grid.RowDefinitions>

                            <RowDefinition Height="Auto"/>

                            <RowDefinition Height="*"/>

                        </Grid.RowDefinitions>

                        <telerik:RadToggleButton x:Name="HeaderButton" Background="Transparent" ClickMode="{TemplateBinding ClickMode}" FontWeight="{TemplateBinding FontWeight}" FontStyle="{TemplateBinding FontStyle}" FontStretch="{TemplateBinding FontStretch}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Template="{StaticResource ToggleTemplate}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">

                            <Grid x:Name="HeaderPanel">

                                <Grid.ColumnDefinitions>

                                    <ColumnDefinition Width="Auto"/>

                                    <ColumnDefinition Width="*"/>

                                </Grid.ColumnDefinitions>

                                <Grid.RowDefinitions>

                                    <RowDefinition Height="Auto"/>

                                    <RowDefinition Height="*"/>

                                </Grid.RowDefinitions>

                                <Grid Grid.Column="0" Grid.Row="0">

                                    <Ellipse x:Name="OuterCircle" Fill="{StaticResource ControlBackground_Normal}" HorizontalAlignment="Center" Height="20" Stroke="{StaticResource ControlOuterBorder_Normal}" VerticalAlignment="Center" Width="20"/>

                                    <Ellipse x:Name="InnerCircle" HorizontalAlignment="Center" Height="18" Stroke="{StaticResource ControlInnerBorder_Normal}" VerticalAlignment="Center" Width="18"/>

                                    <Grid x:Name="arrowPanel" RenderTransformOrigin=".5 .5">

                                        <Grid.RenderTransform>

                                            <RotateTransform/>

                                        </Grid.RenderTransform>

                                        <Path x:Name="arrow" Data="M0,0 L0.67,0 4,2.67 7.25,0 8,0 8,0.67 4,4 0,0.75 z" Fill="{StaticResource ControlElement_Normal}" Height="4" RenderTransformOrigin="0.5,0.5" Stretch="None" Width="8">

                                            <Path.RenderTransform>

                                                <RotateTransform Angle="0"/>

                                            </Path.RenderTransform>

                                        </Path>

                                    </Grid>

                                </Grid>

                                <telerik:LayoutTransformControl x:Name="HeaderContentTransform" Grid.Column="0" Grid.Row="0" RenderTransformOrigin=".5 .5">

                                    <ContentPresenter x:Name="HeaderContent" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="1" HorizontalAlignment="Stretch" Margin="5 0" VerticalAlignment="Center"/>

                                </telerik:LayoutTransformControl>

                            </Grid>

                        </telerik:RadToggleButton>

                        <ContentPresenter x:Name="Content" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

                    </Grid>

                </Border>

            </Grid>

        </ControlTemplate>

        <Style x:Key="RadExpanderStyleSL_FIX" TargetType="telerik:RadExpander">           

            <Setter Property="IsExpanded" Value="True"/>

            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>

            <Setter Property="VerticalContentAlignment" Value="Stretch"/>

            <Setter Property="Background" Value="{StaticResource LightTopDarkBottomGradientBrush}"/>

            <Setter Property="BorderBrush" Value="{StaticResource Expander_BorderBrush}"/>

            <Setter Property="BorderThickness" Value="{StaticResource Expander_BorderThickness}"/>

            <Setter Property="Padding" Value="2"/>

            <Setter Property="Template" Value="{StaticResource ExpanderTemplate}"/>

            <!--<Setter Property="telerik:AnimationManager.AnimationSelector">

                <Setter.Value>

                    <telerik:AnimationSelector>

                        <telerik:ExpanderExpandCollapseAnimation AnimationName="Expand" Direction="In" TargetElementName="Content"/>

                        <telerik:ExpanderExpandCollapseAnimation AnimationName="Collapse" Direction="Out" TargetElementName="Content"/>

                    </telerik:AnimationSelector>

                </Setter.Value>

            </Setter>-->

        </Style>

 <Grid x:Name="LayoutRoot" Background="White">

 <RadxExpander x:Name="Expander"  Style="{StaticResource RadExpanderStyleSL_FIX}" Visibility="{Binding IsControlVisible, Converter={StaticResource BooleanToControlVisibilityConverter}}" Width="{Binding Width}">

<!-- some content  controls-->

</RadExpander>

 </Grid>

[Kiril Stanoev]

Hello Manoj,

You need to disable the animations while the XAML is loading and turn the animations back on whenever you need them.

public MainPage()
{
    InitializeComponent();
    AnimationManager.IsGlobalAnimationEnabled = false;
}

Please take a look at the attached project for further reference.
Please note that the above workaround is not required with the latest binaries so I'd strongly recommend you try and upgrade if possible.

Kind regards,
Kiril Stanoev
the Telerik team

[Manoj]

Thanks Kiril for your response. I will give it a try.