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.

Answer 1

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

Answer 2

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.

Answer 3

Jesse:

Another question:

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

Thank you.

Answer 4

Is it possible to get that as actual C# code? having trouble parsing it :/

Answer 5

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();
                }
            }

Answer 6

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