How restart the animation in UWP using Visible property? - xaml

Question

In a UWP app, I show an error bar in the bottom of the Window, like Mail app of Windows 10. The idea is when I change the Visibility to Collapsed, the animation would start.
The animation only works once, when the window is created. I would like to trigger the animation each time that Visibility changes from Visible to Collapsed. The XAML code is:
<StackPanel Grid.Row="1" Canvas.ZIndex="10" Background="{StaticResource BackError}" VerticalAlignment="Bottom" Name="NotificationStackPanel" >
<StackPanel.Transitions>
<TransitionCollection>
<PaneThemeTransition Edge="Bottom"/>
</TransitionCollection>
</StackPanel.Transitions>
<TextBlock VerticalAlignment="Center" Foreground="White" Margin="20" Name="NotificationText"/>
</StackPanel>
My workaround for now is removing the entire StackPanel and recreating it again, it works but it seems too ugly.

Answer 1

PaneThemeTransition is a transition animation. Usually we use panel animations (PaneThemeTransition) to show UI that slides a significant distance into the screen, such as a task pane or a custom soft keyboard.
Transition animations have built-in triggers (the transition) that can run automatically when UI elements are added, removed, reordered, and so on. Transition animations are simple to apply. But we do not have much control over the timing and order of the animation effects. 
To restart the panel animation, you can remove the StackPanel form its parent element and then add it again like:
private bool isVisible = true;
private void ChangeVisibility()
{
    if (isVisible)
    {
        //Root is a Grid which is the parent element of NotificationStackPanel
        Root.Children.Remove(NotificationStackPanel);
    }
    else
    {
        Root.Children.Add(NotificationStackPanel);
    }
    isVisible = !isVisible;
}