Software and UX

This post is sort of a future reference for myself. I needed to animate the Visibility property as part of a larger Storyboard, and it wasn’t immediately apparent how to do it. It took a bit of effort to find the solution on Google, so I am posting the solution in hope that it will make someone else’s life easier as well.

If you have something like the following, for an object that is usually hidden:

<Setter Property="Visibility" Value="Visible" />

and you want to fade in the object instead of suddenly showing it, you will need to convert the Setter into an Animation action in a Storyboard. You are probably aware of the DoubleAnimation and BooleanAnimationUsingKeyFrames classes already. To animate the Visibility property, however – which is an enum –, the solution is not immediately apparent: you need to use ObjectAnimationUsingKeyFrames:

<Storyboard>
    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility">
        <DiscreteObjectKeyFrame KeyTime="00:00:00">
            <DiscreteObjectKeyFrame.Value>
                <Visibility>Visible</Visibility>
            </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
    </ObjectAnimationUsingKeyFrames>

    <DoubleAnimation Duration="00:00:01" Storyboard.TargetProperty="Opacity" To="1" />
</Storyboard>

There you go. The animation will start by making the object visible, and then animating it to 100% opaque. Hope this helps you!