How to make ProgressIndicator to fade out?

Question

In my WP8 application I use a ProgressIndicator and I'd like it to fade out before making it invisible. I can't find any documentation describing how I can do that, the only exposed property of ProgressIndicator is IsVisible which does not provide any animation.

Yet in some applications I can clearly see progress bar fading out.
So how can I make it fade out?

Answer 1

Unfortunately you can't animate the Shell components of WP7/WP8 beyond their default animations. As ProgressIndicator & SystemTray are part of the Shell UI (alongside with ApplicationBar, MessageBox and others) you'll have to settle for the buit-in transitions.

If this really troubles you, you can always recreate the ProgressIndicator exprience with a managed ProgressBar as part of your app's <Frame /> Template.

Answer 2

Take a look at the DoubleAnimation class on msdn

<StackPanel>
    <StackPanel.Resources>
        <Storyboard x:Name="myStoryboard">
            <DoubleAnimation
          Storyboard.TargetName="MyProgressBar"
          Storyboard.TargetProperty="Opacity"
          From="1.0" To="0.0" Duration="0:0:5" 
          Completed="DisableMyProgressBar"/>
        </Storyboard>
    </StackPanel.Resources>

    <ProgressBar x:Name="MyProgressBar"  />

</StackPanel>

In the code behind trigger the animation when your processing is complete.

private void StopProgressBar()
{
     myStoryboard.Begin();
}

You will want to disable the progress bar and reset its opacity after it fades out, so use the Completed event of the Storyboard to reset these properties.

Timeline.Completed on msdn

private void DisableMyProgressBar(object sender, EventArgs e)
{
    MyProgressBar.IsEnabled = false;
    MyProgressBar.Opacity = 1;
}