Wie animiere ich ein Popup, wenn es sich versteckt?

Question

Ich habe eine Popup Style für die Verwendung in meiner Windows 8.1-Anwendung erstellt. Und ich habe PopupThemeTransition auf seine ChildTransitions Eigenschaft angewendet.

<Style x:Key="AnimatedPopupStyle" TargetType="Popup"> 
    <Setter Property="IsLightDismissEnabled" Value="False"/> 
    <Setter Property="ChildTransitions"> 
     <Setter.Value> 
      <TransitionCollection> 
       <PopupThemeTransition/> 
      </TransitionCollection> 
     </Setter.Value> 
    </Setter> 
</Style> 

Mein Problem ist, dass es beseelt, wenn es & öffnet nicht beim Schließen Animieren. Was damit zu tun, um den Inhalt beim Verstecken zu animieren? Soll ich ein benutzerdefiniertes Popup-Steuerelement erstellen?

NB: Ich weiß, dass PopInThemeAnimation & PopOutThemeAnimation ist da. Aber wissen Sie nicht, wie man es unter dieser Bedingung benutzt?

Answer 1

Dies ist auf das Popup nicht heimisch, weil sie in der Regel nicht über eine Exit-Animation haben. Abgesehen davon gibt es keinen Grund, warum Sie einem Popup-Steuerelement keine Exit-Animation hinzufügen können.

Versuchen Sie folgendes:

<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> 

diese verwenden:

xmlns:Interactivity="using:Microsoft.Xaml.Interactivity" 
xmlns:Core="using:Microsoft.Xaml.Interactions.Core" 
xmlns:Media="using:Microsoft.Xaml.Interactions.Media" 

Best of luck!