How to animate a Popup when it hides? - xaml

Question

i created a Popup Style for using in my windows 8.1 application. And i applied PopupThemeTransition to it's ChildTransitions Property.
<Style x:Key="AnimatedPopupStyle" TargetType="Popup">
<Setter Property="IsLightDismissEnabled" Value="False"/>
<Setter Property="ChildTransitions">
<Setter.Value>
<TransitionCollection>
<PopupThemeTransition/>
</TransitionCollection>
</Setter.Value>
</Setter>
</Style>
My problem is that it animates when it Opens & not animating when closing. What to do with that for animating the content on hiding ? Do i want to create a Custom Popup control?
NB: I know that PopInThemeAnimation & PopOutThemeAnimation is there . But don't know how to use it on this condition ?

Answer 1

This is not native to the Popup because they typically do not have an exit animation. Having said that, there's no reason you can't add an exit animation to a Popup control.
Try this:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.Resources>
<Storyboard x:Name="ShowPopup">
<PopInThemeAnimation Storyboard.TargetName="MyPopup" />
</Storyboard>
<Storyboard x:Name="HidePopup">
<PopOutThemeAnimation Storyboard.TargetName="MyPopup" />
</Storyboard>
</Grid.Resources>
<Popup x:Name="MyPopup" IsOpen="True"
HorizontalAlignment="Center" VerticalAlignment="Center">
<Popup.Transitions>
<TransitionCollection>
<PopupThemeTransition />
</TransitionCollection>
</Popup.Transitions>
<Grid Height="200" Width="200" Background="Red">
<StackPanel>
<Button Content="Hide (Native)" HorizontalAlignment="Center">
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="Click">
<Core:ChangePropertyAction
PropertyName="IsOpen"
TargetObject="{Binding ElementName=MyPopup}" />
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
</Button>
<Button Content="Hide (Storyboard)" HorizontalAlignment="Center">
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="Click">
<Media:ControlStoryboardAction
Storyboard="{StaticResource HidePopup}"/>
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
</Button>
</StackPanel>
</Grid>
</Popup>
<StackPanel>
<Button Content="Show Popup (Native)" HorizontalAlignment="Left" VerticalAlignment="Top">
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="Click">
<Core:ChangePropertyAction
TargetObject="{Binding ElementName=MyPopup}"
PropertyName="IsOpen" Value="True"/>
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
</Button>
<Button Content="Show Popup (Storyboard)" HorizontalAlignment="Left" VerticalAlignment="Top">
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="Click">
<Core:ChangePropertyAction
TargetObject="{Binding ElementName=MyPopup}"
PropertyName="IsOpen" Value="True"/>
<Media:ControlStoryboardAction
Storyboard="{StaticResource ShowPopup}"/>
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
</Button>
</StackPanel>
</Grid>
Using these:
xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"
xmlns:Core="using:Microsoft.Xaml.Interactions.Core"
xmlns:Media="using:Microsoft.Xaml.Interactions.Media"
Best of luck!