Click here to Skip to main content
11,709,844 members (52,858 online)
Click here to Skip to main content

WPF: How To Animate Visibility Property?

, 7 Feb 2010 Ms-PL 50.3K 23
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

XAML:

<Window x:Class="WpfDemoVisibilityAnimation.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:common="clr-namespace:WPF.Common"
    Title="Window1" Height="300" Width="300">
    <StackPanel>
        <Button Content="Hide" Click="Hide_Click" />
        <Button Content="Show" Click="Show_Click" />
        <Image common:VisibilityAnimation.AnimationType="Fade" 
               x:Name="Image" 
               Source="C:\Users\Public\Pictures\Sample Pictures\Desert.jpg" />
    </StackPanel>
</Window>

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>
</span>

License

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

Share

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

 
QuestionSetting new value during a animation Pin
andreas13377-May-15 6:01
memberandreas13377-May-15 6:01 
QuestionVisibility' property was already registered by 'FrameworkElement Pin
chrislamb8427-May-13 9:49
memberchrislamb8427-May-13 9:49 
AnswerRe: Visibility' property was already registered by 'FrameworkElement Pin
Member 102718467-May-14 0:29
memberMember 102718467-May-14 0:29 
GeneralRe: Visibility' property was already registered by 'FrameworkElement Pin
Member 1168374123-Jul-15 5:50
memberMember 1168374123-Jul-15 5:50 
SuggestionConsider adding a workin Solution Pin
jtstanish21-Dec-11 9:23
memberjtstanish21-Dec-11 9:23 
GeneralMy vote of 4 Pin
jtstanish21-Dec-11 9:21
memberjtstanish21-Dec-11 9:21 
GeneralBug when Visibility is data bound Pin
poulin_julien7-Apr-10 4:01
memberpoulin_julien7-Apr-10 4:01 
GeneralRe: Bug when Visibility is data bound Pin
Arik Poznanski9-Apr-10 3:01
memberArik Poznanski9-Apr-10 3:01 
GeneralRe: Bug when Visibility is data bound [modified] Pin
poulin_julien9-Apr-10 3:06
memberpoulin_julien9-Apr-10 3:06 
GeneralA subtle bug Pin
alxxl23-Feb-10 9:54
memberalxxl23-Feb-10 9:54 
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 
AnswerRe: Will it work in a WEB app? Pin
Arik Poznanski16-Feb-10 6:56
memberArik Poznanski16-Feb-10 6:56 
It is intended for use in a WPF application, not WinForms.
It might also work in SilverLight applications.
Arik Poznanski

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