marko devcic

  • github:
    deva666
  • email:
    madevcic {at} gmail.com

Animating WPF ContentControl Part 2

Posted on 15 August 2014

In part 1 we ended with a nice custom ContentControl that animates whenever the content changes.

In this part we are going to add some more usability to it. Our custom content control is going to fade in or out whenever it's visibility changes. This comes in handy if you have a part of the UI that changes visibility, e.g. some settings group becomes enabled and then it slides in to view or becomes disabled and then slides out.

Our control already has storyboards for sliding in/out defined, all we have to do is add a new DependancyProperty that will be bound to View Model's boolean Visibility On/Off property.

Here's the new code to our class:

public bool FadeVisibility
        {
            get { return (bool)GetValue(FadeVisibilityProperty); }
            set { SetValue(FadeVisibilityProperty, value); }
        }

public static readonly DependencyProperty FadeVisibilityProperty =
            DependencyProperty.Register("FadeVisibility", typeof(bool), typeof(FadingContentControl), new PropertyMetadata(true, FadeVisibilityCallBack));

private static void FadeVisibilityCallBack(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            FadingContentControl control = (FadingContentControl)d;
            control.ChangeVisibility((bool)e.NewValue);
        }

private void ChangeVisibility(bool visible)
        {
            if (!visible)
            {
                Storyboard fadeOutClone = _fadeOut.Clone();
                fadeOutClone.Completed += (s, e) => { this.Visibility = System.Windows.Visibility.Collapsed; };
                fadeOutClone.Begin(this);
            }
            else
            {
                Storyboard fadeInClone = _fadeIn.Clone();
                this.Visibility = System.Windows.Visibility.Visible;
                fadeInClone.Begin(this);
            }
        }

Whenever our FadeVisibility changes, FadeVisibilityCallback get called which starts the animation and hides/shows the control.

Here's the complete code for a view implementing our custom content control:

<UserControl x:Class="VM.Views.SettingsView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:controls="clr-namespace:VM.Controls"
             xmlns:views="clr-namespace:VM.Views"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300"
             Padding="40">
    <StackPanel Orientation="Vertical"
                >
        <StackPanel Orientation="Horizontal">
            <Label Content="Settings enabled:" />
            <CheckBox IsChecked="{Binding SettingsEnabled}" VerticalAlignment="Center"/>
        </StackPanel>
        <controls:FadingContentControl FadeVisibility="{Binding SettingsEnabled}">
            <views:PrefrenceView />
        </controls:FadingContentControl>
    </StackPanel>
</UserControl>

And the view model has SettingsEnabled property that the control is binding to.

public SettingsViewModel()
        {
            SettingsEnabled = true;
        }

private bool _settingsEnabled;

public bool SettingsEnabled
        {
            get
            {
                return _settingsEnabled;
            }
            set
            {
                _settingsEnabled = value;
                OnPropertyChanged("SettingsEnabled");
            }
        }

Download the complete Visual studio project here.

Browse the full source code on Bitbucket.