WPF: How To Animate Visibility Property?

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>    /// Supplies attached properties that provides visibility of animations
    /// <span class="code-SummaryComment"></summary>
</span>    public class VisibilityAnimation
    {
        public enum AnimationType
        {
            /// <span class="code-SummaryComment"><summary>
</span>            /// No animation
            /// <span class="code-SummaryComment"></summary>
</span>            None,

            /// <span class="code-SummaryComment"><summary>
</span>            /// Fade in / Fade out
            /// <span class="code-SummaryComment"></summary>
</span>            Fade
        }

        /// <span class="code-SummaryComment"><summary>
</span>        /// Animation duration
        /// <span class="code-SummaryComment"></summary>
</span>        private const int AnimationDuration = 300;

        /// <span class="code-SummaryComment"><summary>
</span>        /// List of hooked objects
        /// <span class="code-SummaryComment"></summary>
</span>        private static readonly Dictionary<FrameworkElement, bool> _hookedElements = 
            new Dictionary<FrameworkElement, bool>();

        /// <span class="code-SummaryComment"><summary>
</span>        /// Get AnimationType attached property
        /// <span class="code-SummaryComment"></summary>
</span>        /// <span class="code-SummaryComment"><param name="obj">Dependency object</param>
</span>        /// <span class="code-SummaryComment"><returns>AnimationType value</returns>
</span>        public static AnimationType GetAnimationType(DependencyObject obj)
        {
            return (AnimationType)obj.GetValue(AnimationTypeProperty);
        }

        /// <span class="code-SummaryComment"><summary>
</span>        /// Set AnimationType attached property
        /// <span class="code-SummaryComment"></summary>
</span>        /// <span class="code-SummaryComment"><param name="obj">Dependency object</param>
</span>        /// <span class="code-SummaryComment"><param name="value">New value for AnimationType</param>
</span>        public static void SetAnimationType(DependencyObject obj, AnimationType value)
        {
            obj.SetValue(AnimationTypeProperty, value);
        }

        /// <span class="code-SummaryComment"><summary>
</span>        /// Using a DependencyProperty as the backing store for AnimationType. 
        /// This enables animation, styling, binding, etc...
        /// <span class="code-SummaryComment"></summary>
</span>        public static readonly DependencyProperty AnimationTypeProperty = 
            DependencyProperty.RegisterAttached(
                "AnimationType",
                typeof(AnimationType),
                typeof(VisibilityAnimation),
                new FrameworkPropertyMetadata(AnimationType.None, 
                    new PropertyChangedCallback(OnAnimationTypePropertyChanged)));

        /// <span class="code-SummaryComment"><summary>
</span>        /// AnimationType property changed
        /// <span class="code-SummaryComment"></summary>
</span>        /// <span class="code-SummaryComment"><param name="dependencyObject">Dependency object</param>
</span>        /// <span class="code-SummaryComment"><param name="e">e</param>
</span>        private static void OnAnimationTypePropertyChanged(
            DependencyObject dependencyObject, 
            DependencyPropertyChangedEventArgs e)
        {
            FrameworkElement frameworkElement = dependencyObject as FrameworkElement;

            if (frameworkElement == null)
            {
                return;
            }

            // If AnimationType is set to True on this framework element, 
            if (GetAnimationType(frameworkElement) != AnimationType.None)
            {
                // Add this framework element to hooked list
                HookVisibilityChanges(frameworkElement);
            }
            else
            {
                // Otherwise, remove it from the hooked list
                UnHookVisibilityChanges(frameworkElement);
            }
        }

        /// <span class="code-SummaryComment"><summary>
</span>        /// Add framework element to list of hooked objects
        /// <span class="code-SummaryComment"></summary>
</span>        /// <span class="code-SummaryComment"><param name="frameworkElement">Framework element</param>
</span>        private static void HookVisibilityChanges(FrameworkElement frameworkElement)
        {
            _hookedElements.Add(frameworkElement, false);
        }

        /// <span class="code-SummaryComment"><summary>
</span>        /// Remove framework element from list of hooked objects
        /// <span class="code-SummaryComment"></summary>
</span>        /// <span class="code-SummaryComment"><param name="frameworkElement">Framework element</param>
</span>        private static void UnHookVisibilityChanges(FrameworkElement frameworkElement)
        {
            if (_hookedElements.ContainsKey(frameworkElement))
            {
                _hookedElements.Remove(frameworkElement);
            }
        }

        /// <span class="code-SummaryComment"><summary>
</span>        /// VisibilityAnimation static ctor
        /// <span class="code-SummaryComment"></summary>
</span>        static VisibilityAnimation()
        {
            // Here we "register" on Visibility property "before change" event
            UIElement.VisibilityProperty.AddOwner(
                typeof(FrameworkElement),
                new FrameworkPropertyMetadata(
                    Visibility.Visible, 
                    VisibilityChanged, 
                    CoerceVisibility));
        }

        /// <span class="code-SummaryComment"><summary>
</span>        /// Visibility changed
        /// <span class="code-SummaryComment"></summary>
</span>        /// <span class="code-SummaryComment"><param name="dependencyObject">Dependency object</param>
</span>        /// <span class="code-SummaryComment"><param name="e">e</param>
</span>        private static void VisibilityChanged(
            DependencyObject dependencyObject, 
            DependencyPropertyChangedEventArgs e)
        {
            // Ignore
        }

        /// <span class="code-SummaryComment"><summary>
</span>        /// Coerce visibility
        /// <span class="code-SummaryComment"></summary>
</span>        /// <span class="code-SummaryComment"><param name="dependencyObject">Dependency object</param>
</span>        /// <span class="code-SummaryComment"><param name="baseValue">Base value</param>
</span>        /// <span class="code-SummaryComment"><returns>Coerced value</returns>
</span>        private static object CoerceVisibility(
            DependencyObject dependencyObject, 
            object baseValue)
        {
            // Make sure object is a framework element
            FrameworkElement frameworkElement = dependencyObject as FrameworkElement;
            if (frameworkElement == null)
            {
                return baseValue;
            }

            // Cast to type safe value
            Visibility visibility = (Visibility)baseValue;

            // If Visibility value hasn't change, do nothing.
            // This can happen if the Visibility property is set using data binding 
            // and the binding source has changed but the new visibility value 
            // hasn't changed.
            if (visibility == frameworkElement.Visibility)
            {
                return baseValue;
            }

            // If element is not hooked by our attached property, stop here
            if (!IsHookedElement(frameworkElement))
            {
                return baseValue;
            }

            // Update animation flag
            // If animation already started, don't restart it (otherwise, infinite loop)
            if (UpdateAnimationStartedFlag(frameworkElement))
            {
                return baseValue;
            }

            // If we get here, it means we have to start fade in or fade out animation. 
            // In any case return value of this method will be Visibility.Visible, 
            // to allow the animation.
            DoubleAnimation doubleAnimation = new DoubleAnimation
            {
                Duration = new Duration(TimeSpan.FromMilliseconds(AnimationDuration))
            };

            // When animation completes, set the visibility value to the requested 
            // value (baseValue)
            doubleAnimation.Completed += (sender, eventArgs) =>
            {
                if (visibility == Visibility.Visible)
                {
                    // In case we change into Visibility.Visible, the correct value 
                    // is already set, so just update the animation started flag
                    UpdateAnimationStartedFlag(frameworkElement);
                }
                else
                {
                    // This will trigger value coercion again 
                    // but UpdateAnimationStartedFlag() function will reture true 
                    // this time, thus animation will not be triggered. 
                    if (BindingOperations.IsDataBound(frameworkElement, 
                        UIElement.VisibilityProperty))
                    {
                        // Set visiblity using bounded value
                        Binding bindingValue = 
                            BindingOperations.GetBinding(frameworkElement, 
                                UIElement.VisibilityProperty);
                        BindingOperations.SetBinding(frameworkElement, 
                            UIElement.VisibilityProperty, bindingValue);
                    }
                    else
                    {
                        // No binding, just assign the value
                        frameworkElement.Visibility = visibility;
                    }
                }
            };

            if (visibility == Visibility.Collapsed || visibility == Visibility.Hidden)
            {
                // Fade out by animating opacity
                doubleAnimation.From = 1.0;
                doubleAnimation.To = 0.0;
            }
            else
            {
                // Fade in by animating opacity
                doubleAnimation.From = 0.0;
                doubleAnimation.To = 1.0;
            }

            // Start animation
            frameworkElement.BeginAnimation(UIElement.OpacityProperty, doubleAnimation);

            // Make sure the element remains visible during the animation
            // The original requested value will be set in the completed event of 
            // the animation
            return Visibility.Visible;
        }

        /// <span class="code-SummaryComment"><summary>
</span>        /// Check if framework element is hooked with AnimationType property
        /// <span class="code-SummaryComment"></summary>
</span>        /// <span class="code-SummaryComment"><param name="frameworkElement">Framework element to check</param>
</span>        /// <span class="code-SummaryComment"><returns>Is the framework element hooked?</returns>
</span>        private static bool IsHookedElement(FrameworkElement frameworkElement)
        {
            return _hookedElements.ContainsKey(frameworkElement);
        }

        /// <span class="code-SummaryComment"><summary>
</span>        /// Update animation started flag or a given framework element
        /// <span class="code-SummaryComment"></summary>
</span>        /// <span class="code-SummaryComment"><param name="frameworkElement">Given framework element</param>
</span>        /// <span class="code-SummaryComment"><returns>Old value of animation started flag</returns>
</span>        private static bool UpdateAnimationStartedFlag(FrameworkElement frameworkElement)
        {
            bool animationStarted = (bool)_hookedElements[frameworkElement];
            _hookedElements[frameworkElement] = !animationStarted;

            return animationStarted;
        }
    }
}