Skip to main content

WPF Expander with Animation

Introduction

This blog demonstrate how to use animation with WPF Expander to increase or decrease of its height or width while expanding or collapsing based on the expand direction.

Getting Started

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 collapse and does not increase or decrease height and width of expander. It only hides his content and child control. In this blog we are going to discuss how to increase and decrease height and width of expander with animation. To increase and decrease height and width of expander with animation, I have used double animation inside the property triggers of expander.

 <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 creates four custom expander with different expand direction which support animation while expanding or collapsing.

WPF Expander with 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 viceversa for other which will increase and decrease the width of expander up to 180 and 30.

WPF Expander with 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 Right expand direction. The used DoubleAnimation will increase or decrease the width of expander to words right side of form. Same as Left expand direction, it will increase width of expander up to 180 and decrease up to 30 when expands or collaps.

WPF Expander with 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. Means the the DoubleAnimation will increase or decrease height of expander not width.

WPF Expander with 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, you may notice in above code that the alignment of 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 proper direaction.
  1. When Expand Direction is Left, The HorizontalAlignment should of expander should be Right.
  2. Same as when Expand Direction is Right, The HorizontalAlignment should of expander should 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.

Thanks
Kailash Chandra Behera

Comments

Post a Comment

Popular posts from this blog

Generate QR Code in WPF

Introduction In my previous two blogs, we have discussed how to display generate and display various barcodes on the web page. In this blog, we are going to demonstrate how to Generate QR Code in the WPF application. Getting Started Here in the demonstration Generate QR Code in WPF , will generate QR code using third party library as there is not inbuilt library provided by Microsoft to generate QR code and will display in WPF image control, In the below, we will see the steps to display QR Code. As I mentioned in the above paragraph that there is no inbuild library provided by Microsoft to generate QR code, I have taken the help of the ZXing library which is a third party free library and available Nuget. This library provides various options to generate barcodes and QR Code from the user-friendly text. Generate QR Code in WPF Here are the steps to generate QR code and let's follow the steps to complete demonstrations. Demonstration:- Generate QR Code Open visual stud
Post a Comment
Read more

Creating Application in Prism

Introduction This article explains an illustration of creating a windows application in Prism Library(WPF Prism). The solution includes recommended practices and techniques and is the basis for the procedures in Prism. This illustration created in the Visual Studio 2012, It can also developed in the visual studio 2008 and 2010, because wpf supports from .net framework 3.5 to latest version. Microsoft.Practices.Prism.dll. This assembly contains the implementation of the Prism Library core components such as modularity, logging services, communication services, and definitions for several core interfaces. It also contains the implementation of Prism Library components that target WPF applications, including commands, regions, and events. Microsoft.Practices.Prism.UnityExtensions.dll. This assembly contains base and utility classes you can reuse in applications built with the Prism Library that consume the Unity Application Block. For example, it contains a bootstrapper base class
1 comment
Read more

WPF Binding

Introduction This blog describes WPF Binding and the measure elements exist with binding with XAML example in XAML and code-behind. Getting Started Binding helps in WPF to flow data from one object to another object, the object which fetches data is called source and the object which receives the data is called target. The Object a be a UI control or object of a class that means in binding you can bind a property of a class and property of another control to WPF UI controls as well. XAML Example <TextBox x:Name="sourceText" Grid.Row="0" /> <Button Grid.Row="1" Content="{Binding ElementName=sourceText, Path=Text}"/> Code Example Button btn=new Button(); Binding binding = new Binding("Text"); binding.Source = sourceText; btn.SetBinding(Button.ContentProperty, binding); In WPF binding has some measure properties or elements that we are using while developing application or projects, here we are going to d
1 comment
Read more