How to programmatically navigate in a FlipView with swipe animations

Question

The Windows Dev Center states regarding the UseTouchAnimationsForAllNavigation property:

The XAML FlipView control supports three modes of navigation; touch-based, button-based and programmatic. When a user navigates by touch, the FlipView items scroll smoothly into view. When you set this property to true, the same navigation animation occurs whether the navigation is touch-based, button-based and programmatic.

I'm currently navigating from my page's code behind by assigning the SelectedItem property of the FlipView:

FlipView.SelectedItem = FlipView.Items.Last();

However, the swipe animation does not show. How can I enable it?

Answer 1

Meanwhile, I was able to solve this problem. I have a button that triggers the navigation to the next FlipViewItem. This button however was placed in a FlipViewItem.

With my setup (touch device), nothing happend. Then I tried clicking the button with the mouse and it worked. After I disabled UseTouchAnimationsForAllNavigation, it also worked using touch input. In my tests, I placed the button outside of the FlipView and it did work using animations.

Here's the problem: When tapping the button, the navigation animation tries to start (SelectedIndex is set correctly), but stopped because the user blocks the animation by still touching the button. So, the navigation is cancelled and SelectionChanged reports the current page.

The solution is to set ManipulationMode of the Button to All. After that, you can't flip the FlipViewItem when touching the button, but the animation executes and it works like charm.

Answer 2

I solved the same problem in a different way. As Chliebel said, it is because your finger is still touching the control, so flipview cannot animate. So I gave a small break after before navigating. By the time user would have released the finger and it works !!!

        await Task.Delay(100);
        flipView.SelectedIndex += 1;

Answer 3

For me, ChristiaanV's answer has helped:

Animation only occurs when you navigate to the previous or next item in the FlipView.

So I've set up a while loop to set the selected index to the previous / next one until I reach the desired page.

Example Code:

If you'd like to reach the first page:

while(flipView.SelectedIndex > 0)
{
    flipView.SetValue(FlipView.SelectedIndexProperty, flipView.SelectedIndex - 1);
}

Answer 4

Here's a compact solution I found, similar to Bhawk1990's:

//nb is the index you wish to get to.

if (nb > flipview.SelectedIndex)
    while (flipview.SelectedIndex != nb)
        flipview.SelectedIndex++;
else if (nb < flipview.SelectedIndex)
    while (flipview.SelectedIndex != nb)
        flipview.SelectedIndex--;

Answer 5

I spent a couple of days figuring out why touch animation does not work when I programmatically change FlipView selected item when UseTouchAnimationsForAllNavigation="True".

I found a setting which controls animation machine wide. Somehow this setting was disabled:

Settings->Visual options->Play animations in Windows