This is a migrated thread and some comments may be shown as answers.

LayoutControlExpanderGroup Duration of Animation

5 Answers 141 Views
LayoutControl
This is a migrated thread and some comments may be shown as answers.
Alex
Top achievements
Rank 1
Alex asked on 23 Jul 2018, 02:23 PM

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

Sort by
0
Stefan
Telerik team
answered on 26 Jul 2018, 08:21 AM
Hello Alex,

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
Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
0
Alex
Top achievements
Rank 1
answered on 26 Jul 2018, 12:35 PM

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

0
Stefan
Telerik team
answered on 27 Jul 2018, 02:56 PM
Hi 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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Alex
Top achievements
Rank 1
answered on 30 Jul 2018, 02:09 PM

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


0
Stefan
Telerik team
answered on 02 Aug 2018, 10:45 AM
Hi 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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
LayoutControl
Asked by
Alex
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Alex
Top achievements
Rank 1
Share this question
or