Expander Animation

Updated over 6 months ago

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

XAML

	<telerik:RadExpander telerik:AnimationManager.IsAnimationEnabled="False" />

Example 2: Disabling animation in code

C#

	AnimationManager.SetIsAnimationEnabled(this.radExpander, false);

VB.NET

	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

XAML

	<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

XAML

	<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>

See Also

• Getting Started
• Expand Direction