The Visibility pattern is way of overriding the base Visibility of a control and adding a custom animation.  There are a couple ways of hiding a control on screen 1.) setting the Opacity to 0 or 2.) setting the Visibility of the object to Collapsed.  Depending on the situation, the latter is probably a preferred way of hiding an object because once collapsed, the space for that control is freed up.

A common problem I’ve run into when toggling the Visibility of an UserControl, is it “jumps” states.  Meaning there’s no transition between Visible and Collapsed.  The “jump” makes sense, because it’s like an on/off switch.  The problem is, I want a smooth transition between states, and the way to accomplish this is by implementing the below Visibility pattern on your UserControl.

Before getting into the code, I must point out, implementing this pattern does not greatly effect the developer/designer workflow.  As designer can open Expression Blend, create/tweak the hide and show animations and he/she doesn’t have to touch the code. 

XAML

In UserControl’s XAML, add two Storyboards, one for hiding the control and one for showing it.  The below Storyboards only animation Opacity; however you could also add animations for the ScaleX and ScaleY (doing this achieves the opening and closing windows effects in Vista).

C#

The below code blocks do the following:

• Register the hide and show animations to HideStoryboard and ShowStoryboard respectively,
• Overrides the base visibility,
• Adds an event VisibilityChanged – This event fires after the animation is complete.  This importance of this event can not be overstated.  If your hide/show animations are long, you will want to listen to this event before doing anything else.
• Finally, the ShowStoryboard setter has logic to register and unregister the Completed event.