WPF: Animate Visibility Property – Update

Tuesday, April 13, 2010

Back in this post I showed you how you can easily add a fade-in / fade-out effect to a UIElement that changes its Visibility property, using a simple attached property. Some people encountered a problem using this property when they bind the UIElement to a model which initially hides the control. Since the default value of the Visibility property is Visible, using the attached property created an unwanted fade-out animation when the application started. To fix this issue I added another attached property that allows the user to skip the first animation. Also, I’ve fixed a minor issue with the double animation...
no comments

WPF: How To Animate Visibility Property?

Monday, 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...