Animate fading visibility of app bar icons in WinRT apps

Question

All of the default Windows 8 apps use the same fade animations for their app bar icons when showing and hiding them (based on context changes). This page talks about setting the visibility of app bar icons, but makes no mention of animating them.

I'd like my app bar icons to use the same animation. When an icon becomes hidden, it should fade to transparent and then collapse, and the reverse should happen when becoming visible. What is the best way to achieve this animation?

Answer 1

You're looking for something similar to this, you'll just Fire off your storyboard based on say a Mouse down event or some value. Just a warning, these values provided below are a rough example, you WILL need to tweek them around to get exactly what you want. You could throw the Storyboard as a resource a number of places based on how you're organizing your code currently anyway. Hope it helps.

<!-- IN -->
<Storyboard x:Name="FadeButtonIn">
  <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
                                 Storyboard.TargetName="YourButtonObject">
    <EasingDoubleKeyFrame KeyTime="0:0:0.6"
                          Value="0" />
    <EasingDoubleKeyFrame KeyTime="0:0:1.6"
                          Value="1" />
  </DoubleAnimationUsingKeyFrames>
  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="YourButtonObject"
                                 Storyboard.TargetProperty="(UIElement.Visibility)">
    <DiscreteObjectKeyFrame KeyTime="0">
      <DiscreteObjectKeyFrame.Value>
        <Visibility>Visible</Visibility>
      </DiscreteObjectKeyFrame.Value>
    </DiscreteObjectKeyFrame>
  </ObjectAnimationUsingKeyFrames>
</Storyboard>
<!-- OUT -->
<Storyboard x:Name="FadeButtonOut">
  <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
                                 Storyboard.TargetName="YourButtonObject">
    <EasingDoubleKeyFrame KeyTime="0:0:0.6"
                          Value="1" />
    <EasingDoubleKeyFrame KeyTime="0:0:1.6"
                          Value="0" />
  </DoubleAnimationUsingKeyFrames>
  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="YourButtonObject"
                                 Storyboard.TargetProperty="(UIElement.Visibility)">
    <DiscreteObjectKeyFrame KeyTime="0">
      <DiscreteObjectKeyFrame.Value>
        <Visibility>Collapsed</Visibility>
      </DiscreteObjectKeyFrame.Value>
    </DiscreteObjectKeyFrame>
  </ObjectAnimationUsingKeyFrames>
</Storyboard>

Answer 2

If you are using the MVVM pattern here is a helper class that I've wrote:

public class FadeAnimatedVisibility
{
    public static readonly DependencyProperty IsVisibleProperty = DependencyProperty.RegisterAttached(
        "IsVisible", typeof(bool), typeof(FadeAnimatedVisibility), new PropertyMetadata(true, IsVisiblePropertyChanged));

    private static void IsVisiblePropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var uiElement = d as UIElement;
        if (uiElement == null) return;

        var visibility = e.NewValue as bool?;

        if (visibility == true)
        {
            Storyboard storyboard = new Storyboard();
            var fadeIn = new FadeInThemeAnimation();

            Storyboard.SetTarget(fadeIn, uiElement);

            storyboard.Children.Add(fadeIn);
            storyboard.Begin();
            uiElement.Visibility = Visibility.Visible;
        }
        else
        {
            Storyboard storyboard = new Storyboard();
            var fadeOut = new FadeOutThemeAnimation();

            Storyboard.SetTarget(fadeOut, uiElement);

            storyboard.Children.Add(fadeOut);
            storyboard.Begin();
            uiElement.Visibility = Visibility.Collapsed;
        }
    }

    public static void SetIsVisible(DependencyObject element, bool value)
    {
        element.SetValue(IsVisibleProperty, value);
    }

    public static bool GetIsVisible(DependencyObject element)
    {
        return (bool)element.GetValue(IsVisibleProperty);
    }
}

And XAML use:

<StackPanel helpers:FadeAnimatedVisibility.IsVisible="{Binding YourProperty}"/>

Answer 3

You can modify the storyboard to add animation for the opacity property of the button followed by setting the visibility to collapsed. You can use Blend to make it easy.