Fade animation using WPF

It is a sample based on the rich animation that is available under animation libraries of WPF. Here we’ll mainly focus on the fade animations under WPF. First of all you need to use ‘System.Windows.Media.Animation‘ in order to enforce the animation.

  • First of all we need to include ‘System.Windows.Media.Aniimation’
  • Then we’ll use the fade animation when the mouse leaves the area or reappears when mouse enters the area.
  • It can either be a canvas, or an ellipse or any geometrical shape even a grid.

For building or downloading the sample visit my post at MSDN.

Before animation starts :


After fade effect is activated:


Code for entering mouse :

private void canvas1_MouseEnter(object sender, MouseEventArgs e)
Canvas c = (Canvas)sender;
DoubleAnimation animation = new DoubleAnimation(2, TimeSpan.FromSeconds(5));
c.BeginAnimation(Canvas.OpacityProperty, animation);
textBlock1.Visibility = Visibility.Hidden;
textBlock2.Visibility = Visibility.Visible;

Code for leaving mouse :

private void canvas1_MouseLeave(object sender, MouseEventArgs e)
Canvas c = (Canvas)sender;
DoubleAnimation animation = new DoubleAnimation(0, TimeSpan.FromSeconds(5));
textBlock2.Visibility = Visibility.Hidden;
textBlock1.Visibility = Visibility.Visible;

Here we create objects Canvas and animations and then apply properties.

using System;
using System.Collections.Generic;
using System.Linq;
using System.ServiceModel;
using System.Text;
using System.Threading.Tasks;

namespace WcfServiceLibrary1
    [ServiceBehavior(InstanceContextMode = InstanceContextMode.Single)]
    public class DataService:IDataService
        List<data> datas = new List<data>();
        #region IDataService members

        public void submit_data(Data data)
            data.roll = Guid.NewGuid().ToString();

        public List<data> GetData()
            return datas;
        }        public void remove_data(string roll)
            datas.Remove(datas.Find(e => e.roll.Equals(roll)));
        }        #endregion

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s