locked
Adding entrance transition to a flipview item RRS feed

  • Question

  • How to add a EntranceThemeTransition to the Image elements inside a FlipView so that each image appears with EntranceThemeTransition when pages are flipped? Adding ItemContainerTransitions as below would add EntranceThemeTransition to the flipview when it is first displayed not when the pages are flipped. Thx

     <FlipView.ItemContainerTransitions>
                        <TransitionCollection>
                             <EntranceThemeTransition FromHorizontalOffset="2000"/>
                        </TransitionCollection>
                        </FlipView.ItemContainerTransitions>

    Sunday, August 18, 2013 8:32 AM

Answers

  • Hi Knewron,

    It is a correct behavior, if you read the first line of EntranceThemeTransition class document, there are some words:

    Provides the animated transition behavior on controls when they first appear. You can use this on individual objects or on containers of objects. In the latter case, child elements will animate into view in sequence rather than all at the same time.

    Best Regards,

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Monday, August 19, 2013 1:15 AM
    Moderator
  • Hi Knewron,

    Basically the FlipView is a ScrollViewer, so the animation from page to page are just scrolling.

    The scenario you apply the EntranceThemeTransation should be like: the Flipview load all the images when the Flipview is loaded, and all the images finished the transation when first time loaded. That's why your EntranceThemeTransition does not work.

    And you could try other animations for instance the opacity transform. Hope it can help you.

    Best Regards,

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Monday, August 19, 2013 11:28 AM
    Moderator

All replies

  • Hi Knewron,

    It is a correct behavior, if you read the first line of EntranceThemeTransition class document, there are some words:

    Provides the animated transition behavior on controls when they first appear. You can use this on individual objects or on containers of objects. In the latter case, child elements will animate into view in sequence rather than all at the same time.

    Best Regards,

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Monday, August 19, 2013 1:15 AM
    Moderator
  • So, what is the way in which we can add EntranceThemeTransition to images inside that flipview so that each image comes with EntranceThemeTransition when pages are flipped? In the code below, the images appears suddenly. 

            <FlipView x:Name="flipview" HorizontalAlignment="Left" Margin="485,254,0,0" VerticalAlignment="Top">
                <Image Source="Assets/one.jpg"></Image>
                <Image Source="Assets/Two.jpg">
                    <Image.Transitions>
                        <TransitionCollection>
                            <EntranceThemeTransition FromHorizontalOffset="2000"></EntranceThemeTransition>
                        </TransitionCollection>
                    </Image.Transitions>
                </Image>
                <Image Source="Assets/Three.jpg"></Image>
            </FlipView>

    I guess adding EntranceThemeTransition to FlipviewItem can address this, but it doesnt work either when tried. Any idea what is going wrong? Tried adding EntranceThemeTransition to ItemContainer of Flipview too in styles, did not work.

    Thanks.

    Monday, August 19, 2013 1:44 AM
  • Hi Knewron,

    Basically the FlipView is a ScrollViewer, so the animation from page to page are just scrolling.

    The scenario you apply the EntranceThemeTransation should be like: the Flipview load all the images when the Flipview is loaded, and all the images finished the transation when first time loaded. That's why your EntranceThemeTransition does not work.

    And you could try other animations for instance the opacity transform. Hope it can help you.

    Best Regards,

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Monday, August 19, 2013 11:28 AM
    Moderator