FlipView SelectionChanged event occurs only when touch manipulations are complete

Question

From the docs:

Note When a user flips through FlipView content using touch interaction, a SelectionChanged event occurs only when touch manipulations are complete. This means that when a user flips through content quickly, individual SelectionChanged events are not always generated for every item because the manipulation is still occurring.

Is there a way to configure the FlipView control to fire SelectionChanged for each flip? This behavior makes implementing paging interesting as the user, if flipping fast enough, can flip to the end of the list before more items can be added.

score 10 · Accepted Answer · edited May 23 '17 at 11:51

10

One solution to the problem is to extend the FlipView and monitor its ScrollViewer. Here is a quick sample of what I'm suggesting. Seems to work on horizontal flip view (haven't handled any other cases, and haven't tested too much).

public class FixedFlipView : FlipView {
    public ScrollViewer ScrollViewer {
        get;
        private set;
    }

    protected override void OnApplyTemplate() {
        base.OnApplyTemplate();

        this.ScrollViewer = (ScrollViewer)this.GetTemplateChild("ScrollingHost");
        this.ScrollViewer.ViewChanged += ScrollViewer_ViewChanged;
    }

    void ScrollViewer_ViewChanged(object sender, ScrollViewerViewChangedEventArgs e) {
        var index = (int)this.ScrollViewer.HorizontalOffset - 2;
        if (this.SelectedIndex != index) {
            this.SelectedIndex = index;
        }
    }
}

Some things to note:

You may want to get the ScrollViewer in a different way that does not depend on its name. Like using the method in my answer here. Although, I'd guess this is fine, too.
It may be a better idea to use a separate event for this. In the code above I set the SelectedIndex property, which raises the SelectionChanged event, but it is also very likely to be doing other stuff as well, so it may be a problem in some cases.

edited May 23 '17 at 11:51

Community

1
1

answered Dec 17 '14 at 09:59

yasen

3,580
13
25

I didn't realize it was this straightforward. I've tested it and with a few tweaks it will work. Thanks. – Derek Beattie Dec 18 '14 at 04:03
Good answer! But I think it's common to get the template child (the `ScrollViewer`) by name inside a custom control's `OnApplyTemplate`. – Justin XL Dec 22 '14 at 23:08
@DerekBeattie: Could you please add your "tweaks" here? – Jakub Krampl Dec 27 '14 at 12:20
@kubakista I'm still trying to get it to work a certain way, this solution does allow an event to fire for each flip, my problem now is: http://stackoverflow.com/questions/27591603/halt-stop-a-scrollviewer-from-scrolling-when-using-a-flipview – Derek Beattie Dec 27 '14 at 18:56
@DerekBeattie: btw: do you know that the navigation via previous/next buttons does not work? – Jakub Krampl Jan 09 '15 at 15:53
@kubakista yeah, in my case, prev/next happens via the SMT controls. I ended up letting the user scroll as fast as they want, making sure tasks get cancelled as a result. – Derek Beattie Jan 09 '15 at 16:24

FlipView SelectionChanged event occurs only when touch manipulations are complete

1 Answers1

Linked