locked
ScrollViewer.ChangeView() not working on my vertically scrolling GridView?

    Question

  • Hi,

    Okay I have some simple XAML code to layout some rectangles in a GridView and have it scroll vertically.

        <Canvas x:Name="canvas" Width="1920" Height="1080">
                <GridView x:Name="gridView1" Width="1920" Height="1080" CanReorderItems="True" BorderThickness="1" BorderBrush="Red" SelectionMode="Multiple" ScrollViewer.VerticalScrollMode="Enabled">
                    <GridView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <WrapGrid x:Name="wrapGrid1" Orientation="Horizontal" HorizontalAlignment="Center" MaximumRowsOrColumns="4">
                            </WrapGrid>
                        </ItemsPanelTemplate>
                    </GridView.ItemsPanel>
                </GridView>    
        </Canvas>    
    

    I want to scroll to an vertical offset programmatically (actually I would like to animate the scroll but first things first). Here is my attempt to use the ChangeView method on the GridView's ScrollViewer ...

            public MainPage()
            {
                this.InitializeComponent();
    
                for (int i = 0; i < 40; i++)
                {
                    Rectangle temp = new Rectangle();
                    temp.Width = 400;
                    temp.Height = 250;
                    SolidColorBrush blueBrush = new SolidColorBrush(Windows.UI.Colors.Blue);
                    temp.Fill = blueBrush;
                    gridView1.Items.Add(temp);
                }
    
                this.Loaded += MainPage_Loaded;
            }
    
            async void MainPage_Loaded(object sender, RoutedEventArgs e)
            {
                await Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, new Windows.UI.Core.DispatchedHandler(() =>
                {
                    Double off = 1000;
                    var scrollViewer = gridView1.GetFirstDescendantOfType<ScrollViewer>();
                    scrollViewer.ChangeView(null, off, null);
                }));
    
            }
    
    Not working :-(. Any idea what I'm doing wrong?
          

    Friday, December 5, 2014 8:23 PM

Answers

  • Hi duffybr,

    Try following code to see if you can make it work.

    XAML, I add a button for changeView method and display the scrollbar of the gridview.

        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Canvas x:Name="canvas" Margin="191,60,37,-312">
                <GridView x:Name="gridView1"  CanReorderItems="True"
                          BorderThickness="1" BorderBrush="Red" SelectionMode="Multiple" 
                          ScrollViewer.VerticalScrollBarVisibility="Visible"
                          ScrollViewer.VerticalScrollMode="Enabled" Height="638" Width="1138">
                    <GridView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <WrapGrid x:Name="wrapGrid1" Orientation="Horizontal" HorizontalAlignment="Center" MaximumRowsOrColumns="4">
                            </WrapGrid>
                        </ItemsPanelTemplate>
                    </GridView.ItemsPanel>
                </GridView>
            </Canvas>
            <Button Content="Button" HorizontalAlignment="Left" Height="78" Margin="55,91,0,0" VerticalAlignment="Top" Width="100" Click="Button_Click"/>
        </Grid>

    CS, I add some time span to it.

            private void Button_Click(object sender, RoutedEventArgs e)
            {
                TimeSpan period = TimeSpan.FromMilliseconds(10);
    
                Windows.System.Threading.ThreadPoolTimer.CreateTimer(async (source) =>{
                    await Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, new Windows.UI.Core.DispatchedHandler(() =>
                    {
                        Double off = 1000;
                        var scrollViewer = gridView1.GetFirstDescendantOfType<ScrollViewer>();
                        scrollViewer.ChangeView(null, off, null);
                    }));
                }, period);
            }
        }

    Tested with my own device, works fine.

    Actually as Bill wrote there is bit issue with screen rendering, now it works fine.

    --James


    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.

    • Marked as answer by duffybr Wednesday, December 17, 2014 6:11 PM
    Tuesday, December 16, 2014 9:19 AM
    Moderator

All replies

  • This appears to be a bug as far as I can tell. I don't think MS puts a lot of thought into vertically scrolling containers for winrt. I was able to get the ChangeView method to work with a simple horizontally scrolling grid. I don't think they bothered to make this work with GridViews that have a WrapGrid contained in them and are set to scroll vertically :-(
    Friday, December 5, 2014 10:06 PM
  • Yes,there is a little bit issue in ChangeView method. I guess because of the screen rendering timing. Sometimes  the ChangeView has been called before rendering completed.

    you can try put ChangeView in gridView1 loaded.

     

    在現實生活中,你和誰在一起的確很重要,甚至能改變你的成長軌跡,決定你的人生成敗。 和什麼樣的人在一起,就會有什麼樣的人生。 和勤奮的人在一起,你不會懶惰; 和積極的人在一起,你不會消沈; 與智者同行,你會不同凡響; 與高人為伍,你能登上巔峰。


    Saturday, December 6, 2014 2:30 AM
  • Hi duffybr,

    Try following code to see if you can make it work.

    XAML, I add a button for changeView method and display the scrollbar of the gridview.

        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Canvas x:Name="canvas" Margin="191,60,37,-312">
                <GridView x:Name="gridView1"  CanReorderItems="True"
                          BorderThickness="1" BorderBrush="Red" SelectionMode="Multiple" 
                          ScrollViewer.VerticalScrollBarVisibility="Visible"
                          ScrollViewer.VerticalScrollMode="Enabled" Height="638" Width="1138">
                    <GridView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <WrapGrid x:Name="wrapGrid1" Orientation="Horizontal" HorizontalAlignment="Center" MaximumRowsOrColumns="4">
                            </WrapGrid>
                        </ItemsPanelTemplate>
                    </GridView.ItemsPanel>
                </GridView>
            </Canvas>
            <Button Content="Button" HorizontalAlignment="Left" Height="78" Margin="55,91,0,0" VerticalAlignment="Top" Width="100" Click="Button_Click"/>
        </Grid>

    CS, I add some time span to it.

            private void Button_Click(object sender, RoutedEventArgs e)
            {
                TimeSpan period = TimeSpan.FromMilliseconds(10);
    
                Windows.System.Threading.ThreadPoolTimer.CreateTimer(async (source) =>{
                    await Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, new Windows.UI.Core.DispatchedHandler(() =>
                    {
                        Double off = 1000;
                        var scrollViewer = gridView1.GetFirstDescendantOfType<ScrollViewer>();
                        scrollViewer.ChangeView(null, off, null);
                    }));
                }, period);
            }
        }

    Tested with my own device, works fine.

    Actually as Bill wrote there is bit issue with screen rendering, now it works fine.

    --James


    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.

    • Marked as answer by duffybr Wednesday, December 17, 2014 6:11 PM
    Tuesday, December 16, 2014 9:19 AM
    Moderator
  • Okay, thanks for the update on that. I have moved on to using a horizontal scrolling grid to reduce complexity.
    Wednesday, December 17, 2014 6:11 PM