Adding Animations in Ratings for WPF

User communication is as important as ever, and now you can increase your users' interactivity with Ratings for WPF, the newest control available in ComponentOne Studio WPF Edition.

In addition to the basic customizable icons and horizontal/vertical alignment, we've also built in animations. When your user clicks the star (or thumb, or whatever you prefer), you can scroll, bounce, fade, and slide, or create custom animations.

Design-Time Animations in Ratings for WPF

1. In Design view, select the Rating control on the Main Window by clicking it once.
2. Navigate to the Properties window and locate the AnimationType property.
3. Click the drop-down arrow and select the animation effect you want to apply to the Rating control. By default, the AnimationType property is set to None. For this example, select Bounce to apply a bouncing effect to the control.

Press F5 to run the program. Click the stars to see the bouncing animation effect.

Add Ratings Animation in Code

You can add animation effect to the Rating control by adding the following markup between the tags.

Customize Rating Animations in Code

We've also provided the option to customize the animation effect by inheriting the properties and methods of the IAnimationFactory class. Add the following code in the interaction logic for XAML to create an instance of CustomAnimationFlickerFactory class.

private IAnimationFactory customAnimationFlickerFactory = new CustomAnimationFlickerFactory();  

public MainWindow()  
{  
    InitializeComponent();  
    c1Rating.AnimationFactory = customAnimationFlickerFactory;  
}  

Copy the following code and add to CustomAnimationFlickerFactory.cs file to override IAnimationFactory class.

using C1.WPF.Extended;  
using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Text;  
using System.Windows;  
using System.Windows.Media;  
using System.Windows.Media.Animation;  
using System.Windows.Media.Media3D;  

namespace Rating\_WPF\_Animation  
{  
    class CustomAnimationFlickerFactory : IAnimationFactory  
    {  
        public Storyboard GetForwardAnimation(FrameworkElement target, AnimationType animationType)  
        {  
            return GetFadeAnimation(target, true);  
        }  
        public Storyboard GetBackwardAnimation(FrameworkElement target, AnimationType animationType)  
        {  
            return GetFadeAnimation(target, false);  
        }  
        private Storyboard GetFadeAnimation(FrameworkElement target, bool forward)  
        {  
            RotateTransform st = new RotateTransform();  
            st.Angle = 360;  
            Point p = new Point(0.5, 0.5);  
            target.RenderTransformOrigin = p;  
            target.RenderTransform = st;  
            Storyboard sb = new Storyboard();  
            var duration = TimeSpan.FromSeconds(0.25);  
            EasingFunctionBase easing = new ElasticEase()  
            {  
                EasingMode = EasingMode.EaseInOut,  
                Oscillations = 20,  
                Springiness = 5  
            };  
            DoubleAnimation da1 = new DoubleAnimation();  
            DoubleAnimation da2 = new DoubleAnimation();  

            if (forward)  
            {  
                da1.From = 1.0;  
                da1.To = 0.0;  
                da2.To = 1.0;  
            }  
            else  
            {  
                da1.From = 0.0;  
                da1.To = 1.0;  
            }  
            da1.Duration = duration;  
            da2.Duration = duration;  

            da1.EasingFunction = easing;  
            da2.EasingFunction = easing;  

            sb.Children.Add(da1);  
            sb.Children.Add(da2);  

            Storyboard.SetTargetProperty(da2, new PropertyPath("RenderTransform.Angle"));  
            Storyboard.SetTargetProperty(da1, new PropertyPath("Opacity"));  
            return sb;  
        }  
    }  
}  

When you run the application, you'll see a customized flickering effect applied to the Rating control. What do you think? Submit your feedback and suggestions in the comments.