WPF: How To Animate Visibility Property?

February 8, 2010

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...
5 comments