Flipview causing exception 'Value does not fall in expected range' during swiping fast

Question

I have a very weird behaviour with flipview (win 8.1 xaml for windows phone)

 <FlipView Name="flip" ItemTemplate="{StaticResource DataTemplate1}" Loaded="flip_Loaded">
        <FlipView.Resources>
            <Style x:Key="FlipViewStyle1" TargetType="FlipView">
                <Setter Property="Background" Value="Transparent"/>
                <Setter Property="BorderThickness" Value="0"/>
                <Setter Property="TabNavigation" Value="Once"/>
                <Setter Property="IsTabStop" Value="False"/>
                <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden"/>
                <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden"/>
                <Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="False"/>
                <Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="False"/>
                <Setter Property="ScrollViewer.IsHorizontalScrollChainingEnabled" Value="True"/>
                <Setter Property="ScrollViewer.IsVerticalScrollChainingEnabled" Value="True"/>
                <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False"/>
                <Setter Property="ScrollViewer.BringIntoViewOnFocusChange" Value="True"/>
                <Setter Property="ItemsPanel">
                    <Setter.Value>
                        <ItemsPanelTemplate>
                            <VirtualizingStackPanel AreScrollSnapPointsRegular="True" 
                                    Orientation="Horizontal"/>
                        </ItemsPanelTemplate>
                    </Setter.Value>
                </Setter>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="FlipView">
                            <Grid>
                                <Border BorderBrush="{TemplateBinding BorderBrush}" 
                        BorderThickness="{TemplateBinding BorderThickness}" 
                        Background="{TemplateBinding Background}">
                                    <Grid>
                                        <ScrollViewer x:Name="ScrollingHost" 
                                      AutomationProperties.AccessibilityView="Raw" 
                                      BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}" 
                                      HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" 
                                      HorizontalSnapPointsType="MandatorySingle"
                                      HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" 
                                      IsTabStop="False" 
                                      IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" 
                                      IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}" 
                                      IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}" 
                                      IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" 
                                      IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" 
                                      Padding="{TemplateBinding Padding}" 
                                      TabNavigation="{TemplateBinding TabNavigation}" 
                                      VerticalSnapPointsType="MandatorySingle" 
                                      VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" 
                                      VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" 
                                      ZoomMode="Disabled">
                                            <ItemsPresenter/>
                                        </ScrollViewer>
                                    </Grid>
                                </Border>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>

            </Style>
        </FlipView.Resources>
        <FlipView.Style>
            <StaticResource ResourceKey="FlipViewStyle1"/>
        </FlipView.Style>
    </FlipView>

And the datatemplate:

 <DataTemplate x:Key="DataTemplate1">
        <Grid>
            <Image Stretch="Uniform" Source="{Binding image}" />
        </Grid>
    </DataTemplate>

I set the itemsource in Loaded event

private void flip_Loaded(object sender, RoutedEventArgs e)
    {
        flip.ItemsSource = _vm.Profile.photos;
    }

where photos is a List of custom class containing string link of image from web. Around 30 items are in the list.

Everything is simple and works fine UNTIL I swipe on the flipview fast randomly like forward backward. I get an unhandled exception "Value doesn't fall in expected range" with no stacktrace.

This is completely random it may occur, may not. Someone please guide me with a workaround. This is driving me nuts :(

MORE CODE:

In previous page I have gridview that works perfectly fine. On tapping a particular thumbnail:

 private void GridView_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if ((sender as GridView).SelectedIndex != -1)
            {
                DispatcherHelper.CheckBeginInvokeOnUI(() =>
                    Frame.Navigate(typeof(InstaPhotoView), new InstaProfilePlusSelection()
                    {
                        Profile = ViewModel.InstaProfile,
                        SelectedIndex = (sender as GridView).SelectedIndex
                    }));
                (sender as GridView).SelectedIndex = -1;
            }
        }

In the page InstaPhotoView I have

InstaProfilePlusSelection _vm = new InstaProfilePlusSelection();
        public InstaPhotoView()
        {
            this.InitializeComponent();
        }

        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            HardwareButtons.BackPressed += HardwareButtons_BackPressed;
            if (e.Parameter != null)
                _vm = e.Parameter as InstaProfilePlusSelection;
        }

plus of course the loaded event is given above

Answer 1

Gave up with flipview ultimately. Microsoft must have some underlying issues in the control. Here's how to use ListView to imitate flipview:

<ListView Name="flip" SelectionMode="None" ItemsSource="{Binding Profile.photos}" Loaded="flip_Loaded">
        <ListView.Resources>
            <Style x:Key="ListViewStyle1" TargetType="ListView">
                <Setter Property="IsTabStop" Value="False"/>
                <Setter Property="TabNavigation" Value="Once"/>
                <Setter Property="IsSwipeEnabled" Value="True"/>
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                <Setter Property="VerticalContentAlignment" Value="Top"/>
                <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Visible"/>
                <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled"/>
                <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Auto"/>
                <Setter Property="ScrollViewer.VerticalScrollMode" Value="Disabled"/>
                <Setter Property="ScrollViewer.ZoomMode" Value="Disabled"/>
                <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False"/>
                <Setter Property="ScrollViewer.BringIntoViewOnFocusChange" Value="True"/>
                <Setter Property="ItemsPanel">
                    <Setter.Value>
                        <ItemsPanelTemplate>
                            <ItemsStackPanel Orientation="Horizontal"/>
                        </ItemsPanelTemplate>
                    </Setter.Value>
                </Setter>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListView">
                            <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                                <ScrollViewer x:Name="ScrollViewer" AutomationProperties.AccessibilityView="Raw" BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}" IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" TabNavigation="{TemplateBinding TabNavigation}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}" HorizontalSnapPointsType="MandatorySingle">
                                    <ItemsPresenter FooterTransitions="{TemplateBinding FooterTransitions}" FooterTemplate="{TemplateBinding FooterTemplate}" Footer="{TemplateBinding Footer}" HeaderTemplate="{TemplateBinding HeaderTemplate}" Header="{TemplateBinding Header}" HeaderTransitions="{TemplateBinding HeaderTransitions}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                </ScrollViewer>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ListView.Resources>
        <ListView.Style>
            <StaticResource ResourceKey="ListViewStyle1"/>
        </ListView.Style>
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid Width="{Binding ElementName=root,Path=ActualWidth}" Height="{Binding ElementName=root,Path=ActualHeight}">
                   <Image Stretch="Uniform">
                        <Image.Source>
                            <BitmapImage UriSource="{Binding image}" DecodePixelWidth="250" DecodePixelHeight="250" />
                        </Image.Source>
                    </Image>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

Note that the grid's height & width in datatemplate is bound to the root element of the page (in my case a Grid). Also the scrollviewer is modifed to enable snap points and orientation of itemsstackpanel is horizontal.

Answer 2

Try by updating data template . Set DecodePixelHeight or DecodePixelWidth if you know the max width or height of the widnow in which you are displaying the image. This will improve application performance.

<DataTemplate x:Key="DataTemplate1">
     <Image Stretch="Uniform">
            <Image.Source>
               <BitmapImage UriSource="{Binding image}" DecodePixelHeight="250" />
            </Image.Source>
        </Image>
</DataTemplate>

Also try by setting BitmapImage.CreateOptions property. I don't have VS installed with me now.