Click here to Skip to main content
12,548,119 members (48,748 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

GeneralRe: A subtle bug Pin
Arik Poznanski26-Feb-10 9:54
memberArik Poznanski26-Feb-10 9:54 
GeneralVery good post Pin
solaadio16-Feb-10 6:50
membersolaadio16-Feb-10 6:50 
QuestionWill it work in a WEB app? Pin
Member 305299016-Feb-10 4:19
memberMember 305299016-Feb-10 4:19 
I went over this rather quickly, and it looks like it's intended for use in a Windows Form application. Since I'm new to this, I was wondering if it would also work in a WEB application?
AnswerRe: Will it work in a WEB app? Pin
Arik Poznanski16-Feb-10 6:56
memberArik Poznanski16-Feb-10 6:56 
GeneralProblems to rebuild your example Pin
sinun16-Feb-10 1:32
membersinun16-Feb-10 1:32 
GeneralRe: Problems to rebuild your example Pin
Arik Poznanski16-Feb-10 1:37
memberArik Poznanski16-Feb-10 1:37 
GeneralRe: Problems to rebuild your example Pin
sinun16-Feb-10 19:52
membersinun16-Feb-10 19:52 
GeneralXP Pin
gratro15-Feb-10 23:39
membergratro15-Feb-10 23:39 
GeneralRe: XP Pin
Arik Poznanski16-Feb-10 1:38
memberArik Poznanski16-Feb-10 1:38 

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.161021.1 | Last Updated 8 Feb 2010
Article Copyright 2010 by Arik Poznanski
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid