Hello
How can I change animation-duration of LayoutControlExpanderGroup?
I know, how I can activate the animation, but I don't know, how I can change the duration of the animation when the expander is expanded or collapsed.
I used the AnimationSelector, but this affects no changes to the duration.
<Style TargetType="telerik:LayoutControlExpanderGroup">
<Setter Property="telerik:AnimationManager.IsAnimationEnabled" Value="True">
</Setter>
<Setter Property="telerik:AnimationManager.AnimationSelector">
<Setter.Value>
<telerik:AnimationSelector>
<telerik:ExpanderExpandCollapseAnimation
AnimationName="Expand"
Direction="In"
TargetElementName="Content"
SpeedRatio="0.2" />
<telerik:ExpanderExpandCollapseAnimation
AnimationName="Collapse"
Direction="Out"
TargetElementName="Content"
SpeedRatio="0.2" />
</telerik:AnimationSelector>
</Setter.Value>
</Setter>
</Style>
Sincerly
Alex
5 Answers, 1 is accepted
LayoutControlExpandedGroup utilizes the RadExpander component within its template for the expand/collapse operation. So, you can manipulate the duration of the animation by defining a Style targeting RadExpander. More information on this matter can be found in the Expander Animation help article. So, you can use the following two steps to achieve the desired customization.
1. Define the Style targeting RadExpander.
<
Style
x:Key
=
"TransitionedExpanderStyle"
TargetType
=
"telerik:RadExpander"
BasedOn
=
"{StaticResource RadExpanderStyle}"
>
<
Setter
Property
=
"telerik:AnimationManager.IsAnimationEnabled"
Value
=
"False"
/>
<
Setter
Property
=
"Template"
>
<
Setter.Value
>
<
ControlTemplate
TargetType
=
"telerik:RadExpander"
>
<
Grid
HorizontalAlignment
=
"{TemplateBinding HorizontalAlignment}"
VerticalAlignment
=
"{TemplateBinding VerticalAlignment}"
>
<
VisualStateManager.VisualStateGroups
>
<
VisualStateGroup
x:Name
=
"ExpandStateGroup"
>
<
VisualStateGroup.Transitions
>
<
VisualTransition
GeneratedDuration
=
"0"
To
=
"Expanded"
>
<
VisualTransition.GeneratedEasingFunction
>
<
BounceEase
Bounces
=
"2"
/>
</
VisualTransition.GeneratedEasingFunction
>
<
Storyboard
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetName
=
"Content"
Storyboard.TargetProperty
=
"Visibility"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
Value
=
"{x:Static Visibility.Visible}"
/>
</
ObjectAnimationUsingKeyFrames
>
<
DoubleAnimation
Storyboard.TargetProperty
=
"Opacity"
Storyboard.TargetName
=
"Content"
To
=
"1"
Duration
=
"0:0:1"
/>
</
Storyboard
>
</
VisualTransition
>
<
VisualTransition
GeneratedDuration
=
"0"
To
=
"Collapsed"
>
<
VisualTransition.GeneratedEasingFunction
>
<
BackEase
EasingMode
=
"EaseIn"
/>
</
VisualTransition.GeneratedEasingFunction
>
<
Storyboard
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetName
=
"Content"
Storyboard.TargetProperty
=
"Visibility"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0:0:0.3"
Value
=
"{x:Static Visibility.Collapsed}"
/>
</
ObjectAnimationUsingKeyFrames
>
<
DoubleAnimation
Storyboard.TargetProperty
=
"Opacity"
Storyboard.TargetName
=
"Content"
To
=
"0"
Duration
=
"0:0:1"
/>
</
Storyboard
>
</
VisualTransition
>
</
VisualStateGroup.Transitions
>
<
VisualState
x:Name
=
"Expanded"
>
<
Storyboard
>
<
DoubleAnimation
Storyboard.TargetProperty
=
"Opacity"
Storyboard.TargetName
=
"Content"
To
=
"1"
Duration
=
"0"
/>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetName
=
"Content"
Storyboard.TargetProperty
=
"Visibility"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
Value
=
"{x:Static Visibility.Visible}"
/>
</
ObjectAnimationUsingKeyFrames
>
</
Storyboard
>
</
VisualState
>
<
VisualState
x:Name
=
"Collapsed"
>
<
Storyboard
>
<
DoubleAnimation
Storyboard.TargetProperty
=
"Opacity"
Storyboard.TargetName
=
"Content"
To
=
"0"
Duration
=
"0"
/>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetName
=
"Content"
Storyboard.TargetProperty
=
"Visibility"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
Value
=
"{x:Static Visibility.Hidden}"
/>
</
ObjectAnimationUsingKeyFrames
>
</
Storyboard
>
</
VisualState
>
</
VisualStateGroup
>
</
VisualStateManager.VisualStateGroups
>
...
2. Apply the Style by modifying the template of LayoutControlExpanderGroup
<
Style
TargetType
=
"telerik:LayoutControlExpanderGroup"
BasedOn
=
"{StaticResource LayoutControlExpanderGroupStyle}"
>
<
Setter
Property
=
"Template"
>
<
Setter.Value
>
<
ControlTemplate
TargetType
=
"telerik:LayoutControlExpanderGroup"
>
<
telerik:RadExpander
Style
=
"{StaticResource TransitionedExpanderStyle}"
Header
=
"{TemplateBinding Header}"
Padding
=
"{TemplateBinding Padding}"
BorderBrush
=
"{TemplateBinding BorderBrush}"
BorderThickness
=
"{TemplateBinding BorderThickness}"
IsExpanded
=
"{Binding IsExpanded, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
HeaderButtonStyle
=
"{StaticResource LayoutControlExpanderHeaderButtonStyle}"
>
<
ScrollViewer
BorderThickness
=
"0"
Background
=
"Transparent"
HorizontalScrollBarVisibility
=
"{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
VerticalScrollBarVisibility
=
"{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
>
<
ItemsPresenter
/>
</
ScrollViewer
>
</
telerik:RadExpander
>
</
ControlTemplate
>
</
Setter.Value
>
</
Setter
>
</
Style
>
Can you please give the suggestion a try?
I hope this helps, Alex.
Regards,
Stefan
Progress Telerik
Hello
Thank you for your answer.
Before I try the code sample you suggested I would like to have the complete definition of the ControlTemplate in the RadExpander-Style.
Can you either provide me with the complete code or tell me, where I can find this code?
Is this correct then, that I only change the VisualStateGroups-Block in this ControlTemplate for my case? Or are there further changes necessary?
Thanks
Alex
Below you can find the default template of RadExpander for the Office_Black theme.
<
ControlTemplate
TargetType
=
"telerik1:RadExpander"
x:Key
=
"ExpanderTemplate"
>
<
Grid
HorizontalAlignment
=
"{TemplateBinding HorizontalAlignment}"
VerticalAlignment
=
"{TemplateBinding VerticalAlignment}"
>
<
VisualStateManager.VisualStateGroups
>
<
VisualStateGroup
x:Name
=
"CommonStateGroup"
>
<
VisualState
x:Name
=
"Normal"
/>
<
VisualState
x:Name
=
"Disabled"
/>
</
VisualStateGroup
>
<
VisualStateGroup
x:Name
=
"HeaderStateGroup"
>
<
VisualState
x:Name
=
"NormalHeader"
/>
<
VisualState
x:Name
=
"MouseOverHeader"
/>
<
VisualState
x:Name
=
"PressedHeader"
/>
</
VisualStateGroup
>
<
VisualStateGroup
x:Name
=
"HeaderOrientationGroup"
>
<
VisualState
x:Name
=
"HorizontalOrientation"
>
<
Storyboard
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetName
=
"HeaderContentTransform"
Storyboard.TargetProperty
=
"LayoutTransform"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
>
<
DiscreteObjectKeyFrame.Value
>
<
RotateTransform
Angle
=
"0"
/>
</
DiscreteObjectKeyFrame.Value
>
</
DiscreteObjectKeyFrame
>
</
ObjectAnimationUsingKeyFrames
>
</
Storyboard
>
</
VisualState
>
<
VisualState
x:Name
=
"VerticalOrientation"
>
<
Storyboard
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetName
=
"HeaderContentTransform"
Storyboard.TargetProperty
=
"LayoutTransform"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
>
<
DiscreteObjectKeyFrame.Value
>
<
RotateTransform
Angle
=
"90"
/>
</
DiscreteObjectKeyFrame.Value
>
</
DiscreteObjectKeyFrame
>
</
ObjectAnimationUsingKeyFrames
>
</
Storyboard
>
</
VisualState
>
</
VisualStateGroup
>
<
VisualStateGroup
x:Name
=
"ExpandStateGroup"
>
<
VisualState
x:Name
=
"Expanded"
/>
<
VisualState
x:Name
=
"Collapsed"
/>
</
VisualStateGroup
>
<
VisualStateGroup
x:Name
=
"ExpandDirectionStates"
>
<
VisualStateGroup.Transitions
>
<
VisualTransition
>
<
Storyboard
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetName
=
"Content"
Storyboard.TargetProperty
=
"(Grid.Row)"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
>
<
DiscreteObjectKeyFrame.Value
>
<
sys:Int32
>0</
sys:Int32
>
</
DiscreteObjectKeyFrame.Value
>
</
DiscreteObjectKeyFrame
>
</
ObjectAnimationUsingKeyFrames
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetName
=
"Content"
Storyboard.TargetProperty
=
"(Grid.Column)"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
>
<
DiscreteObjectKeyFrame.Value
>
<
sys:Int32
>0</
sys:Int32
>
</
DiscreteObjectKeyFrame.Value
>
</
DiscreteObjectKeyFrame
>
</
ObjectAnimationUsingKeyFrames
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetName
=
"HeaderContentTransform"
Storyboard.TargetProperty
=
"(Grid.Row)"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
>
<
DiscreteObjectKeyFrame.Value
>
<
sys:Int32
>0</
sys:Int32
>
</
DiscreteObjectKeyFrame.Value
>
</
DiscreteObjectKeyFrame
>
</
ObjectAnimationUsingKeyFrames
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetName
=
"HeaderContentTransform"
Storyboard.TargetProperty
=
"(Grid.Column)"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
>
<
DiscreteObjectKeyFrame.Value
>
<
sys:Int32
>0</
sys:Int32
>
</
DiscreteObjectKeyFrame.Value
>
</
DiscreteObjectKeyFrame
>
</
ObjectAnimationUsingKeyFrames
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetName
=
"col0"
Storyboard.TargetProperty
=
"Width"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
>
<
DiscreteObjectKeyFrame.Value
>
<
GridLength
>Auto</
GridLength
>
</
DiscreteObjectKeyFrame.Value
>
</
DiscreteObjectKeyFrame
>
</
ObjectAnimationUsingKeyFrames
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetName
=
"col1"
Storyboard.TargetProperty
=
"Width"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
>
<
DiscreteObjectKeyFrame.Value
>
<
GridLength
>Auto</
GridLength
>
</
DiscreteObjectKeyFrame.Value
>
</
DiscreteObjectKeyFrame
>
</
ObjectAnimationUsingKeyFrames
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetName
=
"row0"
Storyboard.TargetProperty
=
"Height"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
>
<
DiscreteObjectKeyFrame.Value
>
<
GridLength
>Auto</
GridLength
>
</
DiscreteObjectKeyFrame.Value
>
</
DiscreteObjectKeyFrame
>
</
ObjectAnimationUsingKeyFrames
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetName
=
"row1"
Storyboard.TargetProperty
=
"Height"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
>
<
DiscreteObjectKeyFrame.Value
>
<
GridLength
>Auto</
GridLength
>
</
DiscreteObjectKeyFrame.Value
>
</
DiscreteObjectKeyFrame
>
</
ObjectAnimationUsingKeyFrames
>
</
Storyboard
>
</
VisualTransition
>
</
VisualStateGroup.Transitions
>
<
VisualState
x:Name
=
"DirectionLeft"
>
<
Storyboard
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetName
=
"col0"
Storyboard.TargetProperty
=
"Width"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
>
<
DiscreteObjectKeyFrame.Value
>
<
GridLength
>*</
GridLength
>
</
DiscreteObjectKeyFrame.Value
>
</
DiscreteObjectKeyFrame
>
</
ObjectAnimationUsingKeyFrames
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetName
=
"row0"
Storyboard.TargetProperty
=
"Height"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
>
<
DiscreteObjectKeyFrame.Value
>
<
GridLength
>*</
GridLength
>
</
DiscreteObjectKeyFrame.Value
>
</
DiscreteObjectKeyFrame
>
</
ObjectAnimationUsingKeyFrames
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetName
=
"HeaderContentTransform"
Storyboard.TargetProperty
=
"(Grid.Column)"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
>
<
DiscreteObjectKeyFrame.Value
>
<
sys:Int32
>1</
sys:Int32
>
</
DiscreteObjectKeyFrame.Value
>
</
DiscreteObjectKeyFrame
>
</
ObjectAnimationUsingKeyFrames
>
</
Storyboard
>
</
VisualState
>
<
VisualState
x:Name
=
"DirectionRight"
>
<
Storyboard
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetName
=
"col1"
Storyboard.TargetProperty
=
"Width"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
>
<
DiscreteObjectKeyFrame.Value
>
<
GridLength
>*</
GridLength
>
</
DiscreteObjectKeyFrame.Value
>
</
DiscreteObjectKeyFrame
>
</
ObjectAnimationUsingKeyFrames
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetName
=
"row0"
Storyboard.TargetProperty
=
"Height"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
>
<
DiscreteObjectKeyFrame.Value
>
<
GridLength
>*</
GridLength
>
</
DiscreteObjectKeyFrame.Value
>
</
DiscreteObjectKeyFrame
>
</
ObjectAnimationUsingKeyFrames
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetName
=
"Content"
Storyboard.TargetProperty
=
"(Grid.Column)"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
>
<
DiscreteObjectKeyFrame.Value
>
<
sys:Int32
>1</
sys:Int32
>
</
DiscreteObjectKeyFrame.Value
>
</
DiscreteObjectKeyFrame
>
</
ObjectAnimationUsingKeyFrames
>
</
Storyboard
>
</
VisualState
>
<
VisualState
x:Name
=
"DirectionUp"
>
<
Storyboard
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetName
=
"col0"
Storyboard.TargetProperty
=
"Width"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
>
<
DiscreteObjectKeyFrame.Value
>
<
GridLength
>*</
GridLength
>
</
DiscreteObjectKeyFrame.Value
>
</
DiscreteObjectKeyFrame
>
</
ObjectAnimationUsingKeyFrames
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetName
=
"row0"
Storyboard.TargetProperty
=
"Height"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
>
<
DiscreteObjectKeyFrame.Value
>
<
GridLength
>*</
GridLength
>
</
DiscreteObjectKeyFrame.Value
>
</
DiscreteObjectKeyFrame
>
</
ObjectAnimationUsingKeyFrames
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetName
=
"HeaderContentTransform"
Storyboard.TargetProperty
=
"(Grid.Row)"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
>
<
DiscreteObjectKeyFrame.Value
>
<
sys:Int32
>1</
sys:Int32
>
</
DiscreteObjectKeyFrame.Value
>
</
DiscreteObjectKeyFrame
>
</
ObjectAnimationUsingKeyFrames
>
</
Storyboard
>
</
VisualState
>
<
VisualState
x:Name
=
"DirectionDown"
>
<
Storyboard
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetName
=
"col0"
Storyboard.TargetProperty
=
"Width"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
>
<
DiscreteObjectKeyFrame.Value
>
<
GridLength
>*</
GridLength
>
</
DiscreteObjectKeyFrame.Value
>
</
DiscreteObjectKeyFrame
>
</
ObjectAnimationUsingKeyFrames
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetName
=
"row1"
Storyboard.TargetProperty
=
"Height"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
>
<
DiscreteObjectKeyFrame.Value
>
<
GridLength
>*</
GridLength
>
</
DiscreteObjectKeyFrame.Value
>
</
DiscreteObjectKeyFrame
>
</
ObjectAnimationUsingKeyFrames
>
<
ObjectAnimationUsingKeyFrames
Storyboard.TargetName
=
"Content"
Storyboard.TargetProperty
=
"(Grid.Row)"
>
<
DiscreteObjectKeyFrame
KeyTime
=
"0"
>
<
DiscreteObjectKeyFrame.Value
>
<
sys:Int32
>1</
sys:Int32
>
</
DiscreteObjectKeyFrame.Value
>
</
DiscreteObjectKeyFrame
>
</
ObjectAnimationUsingKeyFrames
>
</
Storyboard
>
</
VisualState
>
</
VisualStateGroup
>
</
VisualStateManager.VisualStateGroups
>
<
Border
BorderBrush
=
"{TemplateBinding BorderBrush}"
BorderThickness
=
"{TemplateBinding BorderThickness}"
Background
=
"{TemplateBinding Background}"
CornerRadius
=
"{StaticResource Expander_BorderRadius}"
>
<
Grid
>
<
Grid.RowDefinitions
>
<
RowDefinition
x:Name
=
"row0"
Height
=
"Auto"
/>
<
RowDefinition
x:Name
=
"row1"
Height
=
"Auto"
/>
</
Grid.RowDefinitions
>
<
Grid.ColumnDefinitions
>
<
ColumnDefinition
x:Name
=
"col0"
Width
=
"Auto"
/>
<
ColumnDefinition
x:Name
=
"col1"
Width
=
"Auto"
/>
</
Grid.ColumnDefinitions
>
<
telerikPrimitives:LayoutTransformControl
RenderTransformOrigin
=
".5 .5"
x:Name
=
"HeaderContentTransform"
>
<
telerik1:RadToggleButton
x:Name
=
"HeaderButton"
IsChecked
=
"{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
ClickMode
=
"{TemplateBinding ClickMode}"
Content
=
"{TemplateBinding Header}"
ContentTemplate
=
"{TemplateBinding HeaderTemplate}"
Style
=
"{TemplateBinding HeaderButtonStyle}"
/>
</
telerikPrimitives:LayoutTransformControl
>
<
ContentPresenter
x:Name
=
"Content"
Margin
=
"{TemplateBinding Padding}"
Visibility
=
"Collapsed"
UseLayoutRounding
=
"True"
Content
=
"{TemplateBinding Content}"
ContentTemplate
=
"{TemplateBinding ContentTemplate}"
HorizontalAlignment
=
"{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment
=
"{TemplateBinding VerticalContentAlignment}"
ContentTemplateSelector
=
"{TemplateBinding ContentTemplateSelector}"
/>
</
Grid
>
</
Border
>
</
Grid
>
</
ControlTemplate
>
All theme files can be found in the Themes.Implicit folder of your local installation of the UI for WPF suite. Depending on the particular theme you are using you can copy the needed default theme styles. You can take a look at the Setting a Theme topic for further reference.
Regards,
Stefan
Progress Telerik
Hello Stefan,
thank you for your code-sample.
I am using the material theme and found the following code for RadExpander in Telerik.Windows.Controls.xaml-File:
<ControlTemplate TargetType="telerik1:RadExpander" x:Key="ExpanderTemplate">
<Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition x:Name="row0" Height="Auto"/>
<RowDefinition x:Name="row1" Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="col0" Width="Auto"/>
<ColumnDefinition x:Name="col1" Width="Auto"/>
</Grid.ColumnDefinitions>
<telerikPrimitives:LayoutTransformControl RenderTransformOrigin="0.5 0.5" x:Name="HeaderContentTransform">
<telerik1:RadToggleButton x:Name="HeaderButton"
IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
ClickMode="{TemplateBinding ClickMode}"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
Style="{TemplateBinding HeaderButtonStyle}"/>
</telerikPrimitives:LayoutTransformControl>
<ContentPresenter x:Name="Content"
Margin="{TemplateBinding Padding}"
Visibility="Collapsed"
UseLayoutRounding="True"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="ResultOrientation" Value="Vertical">
<Setter TargetName="HeaderContentTransform" Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="90"/>
</Setter.Value>
</Setter>
<Setter TargetName="HeaderContentTransform" Property="Grid.Row" Value="1"/>
</Trigger>
<Trigger Property="ResultOrientation" Value="Horizontal">
<Setter TargetName="HeaderContentTransform" Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="0"/>
</Setter.Value>
</Setter>
<Setter TargetName="HeaderContentTransform" Property="Grid.Column" Value="1"/>
</Trigger>
<Trigger Property="ExpandDirection" Value="Down">
<Setter TargetName="col0" Property="Width" Value="*"/>
<Setter TargetName="row1" Property="Height" Value="*"/>
<Setter TargetName="Content" Property="Grid.Row" Value="1"/>
<Setter TargetName="Content" Property="Grid.Column" Value="0"/>
<Setter TargetName="HeaderContentTransform" Property="Grid.Row" Value="0"/>
<Setter TargetName="HeaderContentTransform" Property="Grid.Column" Value="0"/>
</Trigger>
<Trigger Property="ExpandDirection" Value="Up">
<Setter TargetName="col0" Property="Width" Value="*"/>
<Setter TargetName="row0" Property="Height" Value="*"/>
<Setter TargetName="Content" Property="Grid.Row" Value="0"/>
<Setter TargetName="Content" Property="Grid.Column" Value="0"/>
<Setter TargetName="HeaderContentTransform" Property="Grid.Row" Value="1"/>
<Setter TargetName="HeaderContentTransform" Property="Grid.Column" Value="0"/>
</Trigger>
<Trigger Property="ExpandDirection" Value="Right">
<Setter TargetName="col1" Property="Width" Value="*"/>
<Setter TargetName="row0" Property="Height" Value="*"/>
<Setter TargetName="Content" Property="Grid.Column" Value="1"/>
<Setter TargetName="Content" Property="Grid.Row" Value="0"/>
<Setter TargetName="HeaderContentTransform" Property="Grid.Row" Value="0"/>
<Setter TargetName="HeaderContentTransform" Property="Grid.Column" Value="0"/>
</Trigger>
<Trigger Property="ExpandDirection" Value="Left">
<Setter TargetName="col0" Property="Width" Value="*"/>
<Setter TargetName="row0" Property="Height" Value="*"/>
<Setter TargetName="HeaderContentTransform" Property="Grid.Column" Value="1"/>
<Setter TargetName="HeaderContentTransform" Property="Grid.Row" Value="0"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<Style TargetType="telerik1:RadExpander" x:Key="RadExpanderStyle">
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="mat:MaterialAssist.CornerRadius" Value="{telerik1:MaterialResource ResourceKey=CornerRadius}"/>
<Setter Property="mat:MaterialAssist.ShadowDepth" Value="Depth1"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="HorizontalHeaderAlignment" Value="Stretch"/>
<Setter Property="VerticalHeaderAlignment" Value="Center"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="animation:AnimationManager.IsAnimationEnabled" Value="True"/>
<Setter Property="FontFamily" Value="{telerik1:MaterialResource ResourceKey=FontFamily}"/>
<Setter Property="FontSize" Value="{telerik1:MaterialResource ResourceKey=FontSize}"/>
<Setter Property="Foreground" Value="{telerik1:MaterialResource ResourceKey=MarkerBrush}"/>
<Setter Property="Padding" Value="2"/>
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="HeaderButtonStyle" Value="{StaticResource ExpanderHeaderButtonStyle}"/>
<Setter Property="Template" Value="{StaticResource ExpanderTemplate}"/>
<Setter Property="animation:AnimationManager.AnimationSelector">
<Setter.Value>
<animation:AnimationSelector>
<animation:ExpanderExpandCollapseAnimation AnimationName="Expand" Direction="In" TargetElementName="Content"/>
<animation:ExpanderExpandCollapseAnimation AnimationName="Collapse" Direction="Out" TargetElementName="Content"/>
<animation:ExpanderExpandCollapseAnimation AnimationName="ExpandHorizontal" Direction="In" TargetElementName="Content"/>
<animation:ExpanderExpandCollapseAnimation AnimationName="CollapseHorizontal" Direction="Out" TargetElementName="Content"/>
</animation:AnimationSelector>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="telerik1:RadExpander" BasedOn="{StaticResource RadExpanderStyle}"/>
I can not find the VisualStateGroups-block from the example above in this ControlTemplate.
Can you tell me which part I need to change?
Thanks
Alex
Thanks for the update.
Indeed, in some themes Triggers for the ControlTemplate are used instead of VisualStates. You can, however still apply an animation for each ExpandDirection Trigger by using an approach similar to the one demonstrated in this and this forum thread.
I hope this helps.
Regards,
Stefan
Progress Telerik