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>