Animating ComponentOne Expander

We animate the Framework elements by applying animation to their individual properties. For example, to make a framework element grow, we animate its Width and Height properties and to make it fade from view, we animate its Opacity property. With this blog, we will animate the ComponentOne Expander using some of its properties and will apply animations to it using some common techniques. After animations are applied, we will have something like the following image : Looks cool, right ;) Lets have a look on what we have implemented.

Using the BeginAnimation Method

This method starts an animation for a specified animated property on this element. We have applied two kinds of Animations here :

• ColorAnimation on the Background property of the C1Expander object in its IsExpandedChanging event.

//Adding ColorAnimation in the BackgroundProperty  
ColorAnimation ca = new ColorAnimation(Colors.Blue, new Duration(TimeSpan.FromSeconds(4)));  
c1Expander.Background = new SolidColorBrush(Colors.Red);  
c1Expander.Background.BeginAnimation(SolidColorBrush.ColorProperty, ca);  

• DoubleAnimation on the Height and Width properties of the C1Expander object on seperate button clicks.

private void AnimateHeightBtn_Click(object sender, RoutedEventArgs e)  
{  
    DoubleAnimation doubleAnimation;  

    //Applying Animation on the HeightProperty  
    if (c1Expander.Height == 200)  
    {  
        doubleAnimation = new DoubleAnimation(21, new Duration(TimeSpan.FromSeconds(.7)), FillBehavior.HoldEnd);  
    }  
    else  
    {  
        doubleAnimation = new DoubleAnimation(200, new Duration(TimeSpan.FromSeconds(.7)), FillBehavior.HoldEnd);  
    }  
    c1Expander.BeginAnimation(C1.WPF.Extended.C1ExpanderButton.HeightProperty, doubleAnimation);  

}  

private void AnimateWidthBtn_Click(object sender, RoutedEventArgs e)  
{  
    DoubleAnimation doubleAnimation;  

    //Applying Animation on the WidthProperty  
    if (c1Expander.Width > 200)  
    {  
        doubleAnimation = new DoubleAnimation(c1Expander.Width / 2, new Duration(TimeSpan.FromSeconds(.7)), FillBehavior.HoldEnd);  
    }  
    else  
    {  
        doubleAnimation = new DoubleAnimation(c1Expander.Width * 2, new Duration(TimeSpan.FromSeconds(.7)), FillBehavior.HoldEnd);  
    }  
    c1Expander.BeginAnimation(C1.WPF.Extended.C1ExpanderButton.WidthProperty, doubleAnimation);  

}  

Using the ApplyAnimationClock method

This method applies an AnimationClock to the specified DependencyProperty. Here, we used the ApplyAnimationClock method of the Expander object in its IsExpandedChanging event to apply animations on the Expanded and Collapsed states of the Expander.

private void c1Expander_IsExpandedChanging(object sender, C1.WPF.PropertyChangingEventArgs e)  
{  
    if (e.NewValue == true)  
    {  
        DoubleAnimation widthAnimation = new DoubleAnimation(100, 200, new Duration(TimeSpan.FromSeconds(5)));  
        widthAnimation.SpeedRatio = 3;  
        widthAnimation.AutoReverse = true;  
        // Create a clock from the animation.  
        var myControllableClock = widthAnimation.CreateClock();  
        // Apply the clock to the rectangle's Width property.  
        c1Expander.ApplyAnimationClock(Rectangle.WidthProperty, myControllableClock);  

        //Adding ColorAnimation in the BackgroundProperty  
        ColorAnimation ca = new ColorAnimation(Colors.Blue, new Duration(TimeSpan.FromSeconds(4)));  
        c1Expander.Background = new SolidColorBrush(Colors.Red);  
        c1Expander.Background.BeginAnimation(SolidColorBrush.ColorProperty, ca);  
    }  
    else  
    {  
        DoubleAnimation PosAnimation = new DoubleAnimation(200, 100, new Duration(TimeSpan.FromSeconds(5)));  
        PosAnimation.SpeedRatio = 3;  
        PosAnimation.AutoReverse = true;  
        // Create a clock from the animation.  
        var myControllableClock = PosAnimation.CreateClock();  
        // Apply the clock to the rectangle's Width property.  
        c1Expander.ApplyAnimationClock(Rectangle.HeightProperty, myControllableClock);  
    }  
}  

Like these, various other animations could also be implemented. If you have some specific user requirements or customizations or suggestions regarding the same then let us know. We would be happy to cater them :) A Complete sample with the above implementations could be downloaded from the download icon below :