locked
No transition animation in FlipView.

    Question

  • My app is a C++ project.

    I have added a FlipView control into my xaml as below:

    <FlipView x:Name="flipView1" SelectionChanged="FlipView_SelectionChanged">
        <Image Source="Assets/Logo.png" />
        <Image Source="Assets/SplashScreen.png" />
        <Image Source="Assets/SmallLogo.png" />
    </FlipView>

    When I click the navigation button, no transition animation.

    But the FlipView sample downloaded from http://code.msdn.microsoft.com/windowsapps/FlipView-control-sample-18e434b4 has transition animation.

    How to add transition animation to my app when click the navigation button in FlipView?

    Thank you.

    Tuesday, September 04, 2012 7:06 AM

Answers

  • Hi,

    Different from the JS sample, the XAML need to add animation in selection event. Please follow this sample codes.

    void flipview::MainPage::flipView1_SelectionChanged_1(Platform::Object^ sender, Windows::UI::Xaml::Controls::SelectionChangedEventArgs^ e)
    {
    	FlipView^ flipview =safe_cast<FlipView^>(sender);
    	if (e->AddedItems->Size > 0)
    	{
    		FlipViewItem^ initem =safe_cast<FlipViewItem^>( flipview->ItemContainerGenerator->ContainerFromItem(e->AddedItems->GetAt(0))) ;
    		if (initem != nullptr)
    		{
    			Storyboard^ sb = ref new Storyboard();
    			DoubleAnimation^ da = ref new DoubleAnimation();
    			da->From=1.0;
    			da->To=0.0;
    			da->AutoReverse=true;
    			Windows::Foundation::TimeSpan ts;
    			ts.Duration=5000000;
    			Windows::UI::Xaml::Duration dur(ts);
    			da->Duration=dur;
    			sb->Children->Append(da);
    			Storyboard::SetTargetProperty(sb, "Opacity");
    			Storyboard::SetTarget(sb, initem);
    			sb->Begin();
    		}
    	}
    }

    Best regards,
    Jesse


    Jesse Jiang [MSFT]
    MSDN Community Support | Feedback to us

    • Marked as answer by ytshe Wednesday, September 05, 2012 7:16 AM
    Tuesday, September 04, 2012 8:07 AM

All replies

  • Hi,

    Different from the JS sample, the XAML need to add animation in selection event. Please follow this sample codes.

    void flipview::MainPage::flipView1_SelectionChanged_1(Platform::Object^ sender, Windows::UI::Xaml::Controls::SelectionChangedEventArgs^ e)
    {
    	FlipView^ flipview =safe_cast<FlipView^>(sender);
    	if (e->AddedItems->Size > 0)
    	{
    		FlipViewItem^ initem =safe_cast<FlipViewItem^>( flipview->ItemContainerGenerator->ContainerFromItem(e->AddedItems->GetAt(0))) ;
    		if (initem != nullptr)
    		{
    			Storyboard^ sb = ref new Storyboard();
    			DoubleAnimation^ da = ref new DoubleAnimation();
    			da->From=1.0;
    			da->To=0.0;
    			da->AutoReverse=true;
    			Windows::Foundation::TimeSpan ts;
    			ts.Duration=5000000;
    			Windows::UI::Xaml::Duration dur(ts);
    			da->Duration=dur;
    			sb->Children->Append(da);
    			Storyboard::SetTargetProperty(sb, "Opacity");
    			Storyboard::SetTarget(sb, initem);
    			sb->Begin();
    		}
    	}
    }

    Best regards,
    Jesse


    Jesse Jiang [MSFT]
    MSDN Community Support | Feedback to us

    • Marked as answer by ytshe Wednesday, September 05, 2012 7:16 AM
    Tuesday, September 04, 2012 8:07 AM
  • Jesse:

    Thank you for reply.

    If I add your codes to selection changed event handler, when I swap item by finger touch, this transition effect also be taken.

    It seems the JS's transition animation is changing the margin of FlipViewItem?

    Thanks.

    Tuesday, September 04, 2012 9:59 AM
  • Jesse:

    Another question:

    How to hide the navigation button? How to prevent the user to switch page by finger touch?

    Thank you.

    Wednesday, September 05, 2012 7:21 AM
  • Is it possible to get that as actual C# code? having trouble parsing it :/
    Tuesday, September 11, 2012 9:20 PM
  • this is c++ code. here is the same for C#

    if (e.AddedItems.Count > 0) {
                    FlipViewItem initem = flipView.ItemContainerGenerator.ContainerFromItem(e.AddedItems[0]) as FlipViewItem;
                    if (initem != null) {
                        Storyboard sb = new Storyboard();
                        DoubleAnimation da = new DoubleAnimation();
                        da.From = 1.0;
                        da.To = 0.0;
                        da.AutoReverse = true;
                        Duration dur = new Duration(TimeSpan.FromMilliseconds(500));
                        da.Duration = dur;
                        sb.Children.Add(da);
                        Storyboard.SetTargetProperty(sb, "Opacity");
                        Storyboard.SetTarget(sb, initem);
                        sb.Begin();
                    }
                }

    • Proposed as answer by netedk Monday, October 22, 2012 6:09 PM
    Wednesday, September 12, 2012 1:39 PM
  • The code is good an working, but changes are coming and

    flipView.ItemContainerGenerator.ContainerFromItem

    has been marked obsolete. Instead use:

    flipView.ContainerFromItem

    And I have changed the animation (reversed it), removed auto-reverse as well and increased the duration:

     private void FlipView_SelectionChanged(object sender, SelectionChangedEventArgs e) {
    
                var flipView = sender as FlipView;
    
                if (e.AddedItems.Count > 0) {
                    FlipViewItem initem = flipView.ContainerFromItem(e.AddedItems[0]) as FlipViewItem;
    
                    if (initem != null) {
                        Storyboard sb = new Storyboard();
                        DoubleAnimation da = new DoubleAnimation();
                        da.From = 0.0;
                        da.To = 1.0;
                        da.AutoReverse = false;
                        Duration dur = new Duration(TimeSpan.FromMilliseconds(600));
                        da.Duration = dur;
                        sb.Children.Add(da);
                        Storyboard.SetTargetProperty(sb, "Opacity");
                        Storyboard.SetTarget(sb, initem);
                        sb.Begin();
                    }
                }
            }
    Ilija

    Monday, October 27, 2014 4:01 PM