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:

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

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

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

privatevoid 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:

<UserControlx: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"><StackPanelOrientation="Vertical"><StackPanelOrientation="Horizontal"><LabelContent="Settings enabled:"/><CheckBoxIsChecked="{Binding SettingsEnabled}"VerticalAlignment="Center"/></StackPanel><controls:FadingContentControlFadeVisibility="{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;
        }

privatebool _settingsEnabled;

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

Download the complete Visual studio project here.

Browse the full source code on Bitbucket.