Expander Animation
The RadExpander control has an animation enabled by default.
To disable or enable the animation, set the AnimationManager.IsAnimationEnabled attached property on RadExpander.
Example 1: Disabling animation in XAML
<telerik:RadExpander telerik:AnimationManager.IsAnimationEnabled="False" />
Example 2: Disabling animation in code
AnimationManager.SetIsAnimationEnabled(this.radExpander, false);
AnimationManager.SetIsAnimationEnabled(Me.radExpander, False)
Customize Animations
To customize RadExpander animations, use the AnimationManager.AnimationSelector property. The supported animation class is ExpanderExpandCollapseAnimation which exposes few properties to customize the animation.
- Direction: An enumeration property of type AnimationDirection which specifies the direction of the animation.
- TargetElementName: A property of type string that gets or sets the name of the element that should be animated.
-
AnimationName: A property of type string that gets or sets the name of the animation. For example:
- ExpandDirection is set to Up or Down: To modify the animation the AnimationName needs to be set to Expand or Collapse.
- ExpandDirection is set to Right or Left: To modify the animation the AnimationName needs to be set to ExpandHorizontal or CollapseHorizontal.
- SpeedRatio: A property of type double that gets or sets the speed of the animation.
Example 3: Modify the animations when ExpandDirection is Up or Down
<telerik:RadExpander>
<telerik:RadExpander.Content>
<Grid>
<Grid.RowDefinitions>
<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:AnimationManager.AnimationSelector>
<telerik:AnimationSelector>
<telerik:ExpanderExpandCollapseAnimation AnimationName="Expand"
Direction="In"
SpeedRatio="0.2"
TargetElementName="Content" />
<telerik:ExpanderExpandCollapseAnimation AnimationName="Collapse"
Direction="Out"
SpeedRatio="0.2"
TargetElementName="Content" />
</telerik:AnimationSelector>
</telerik:AnimationManager.AnimationSelector>
</telerik:RadExpander>
Example 4: Modify the animations when ExpandDirection is Right or Left
<telerik:RadExpander ExpandDirection="Left">
<telerik:RadExpander.Content >
<Grid>
<Grid.RowDefinitions>
<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:AnimationManager.AnimationSelector>
<telerik:AnimationSelector>
<telerik:ExpanderExpandCollapseAnimation AnimationName="ExpandHorizontal"
Direction="In"
SpeedRatio="0.2"
TargetElementName="Content" />
<telerik:ExpanderExpandCollapseAnimation AnimationName="CollapseHorizontal"
Direction="Out"
SpeedRatio="0.2"
TargetElementName="Content" />
</telerik:AnimationSelector>
</telerik:AnimationManager.AnimationSelector>
</telerik:RadExpander>