WPF Expander with Animation

Kailash Chandra Behera | Monday, May 14, 2018

Introduction

WPF Expander with Animation provides animation code example for WPF Expander while increase or decrease of its height or width while expanding or collapsing based on the expand direction.

Getting Started With WPF Expander with Animation

Sometimes it is required to use animation with standard control in WPF for effective user interface. This article describes how to use animation in WPF expander while it expands or collapse. While expanding or collapsing the expander the animation increases height or weight of expander based on the expand direction. It increases and decrease height of expander when expand direction is TOP or Bottom and when expand direction is left or right, it increases and decrease width of expander.

The WPF expander does not support animation by default when it expands or collapses and does not increase or decrease the height and width of the expander. It only hides his content and child control. In this blog, we are going to discuss how to increase and decrease the height and width of the expander with animation. To increase and decrease the height and width of the expander with animation, I have used double animation inside the property triggers of the expander.

WPF Expander with Animation

 <Expander.Triggers>  
         <EventTrigger RoutedEvent="Expander.Expanded">  
           <EventTrigger.Actions>  
             <BeginStoryboard>  
               <Storyboard >  
                 <DoubleAnimation From="30"   
                          To="180"   
                          Storyboard.TargetName="AnimatedExpander"   
                          Storyboard.TargetProperty="Width"   
                          Duration="0:00:01.15"/>  
               </Storyboard>  
             </BeginStoryboard>  
           </EventTrigger.Actions>  
         </EventTrigger>  
         <EventTrigger RoutedEvent="Expander.Collapsed">  
           <EventTrigger.Actions>  
             <BeginStoryboard>  
               <Storyboard >  
                 <DoubleAnimation From="180"   
                          To="30"   
                          Storyboard.TargetName="AnimatedExpander"   
                          Storyboard.TargetProperty="Width"   
                          Duration="0:00:01.15"/>  
               </Storyboard>  
             </BeginStoryboard>  
           </EventTrigger.Actions>  
         </EventTrigger>  
       </Expander.Triggers>

The DoubleAnimation class creates a transition between two target values. To set its target values, use it’s From, To, and By properties. For increasing or decreasing height and width of expander with animation while expanding or collapsing, the maximum height or width of expander is set to FROM of DoubleAnimation to expand and minimum height or width for collapse is set to TO of DoubleAnimation .

In the below of this article contains code blogs which create four custom expander with different expand direction which supports animation while expanding or collapsing.

WPF Expander with Animation (Left Expand Direction)

 <Expander Margin="2,0" HorizontalAlignment="Left" Width="195" MaxWidth="195" Name="AnimatedExpander" Grid.Row="1" IsExpanded="True" BorderBrush="Gray" BorderThickness="1" ExpandDirection="Left">  
       <Expander.Triggers>  
         <EventTrigger RoutedEvent="Expander.Expanded">  
           <EventTrigger.Actions>  
             <BeginStoryboard>  
               <Storyboard >  
                 <DoubleAnimation From="30"   
                          To="180"   
                          Storyboard.TargetName="AnimatedExpander"   
                          Storyboard.TargetProperty="Width"   
                          Duration="0:00:01.15"/>  
               </Storyboard>  
             </BeginStoryboard>  
           </EventTrigger.Actions>  
         </EventTrigger>  
         <EventTrigger RoutedEvent="Expander.Collapsed">  
           <EventTrigger.Actions>  
             <BeginStoryboard>  
               <Storyboard >  
                 <DoubleAnimation From="180"   
                          To="30"   
                          Storyboard.TargetName="AnimatedExpander"   
                          Storyboard.TargetProperty="Width"   
                          Duration="0:00:01.15"/>  
               </Storyboard>  
             </BeginStoryboard>  
           </EventTrigger.Actions>  
         </EventTrigger>  
       </Expander.Triggers>  
       <Grid Margin="5">  
         <Grid.RowDefinitions>  
           <RowDefinition Height="50"/>  
         </Grid.RowDefinitions>  
         <Border BorderBrush="Black" BorderThickness="1" Margin="2" CornerRadius="5"></Border>  
       </Grid>  
     </Expander>

The above code creates an expander which has left expand direction, it has used two DoubleAnimation with two trigger. The first trigger will fire when expander expand and executes DoubleAnimation for increasing width of expander. The second expander with fire when expander collapses and executes DoubleAnimation for decreasing the width of expander.

Here 180 value has been given to From and 30 is given to To of DoubleAnimation and vice versa for others which will increase and decrease the width of expander up to 180 and 30.

WPF Expander with Animation (Right Expand Direction)

 <Expander Margin="2,0" HorizontalAlignment="Left" Width="195" MaxWidth="195" Name="AnimatedExpander" Grid.Row="1" IsExpanded="True" BorderBrush="Gray" BorderThickness="1" ExpandDirection="Right">  
       <Expander.Triggers>  
         <EventTrigger RoutedEvent="Expander.Expanded">  
           <EventTrigger.Actions>  
             <BeginStoryboard>  
               <Storyboard >  
                 <DoubleAnimation From="30"   
                          To="180"   
                          Storyboard.TargetName="AnimatedExpander"   
                          Storyboard.TargetProperty="Width"   
                          Duration="0:00:01.15"/>  
               </Storyboard>  
             </BeginStoryboard>  
           </EventTrigger.Actions>  
         </EventTrigger>  
         <EventTrigger RoutedEvent="Expander.Collapsed">  
           <EventTrigger.Actions>  
             <BeginStoryboard>  
               <Storyboard >  
                 <DoubleAnimation From="180"   
                          To="30"   
                          Storyboard.TargetName="AnimatedExpander"   
                          Storyboard.TargetProperty="Width"   
                          Duration="0:00:01.15"/>  
               </Storyboard>  
             </BeginStoryboard>  
           </EventTrigger.Actions>  
         </EventTrigger>  
       </Expander.Triggers>  
       <Grid Margin="5">  
         <Grid.RowDefinitions>  
           <RowDefinition Height="50"/>  
         </Grid.RowDefinitions>  
         <Border BorderBrush="Black" BorderThickness="1" Margin="2" CornerRadius="5"></Border>  
       </Grid>  
     </Expander>

