locked
Hub view jumps when scrolling and no all data yet loaded

    Question

  • Hi everyone! It's my first post on msdn so if I'm making some mistakes (wrong forum or something) please just tell. My problem is very strange to me, and I cannot find good solution. I have a hub with few sections. Last section is photo section, where I load images into scroll view using  data template. When I enter my page with this hub, and I start scrolling, whole hub looks to move down constant offset (about ~50px). I tap on page, scroll left and right and it jumps when move closer to last section. When I release my 'tap' and in that moment all data is loaded, I can start scrolling again without any jumping issues. In scenario, when I enter this page, and wait until all data (including all photos) are loaded it doesn't jump (and it's my goal behavior).  I found out, that if I set proper small max height for one of the element from that section (section itself, grid, scroll view) it don't jump. Probably whole problem is related with multiple uielements resizing. This issue happens both on simulator and on device. I will appreciate for any sugestions! Basically my code looks like that:

    <Hub>
    ...
     <HubSection x:Name="PhotoHubSection"
                            Style="{StaticResource PhotosHubSection}"
                            HeaderTemplate="{StaticResource PhotosHeaderTemplate}" 
                            ContentTemplate="{StaticResource PhotoHubSectionTemplate}"
                            DataContext="{Binding Images}"
                            Visibility="{Binding Count, Converter={StaticResource HubSectionListVisibilityConverter}}"
                            Loaded="PhotoHubSection_Loaded">
                </HubSection>
    </Hub>
    
    
     <DataTemplate x:Key="PhotoHubSectionTemplate">
            <ScrollViewer Style="{StaticResource ScrollViewerHorizontalOff}">
                <Grid MinWidth="370" ScrollViewer.HorizontalScrollMode="Disabled">
                    <ProgressRing Foreground="#323339" IsActive="True" Width="40" Height="40" HorizontalAlignment="Center"/>
                    <GridView Name="ImageGrid" SelectionMode="None" ItemsSource="{Binding}"
                              ScrollViewer.VerticalScrollMode="Enabled" ScrollViewer.HorizontalScrollMode="Disabled" IsSwipeEnabled="False" 
                              IsItemClickEnabled="True"
                              IsHitTestVisible="{Binding DefaultViewModel.Appointment.Status, ElementName=pageRoot, Converter={StaticResource AppointmentElementActionAvailabilityConverter}}" commands:ItemClickCommand.Command="{Binding DefaultViewModel.PhotoSelectedCommand, ElementName=pageRoot}" ItemContainerTransitions="{x:Null}">
                        <GridView.ItemTemplate>
                            <DataTemplate>
                                <Image Width="180" Height="110" Stretch="Fill" Name="Image" Margin="0,0,0,3">
                                    <Image.Source>
                                        <BitmapImage UriSource="{Binding ImagePath}" DecodePixelWidth="180" DecodePixelHeight="110"/>
                                    </Image.Source>
                                </Image>
                            </DataTemplate>
                        </GridView.ItemTemplate>
                        <GridView.ItemsPanel>
                            <ItemsPanelTemplate>
                                <WrapGrid Orientation="Horizontal" MaximumRowsOrColumns="2" ScrollViewer.HorizontalScrollMode="Disabled"/>
                            </ItemsPanelTemplate>
                        </GridView.ItemsPanel>
                    </GridView>
                </Grid>
            </ScrollViewer>
        </DataTemplate>
    Friday, February 20, 2015 8:52 AM

All replies

  • My invastigation shows that if we use view with horizontal orientation (fe. wrapgrid or listview) it causes this bouncing effect too. Could it be related with multiple scrollviews? I will update this topic when I found something new.

    Friday, February 20, 2015 11:14 AM
  • Hi Marcin,

    Thank you for reporting issue here. I tried porting above code snippet into windows phone blank hub template, but it seems with no issue when loading data. I cannot reproduce your problem. Can you share a mini repro project for test? Use your OneDrive and share a link here.

    Regards,


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place. Click HERE to participate the survey.

    Monday, February 23, 2015 2:05 AM
    Moderator
  • Hi,

    I was able see the jumping on example project (hub section with list inside): https://code.msdn.microsoft.com/windowsapps/XAML-Hub-control-sample-5d116fa9

    Tested on device. You must start swiping right after page loads, or you will not see it after few seconds. 


    Tuesday, February 24, 2015 10:09 AM
  • Hi Marcin,

    I download the sample, swipe right in the three scenarios as you request, but I cannot see anything jumps. It seems work ok on my side. Have you tried on other computer and is there the problem persists? Can you also capture some images to let me know your scenario?

    Regards,


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Sunday, March 01, 2015 5:24 AM
    Moderator
  • Here are two images from example I gave you:

    http://oi59.tinypic.com/30285rl.jpg

    http://oi57.tinypic.com/11mdnw4.jpg

    Just tap on screen and start swiping. It's important to tap on screen right after new page was shown.


    Saturday, March 07, 2015 12:21 PM