locked
How to animate a Popup when it hides? RRS feed

  • Question

  • i created a Popup Style for using in my windows 8.1 application. And i appliedPopupThemeTransition to it's ChildTransitions Property.

    <Style x:Key="AnimatedPopupStyle" TargetType="Popup">
        <Setter Property="IsLightDismissEnabled" Value="False"/>
        <Setter Property="VerticalAlignment" Value="Bottom"/>
        <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 ?

    Tuesday, January 14, 2014 11:58 AM

Answers

  • From the documentation:
    http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.media.animation.popupthemetransition.aspx

    PopupThemeTransition class

    Provides the animated transition behavior that applies to pop-in components of controls (for example, tooltip-like UI on an object) as they appear.

    There's a sample for using PopInThemeAnimation and PopOutThemeAnimation here:
    http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.media.animation.popinthemeanimation.aspx


    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Tuesday, January 14, 2014 3:52 PM
    Moderator
  • Try using visual state to apply these (PopInThemeAnimation & PopOutThemeAnimation) animations. Check this out for more details

    <VisualState x:Name="Closed">
                                    <Storyboard>
                                        <!-- Run a PopOutThemeAnimation when ToolTip is closed. -->
                                        <PopOutThemeAnimation TargetName="LayoutRoot"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Opened">
                                    <Storyboard>
                                        <!-- Run a PopInThemeAnimation when ToolTip is opened. -->
                                        <PopInThemeAnimation 
                                            FromVerticalOffset="{Binding TemplateSettings.FromVerticalOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}" 
                                            FromHorizontalOffset="{Binding TemplateSettings.FromHorizontalOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}" 
                                            TargetName="LayoutRoot"/>
                                    </Storyboard>
                                </VisualState>

    Other way is to change the opacity and translation using DoubleAnimation.


    Thanks, Sachin


    Tuesday, January 14, 2014 3:53 PM

All replies

  • From the documentation:
    http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.media.animation.popupthemetransition.aspx

    PopupThemeTransition class

    Provides the animated transition behavior that applies to pop-in components of controls (for example, tooltip-like UI on an object) as they appear.

    There's a sample for using PopInThemeAnimation and PopOutThemeAnimation here:
    http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.media.animation.popinthemeanimation.aspx


    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Tuesday, January 14, 2014 3:52 PM
    Moderator
  • Try using visual state to apply these (PopInThemeAnimation & PopOutThemeAnimation) animations. Check this out for more details

    <VisualState x:Name="Closed">
                                    <Storyboard>
                                        <!-- Run a PopOutThemeAnimation when ToolTip is closed. -->
                                        <PopOutThemeAnimation TargetName="LayoutRoot"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Opened">
                                    <Storyboard>
                                        <!-- Run a PopInThemeAnimation when ToolTip is opened. -->
                                        <PopInThemeAnimation 
                                            FromVerticalOffset="{Binding TemplateSettings.FromVerticalOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}" 
                                            FromHorizontalOffset="{Binding TemplateSettings.FromHorizontalOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}" 
                                            TargetName="LayoutRoot"/>
                                    </Storyboard>
                                </VisualState>

    Other way is to change the opacity and translation using DoubleAnimation.


    Thanks, Sachin


    Tuesday, January 14, 2014 3:53 PM