dex3703
0
Looking for help on how to animate the entrance/exit of a Popup. Haven't found any examples specific to using a StoryBoard for this--does anyone know of one?
I found this question: Can't get any Transitions to work with Popup in UWP. An answer there links to some intriguing articles, which leads to Animating pop-up UI. There's a link to a "XAML personality animations sample", which shows how to use a StoryBoard to customize the animation, but it looks like that sample is gone.
The sample you mentioned is a Windows 8 sample. You could now find it here:XAML personality animations sample.
If you want to animate the PopUp, you will need to add the PopInThemeAnimation and PopOutThemeAnimation in the resources of the PopUp. Then call the animation to begin when you show the PopUp. I've made a simple demo about this.
XAML:
<Grid>
<StackPanel>
<Button Content="Show Popup (using Offset)" Click="ShowPopupOffsetClicked" ToolTipService.ToolTip="Simple ToolTip"/>
</StackPanel>
<Popup VerticalOffset="100" HorizontalOffset="100" x:Name="StandardPopup">
<!--add the animataion for PopUp-->
<Popup.Resources>
<Storyboard x:Name="PopInStoryboard">
<PopInThemeAnimation Storyboard.TargetName="StandardPopup" FromHorizontalOffset="500"/>
</Storyboard>
<Storyboard x:Name="PopOutStoryboard">
<PopOutThemeAnimation Storyboard.TargetName="StandardPopup" />
</Storyboard>
</Popup.Resources>
<Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}"
Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
BorderThickness="2" Width="200" Height="200">
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock Text="Simple Popup" FontSize="24.667" HorizontalAlignment="Center"/>
<Button Content="Close" Click="ClosePopupClicked" HorizontalAlignment="Center"/>
</StackPanel>
</Border>
</Popup>
</Grid>
Code-behind:
private void ClosePopupClicked(object sender, RoutedEventArgs e)
{
//disappear
PopOutStoryboard.Begin();
}
// Handles the Click event on the Button on the page and opens the Popup.
private void ShowPopupOffsetClicked(object sender, RoutedEventArgs e)
{
PopInStoryboard.Begin();
// open the Popup if it isn't open already
if (!StandardPopup.IsOpen) { StandardPopup.IsOpen = true; }
}