This above code block applies animation to expander which has the right expansion direction. The used DoubleAnimation will increase or decrease the width of expander to words right side of the form. Same as Left expand direction, it will increase the width of expander up to 180 and decrease up to 30 when expands or collapse.

WPF Expander with Animation (Up Expand Direction)

 <Expander Margin="2,0" VerticalAlignment="Bottom" Width="195" MaxWidth="195" Name="AnimatedExpander" Grid.Row="1" IsExpanded="True" BorderBrush="Gray" BorderThickness="1" ExpandDirection="UP">  
       <Expander.Triggers>  
         <EventTrigger RoutedEvent="Expander.Expanded">  
           <EventTrigger.Actions>  
             <BeginStoryboard>  
               <Storyboard >  
                 <DoubleAnimation From="30"   
                          To="180"   
                          Storyboard.TargetName="AnimatedExpander"   
                          Storyboard.TargetProperty="Height"   
                          Duration="0:00:01.15"/>  
               </Storyboard>  
             </BeginStoryboard>  
           </EventTrigger.Actions>  
         </EventTrigger>  
         <EventTrigger RoutedEvent="Expander.Collapsed">  
           <EventTrigger.Actions>  
             <BeginStoryboard>  
               <Storyboard >  
                 <DoubleAnimation From="180"   
                          To="30"   
                          Storyboard.TargetName="AnimatedExpander"   
                          Storyboard.TargetProperty="Height"   
                          Duration="0:00:01.15"/>  
               </Storyboard>  
             </BeginStoryboard>  
           </EventTrigger.Actions>  
         </EventTrigger>  
       </Expander.Triggers>  
       <Grid Margin="5">  
         <Grid.RowDefinitions>  
           <RowDefinition Height="50"/>  
         </Grid.RowDefinitions>  
         <Border BorderBrush="Black" BorderThickness="1" Margin="2" CornerRadius="5"></Border>  
       </Grid>  
     </Expander>

Here you might be noticed the above code that the storyboard has TargetProperty has value "Height", because the expander has TOP Expand Direction. This means the DoubleAnimation will increase or decrease the height of expander, not width.

WPF Expander with Animation (Down Expand Direction)

 <Expander Margin="2,0" VerticalAlignment="Top" Width="195" MaxWidth="195" Name="AnimatedExpander" Grid.Row="1" IsExpanded="True" BorderBrush="Gray" BorderThickness="1" ExpandDirection="Down">  
       <Expander.Triggers>  
         <EventTrigger RoutedEvent="Expander.Expanded">  
           <EventTrigger.Actions>  
             <BeginStoryboard>  
               <Storyboard >  
                 <DoubleAnimation From="30"   
                          To="180"   
                          Storyboard.TargetName="AnimatedExpander"   
                          Storyboard.TargetProperty="Height"   
                          Duration="0:00:01.15"/>  
               </Storyboard>  
             </BeginStoryboard>  
           </EventTrigger.Actions>  
         </EventTrigger>  
         <EventTrigger RoutedEvent="Expander.Collapsed">  
           <EventTrigger.Actions>  
             <BeginStoryboard>  
               <Storyboard >  
                 <DoubleAnimation From="180"   
                          To="30"   
                          Storyboard.TargetName="AnimatedExpander"   
                          Storyboard.TargetProperty="Height"   
                          Duration="0:00:01.15"/>  
               </Storyboard>  
             </BeginStoryboard>  
           </EventTrigger.Actions>  
         </EventTrigger>  
       </Expander.Triggers>  
       <Grid Margin="5">  
         <Grid.RowDefinitions>  
           <RowDefinition Height="50"/>  
         </Grid.RowDefinitions>  
         <Border BorderBrush="Black" BorderThickness="1" Margin="2" CornerRadius="5"></Border>  
       </Grid>  
     </Expander>

Note:-

Based on the Expand Direction of Expander in WPF Expander with Animation(Left Expand Direction), you may notice in the above code that the alignment of the expander is changing. While applying animation in expander notice the below notes otherwise the DoubleAnimation will not increase or decrease the height or width in the proper direction.

  1. When Expand Direction is Left, The HorizontalAlignment should of expander be Right.
  2. Same as when Expand Direction is Right, The HorizontalAlignment should of expander be Left.
  3. If Expand Direction is Up, then make the VerticalAlignment of expander Buttom.
  4. If Expand Direction is Down, then make the VerticalAlignment of expander Top.

Related Articles

  1. Round Corner TextBox With Border effect
  2. WPF Round Corner Button with click effects
  3. WPF Binding
  4. WPF Style

Summary

In the WPF Expander with Animation, we say how to animated a WPF expander to the various direction(Left, Right, Up and Down). I hope you have enjoyed it a lot.

Thanks

By at