Click here to Skip to main content
12,626,517 members (37,175 online)
Click here to Skip to main content
Add your own
alternative version


23 bookmarked

WPF: How To Animate Visibility Property?

, 7 Feb 2010 Ms-PL
Rate this:
Please Sign up or sign in to vote.
In this post I’ll show you an easy way to add fade-in / fade-out effects to your user controls, when you change their Visibility property.Adding the animation is done with an attached property, so using the code will be extremely simple.

In this post I’ll show you an easy way to add fade-in / fade-out effects to your user controls, when you change their Visibility property.

Adding the animation is done with an attached property, so using the code will be extremely simple.

Usage Sample


<Window x:Class="WpfDemoVisibilityAnimation.Window1"
    Title="Window1" Height="300" Width="300">
        <Button Content="Hide" Click="Hide_Click" />
        <Button Content="Show" Click="Show_Click" />
        <Image common:VisibilityAnimation.AnimationType="Fade" 
               Source="C:\Users\Public\Pictures\Sample Pictures\Desert.jpg" />

Code Behind:

private void Hide_Click(object sender, RoutedEventArgs e)
    Image.Visibility = Visibility.Hidden;

private void Show_Click(object sender, RoutedEventArgs e)
    Image.Visibility = Visibility.Visible;

Note that the only required addition for the animation effect was setting the attached property: VisibilityAnimation.AnimationType="Fade"

You can find here the full source code for the VisibilityAnimation attached property and here the usage sample application.

Where is the magic? The magic resides in the implementation of the attached property. Before I’ll show you the code, let me explain the basic idea.

  1. We “register” for getting visibility property “before change” event.
  2. When an element’s visibility property tries to change, somewhere in the application, we get the notification and check if the element has our attached property.
  3. If it has, we start an animation on the opacity property and force the current visibility value to Visibility.Visible, This will allow the animation to present without interruptions.
  4. When the animation completes, we set the original requested value.
  5. Setting the original requested value will invoke (again) our “before change” event, so we need to keep a flag that indicates whether we already started the animation, in which case we just set the value.

Credit The original idea is based on an answer from stack overflow. I’ve improved the code, added support for the case where the Visibility was getting the value using data binding and added lots of comments.

That’s it for now,
Arik Poznanski.

Appendix A – Source Code for VisibilityAnimation Class

using System;
using System.Collections.Generic;
using System.Windows;
using System.Windows.Data;
using System.Windows.Media.Animation;

namespace WPF.Common
    /// <span class="code-SummaryComment"><summary>


This article, along with any associated source code and files, is licensed under The Microsoft Public License (Ms-PL)


About the Author

Arik Poznanski
Software Developer (Senior) Verint
Israel Israel
Arik Poznanski is a senior software developer at Verint. He completed two B.Sc. degrees in Mathematics & Computer Science, summa cum laude, from the Technion in Israel.

Arik has extensive knowledge and experience in many Microsoft technologies, including .NET with C#, WPF, Silverlight, WinForms, Interop, COM/ATL programming, C++ Win32 programming and reverse engineering (assembly, IL).

You may also be interested in...

Comments and Discussions

GeneralBug when Visibility is data bound Pin
poulin_julien7-Apr-10 5:01
memberpoulin_julien7-Apr-10 5:01 

This is a very good article and I was able to use your code with great success.

However, I came across a small bug and I hope you'll be able to help me fix it.

I'm using VisibilityAnimation on an Image control having its Visibility property data bound (to a ViewModel). The binding uses a BooleanToVisibilityConverter and has a fall-back value set to False:

Visibility="{Binding AreDepartureLightsOn, Converter={StaticResource BooleanToVisibilityConverter}, FallbackValue=False}"

The problem is the following: when the View is displayed for the first time and then the Visibility is set to true, it works as expected. But when the View is displayed and the Visibility already equals True, the image remains not visible.

In the meantime, I manage to bypass it by removing the following code from the CoerceVisibility method:
if (visibility == frameworkElement.Visibility)
  return baseValue;
but when the View is displayed, the Opacity is animated instead of being already set to 1.0.

I hope it's understandable. I would really appreciate if you could take a look at this problem.
GeneralRe: Bug when Visibility is data bound Pin
Arik Poznanski9-Apr-10 4:01
memberArik Poznanski9-Apr-10 4:01 
GeneralRe: Bug when Visibility is data bound [modified] Pin
poulin_julien9-Apr-10 4:06
memberpoulin_julien9-Apr-10 4:06 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.161205.3 | Last Updated 8 Feb 2010
Article Copyright 2010 by Arik Poznanski
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid