What the...?

Something bad happened

We're not sure what, but we have a few guesses.

Problem: Object reference not set to an instance of an object.
Ticket: 7864836
Server: Web04
WPF: How To Animate Visibility Property? - CodeProject Click here to Skip to main content
11,715,022 members (73,422 online)
Click here to Skip to main content

WPF: How To Animate Visibility Property?

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

 
GeneralMy vote of 4 Pin
jtstanish21-Dec-11 9:21
memberjtstanish21-Dec-11 9:21 

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