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?

Cambell

Not sure if this helps, but my experience is that only the smooth navigation animation occurs when you select the item in the list 'next' to the selecteditem. – Judicative

I already tried that. How do you navigate to the next item? – Cambell

In my case I have a list of thumbnails showing al the items and when i select the thumbnail next to the current selecteditem it navigating with the animation, if I select one further than the selecteditem it just comes to the screen without any animation. – Judicative

Could you share your code that triggers the navigation? – Cambell

var index = dataContext.ProductDetails.Media.IndexOf(media); ImageFlipView.SelectedIndex = index; – Judicative

It doesn't navigate when I change SelectedIndex... it's really weird. I don't make use of data binding, maybe that's the reason. – Cambell

Do you have a solution to share? – Judicative

Unfortunately not... But I just noticed that when I set UseTouchAnimationsForAllNavigation to false, it works. – Cambell

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.

Cambell

Just FYI and everybody who might come across this: This still applies for Windows 10 Universal apps. – Gertrude

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;

Ralphralston

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

Bengt

well, this would trigger back animation, so it wouldn't be desired behaviour. but it's a good idea! – Synagogue

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--;

Boohoo

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

Sophronia