locked
GridView.ScrollToView doesn't work RRS feed

  • Question

  • Hello all:

    I have a GridView and it have many items.

    When the GridView displays at first time, I want to change the view to selectedItem.

    So I call the function GridView.ScrollToView(SelectedItem), when the GridView show, but it doesn't work.

    When I call the function at second time, it is OK.

    So, is it that I call the function ahead of time?

    Monday, September 23, 2013 2:40 PM

Answers

  • Hi Shirley,

    The forums are intended for community support. If you need one-to-one support then please open a support case as described at Developer support for Windows Store apps

    You can get started with SkyDrive at https://skydrive.live.com/ and logging in with the Microsoft Account you use for the forums. See Sharing files and photos for exact steps.

    As I requested in my previous post, we also need a clear description of the problem and how to reproduce it.

    Have you confirmed that the call to ScrollIntoView was actually reached in the problem case?

    --Rob

    • Marked as answer by Shirley-cheng Wednesday, October 9, 2013 12:37 PM
    Monday, September 30, 2013 2:12 PM
    Moderator

All replies

  • When are you calling it? It sounds like the GridView may not be ready yet.

    If you need more detail can you please provide more information? A minimal sample demonstrating the issue along with exact repro steps would help us help you.

    --Rob

    Monday, September 23, 2013 2:50 PM
    Moderator
  • <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
              SizeChanged="Grid_SizeChanged">
            <VisualStateManager.VisualStateGroups>
                <!-- Visual states reflect the application's view state -->
                <VisualStateGroup x:Name="ApplicationViewStates">
                    <VisualState x:Name="FullScreenLandscape">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemGridView"
                                                           Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                            </ObjectAnimationUsingKeyFrames>
    
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SanpGridView" 
                                                           Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                            </ObjectAnimationUsingKeyFrames>
    
                        </Storyboard>
                    </VisualState>
                    
                    <!-- The back button and title have different styles when snapped -->
                    <VisualState x:Name="Snapped">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemGridView" 
                                                           Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                            </ObjectAnimationUsingKeyFrames>
    
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SanpGridView" 
                                                           Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <GridView x:Name="ItemGridView"
                      HorizontalAlignment="Left"
                      SelectionMode="Multiple"
                      IsItemClickEnabled="True"
                      Width="400"
                      ItemsSource="{Binding WeekdayList}"
                      ScrollViewer.VerticalScrollBarVisibility="Disabled"
                      ScrollViewer.HorizontalScrollBarVisibility="Auto">
                <GridView.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Vertical"
                                    Height="100"
                                    Width="200">
                            <TextBlock Text="{Binding Weekday}" FontSize="30"/>
                        </StackPanel>
                    </DataTemplate>
                </GridView.ItemTemplate>
    
                <GridView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapGrid Orientation="Vertical"
                                  VirtualizingStackPanel.VirtualizationMode="Recycling" 
                                  VerticalChildrenAlignment="Top"
                                  HorizontalChildrenAlignment="Left"/>
                    </ItemsPanelTemplate>
                </GridView.ItemsPanel>
            </GridView>
            <GridView x:Name="SanpGridView"
                      SizeChanged="SanpGridView_SizeChanged"
                      HorizontalAlignment="Left"
                      SelectionMode="Multiple"
                      IsItemClickEnabled="True"
                      Width="200"
                      Visibility="Collapsed"
                      ItemsSource="{Binding WeekdayList}"
                      ScrollViewer.VerticalScrollBarVisibility="Disabled"
                      ScrollViewer.HorizontalScrollBarVisibility="Auto">
                <GridView.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Vertical"
                                    Height="100"
                                    Width="200">
                            <TextBlock Text="{Binding Weekday}" FontSize="30"/>
                        </StackPanel>
                    </DataTemplate>
                </GridView.ItemTemplate>
    
                <GridView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapGrid Orientation="Vertical"
                                  VirtualizingStackPanel.VirtualizationMode="Recycling" 
                                  VerticalChildrenAlignment="Top"
                                  HorizontalChildrenAlignment="Left"/>
                    </ItemsPanelTemplate>
                </GridView.ItemsPanel>
            </GridView>
        </Grid>
    This is xaml code. there are two Gridviews: ItemGridView and 'SnapGridView'.
    Tuesday, September 24, 2013 2:50 AM
  • public sealed partial class MainPage : Page
        {
            ViewModel viewModel;
            public MainPage()
            {
                viewModel = new ViewModel();
                addData();
                addData();
                addData();
                addData();
                addData();
                addData();
                addData();
                addData();
                addData();
                addData();
                addData();
                addData();
                addData();
                addData();
                this.DataContext = viewModel;
                this.InitializeComponent();
            }
    
            /// <summary>
            /// Invoked when this page is about to be displayed in a Frame.
            /// </summary>
            /// <param name="e">Event data that describes how this page was reached.  The Parameter
            /// property is typically used to configure the page.</param>
            protected override void OnNavigatedTo(NavigationEventArgs e)
            {
            }
    
            /// <summary>  
            /// 往viewModel添加数据  
            /// </summary>  
            private void addData()
            {
                WeekdayItem monday = new WeekdayItem();
                monday.ScheduleList.Add(new ScheduleItem
                {
                    ClassRoom = "B-215",
                    StartTime = "8:30",
                    EndTime = "10:00",
                    LessonName = "Math"
                });
                monday.ScheduleList.Add(new ScheduleItem
                {
                    ClassRoom = "B-216",
                    StartTime = "10:30",
                    EndTime = "12:00",
                    LessonName = "Physic"
                });
                monday.ScheduleList.Add(new ScheduleItem
                {
                    ClassRoom = "E-303",
                    StartTime = "14:30",
                    EndTime = "16:00",
                    LessonName = "Computer"
                });
                monday.Weekday = "星期一";
                viewModel.WeekdayList.Add(monday);
                WeekdayItem tuesday = new WeekdayItem();
                tuesday.Weekday = "星期二";
                tuesday.ScheduleList.Add(new ScheduleItem
                {
                    ClassRoom = "B-215",
                    StartTime = "8:30",
                    EndTime = "10:00",
                    LessonName = "Math"
                });
                tuesday.ScheduleList.Add(new ScheduleItem
                {
                    ClassRoom = "B-216",
                    StartTime = "10:30",
                    EndTime = "12:00",
                    LessonName = "Physic"
                });
                tuesday.ScheduleList.Add(new ScheduleItem
                {
                    ClassRoom = "E-303",
                    StartTime = "14:30",
                    EndTime = "16:00",
                    LessonName = "English"
                });
                viewModel.WeekdayList.Add(tuesday);
    
                WeekdayItem wednesday = new WeekdayItem();
                wednesday.Weekday = "星期三";
                wednesday.ScheduleList.Add(new ScheduleItem
                {
                    ClassRoom = "B-215",
                    StartTime = "8:30",
                    EndTime = "10:00",
                    LessonName = "数学"
                });
                wednesday.ScheduleList.Add(new ScheduleItem
                {
                    ClassRoom = "B-216",
                    StartTime = "10:30",
                    EndTime = "12:00",
                    LessonName = "Physic"
                });
                wednesday.ScheduleList.Add(new ScheduleItem
                {
                    ClassRoom = "E-303",
                    StartTime = "14:30",
                    EndTime = "16:00",
                    LessonName = "English"
                });
                viewModel.WeekdayList.Add(wednesday);
                WeekdayItem thursday = new WeekdayItem();
                thursday.Weekday = "星期四";
                thursday.ScheduleList.Add(new ScheduleItem
                {
                    ClassRoom = "B-215",
                    StartTime = "8:30",
                    EndTime = "10:00",
                    LessonName = "数学"
                });
                thursday.ScheduleList.Add(new ScheduleItem
                {
                    ClassRoom = "B-216",
                    StartTime = "10:30",
                    EndTime = "12:00",
                    LessonName = "Physic"
                });
                thursday.ScheduleList.Add(new ScheduleItem
                {
                    ClassRoom = "E-303",
                    StartTime = "14:30",
                    EndTime = "16:00",
                    LessonName = "English"
                });
                viewModel.WeekdayList.Add(thursday);
                WeekdayItem friday = new WeekdayItem();
                friday.Weekday = "星期五";
                friday.ScheduleList.Add(new ScheduleItem
                {
                    ClassRoom = "B-215",
                    StartTime = "8:30",
                    EndTime = "10:00",
                    LessonName = "数学"
                });
                friday.ScheduleList.Add(new ScheduleItem
                {
                    ClassRoom = "B-216",
                    StartTime = "10:30",
                    EndTime = "12:00",
                    LessonName = "Physic"
                });
                friday.ScheduleList.Add(new ScheduleItem
                {
                    ClassRoom = "E-303",
                    StartTime = "14:30",
                    EndTime = "16:00",
                    LessonName = "English"
                });
    
                viewModel.WeekdayList.Add(friday);
            }
    
            private void Grid_SizeChanged(object sender, SizeChangedEventArgs e)
            {
                if (ApplicationViewState.Snapped == ApplicationView.Value)
                {
                    SanpGridView.SelectedIndex = 50;
                    SanpGridView.ScrollIntoView(SanpGridView.SelectedItem);
                }
            }
    
            private void SanpGridView_SizeChanged(object sender, SizeChangedEventArgs e)
            {
    
            }
        }

    This is cs code, It contains datas that is used to binding.
    Tuesday, September 24, 2013 2:52 AM
  • When the main Grid sizechanged, I set the SnapGridView.SelectedIndex = 50. and then 'SanpGridView.ScrollIntoView(SanpGridView.SelectedItem);'

    But it doesn't work.

    Tuesday, September 24, 2013 2:54 AM
  • class ScheduleItem : INotifyPropertyChanged  
            {  
                private string lessonName;  
                public string LessonName  
                {  
                    get { return lessonName; }  
                    set  
                    {  
                        lessonName = value;  
                        NotifyPropertyChanged("LessonName");  
                    }  
                }  
                private string startTime;  
                public string StartTime  
                {  
                    get  
                    {  
                        return startTime;  
                    }  
                    set  
                    {  
                        startTime = value;  
                        NotifyPropertyChanged("StartTme");  
                    }  
                }  
          
                private string endTime;  
                public string EndTime  
                {  
                    get { return endTime; }  
                    set  
                    {  
                        endTime = value;  
                        NotifyPropertyChanged("EndTime");  
                    }  
                }  
          
                private string classRoom;  
                public string ClassRoom  
                {  
                    get { return classRoom; }  
                    set { classRoom = value; NotifyPropertyChanged("ClassRoom"); }  
                }  
          
                public event PropertyChangedEventHandler PropertyChanged;  
                private void NotifyPropertyChanged(string propName)  
                {  
                    if (PropertyChanged != null)  
                    {  
                        PropertyChanged(this, new PropertyChangedEventArgs(propName));  
                    }  
                }  
            } 

    This is ScheduleItem class.
    Tuesday, September 24, 2013 2:55 AM
  • class ViewModel : INotifyPropertyChanged  
        {  
            private ObservableCollection<WeekdayItem> weekdayList;  
            public ObservableCollection<WeekdayItem> WeekdayList { get { return weekdayList; } }
            private int selectedItemIndex;  
            public int SelectedItemIndex  
            {  
                get { return selectedItemIndex; }  
                set { selectedItemIndex = value; NotifyPropertyChanged("SelectedItemIndex");}
            }  
      
            public ViewModel()  
            {  
                weekdayList = new ObservableCollection<WeekdayItem>();  
                selectedItemIndex = -1;  
            }  
      
            public event PropertyChangedEventHandler PropertyChanged;  
            private void NotifyPropertyChanged(string propName)  
            {  
                if (PropertyChanged != null)  
                {  
                    PropertyChanged(this, new PropertyChangedEventArgs(propName));  
                }  
            }
        }
    This is ViewModel class.
    Tuesday, September 24, 2013 2:59 AM
  • class WeekdayItem : INotifyPropertyChanged  
        {  
            private ObservableCollection<ScheduleItem> scheduleList;  
            private int scheduleSelected;  
            public int ScheduleSelected  
            {  
                get { return scheduleSelected; }  
                set { scheduleSelected = value; NotifyPropertyChanged("ScheduleSelected"); }  
            }  
            public ObservableCollection<ScheduleItem> ScheduleList  
            {  
                get { return scheduleList; }  
            }  
            public WeekdayItem()  
            {  
                scheduleList = new ObservableCollection<ScheduleItem>();  
                weekday = "Monday";  
            }  
            private string weekday;  
            public string Weekday  
            {  
                get { return weekday; }  
                set { weekday = value; NotifyPropertyChanged("WeekDay"); }  
            }  
      
            public event PropertyChangedEventHandler PropertyChanged;  
            private void NotifyPropertyChanged(string propName)  
            {  
                if (PropertyChanged != null)  
                {  
                    PropertyChanged(this, new PropertyChangedEventArgs(propName));  
                }  
            }  
        } 

    This is WeekDayItem class.
    Tuesday, September 24, 2013 3:00 AM
  • These code can use directly, nobody can help?

    Thursday, September 26, 2013 2:01 AM
  • In the future please provide full apps as a buildable project linked on your SkyDrive. It is difficult to read large sections of code in the forum - that is better for minimal code snippets.

    Please also provide exact repro steps and a description of what you mean by "doesn't work". What is the expected behavior and how does that differ from the actual behavior?

    The only place you call ScrollIntoView is protected by a check that the app is Snapped. Does the ScrollIntoView method get called in the scenario where it doesn't work?

    --Rob

    Thursday, September 26, 2013 2:44 AM
    Moderator
  • Hi Shirley

    I saw your problem has been resolved in Chinese forum http://social.msdn.microsoft.com/Forums/zh-CN/b186cbf6-928d-46e3-bf37-0e2fc58deef0/gridviewitem#38549394-7571-4d00-91bf-2fdbeb14d2f1, You mark the answer which suggested with ScrollIntoView(Object, ScrollIntoViewAlignment) therefore I think you have solved your problem. And I will mark Rob's suggestion and close the thread.

    Thank you for supporting Store app dev forum.

    Best Regards,

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.


    Friday, September 27, 2013 6:52 AM
    Moderator
  • I'm sorry to reply late.

    But they are diffrent question.

    I don't know how to use skydriver, so can I send an email to you(Rob)?

    If you don't mind,  could you supply you email address to me?

    My email adress is chenggj@aliyun.com

    Monday, September 30, 2013 5:06 AM
  • Hi Shirley,

    The forums are intended for community support. If you need one-to-one support then please open a support case as described at Developer support for Windows Store apps

    You can get started with SkyDrive at https://skydrive.live.com/ and logging in with the Microsoft Account you use for the forums. See Sharing files and photos for exact steps.

    As I requested in my previous post, we also need a clear description of the problem and how to reproduce it.

    Have you confirmed that the call to ScrollIntoView was actually reached in the problem case?

    --Rob

    • Marked as answer by Shirley-cheng Wednesday, October 9, 2013 12:37 PM
    Monday, September 30, 2013 2:12 PM
    Moderator
  • Hi Rob,

    I have resolved this problem by changing the time of call 'ScrollIntoView'.

    The time is that when Window.Current.SizeChanged. then it works!


    Wednesday, October 9, 2013 12:37 PM