Set and Scroll to SelectedIndex of ListBox in Pivot in WP10

Question

I am trying to bind SelectedIndex of ListBox inside Pivot. Headers, Items are bind correctly, however, the ListBox SelectedIndex is somehow not working.

XAML

<Page.DataContext>
        <local:ChapterMenuViewModel/>
    </Page.DataContext>
<Pivot x:Name="pvMain" TitleTemplate="{StaticResource PivotTitleTemplate}"
  HeaderTemplate="{StaticResource PivotHeaderTemplate}"
  ItemsSource="{Binding ChapterMenuHeader}" SelectionChanged="pvMain_SelectionChanged">
  <Pivot.ItemTemplate>
    <DataTemplate>
      <Grid Grid.Row="1" Grid.Column="0">
      <ListBox FlowDirection="RightToLeft" FontFamily="./Fonts/ScheherazadeRegOT.ttf#Scheherazade" 
       x:Name="lsbChapter" ItemTemplate="{StaticResource ChapterItemTemplate}"
       SelectedIndex="{Binding SelectedChapterIndex}"
       ItemsSource="{Binding Chapters}">
      </ListBox>
    </Grid>
  </DataTemplate>
 </Pivot.ItemTemplate>
</Pivot>

MVVM

public class ChapterMenuViewModel : INotifyPropertyChanged
    {
        ObservableCollection<ChapterMenusHeader> _chapterMenuHeader;
        DataSource ds = null;
        public ChapterMenuViewModel()
        {
            ChapterMenuHeader = new ObservableCollection<ChapterMenusHeader>();
            ds = new DataSource();

            List<JuzDetail> allJuz = DataSource.GetAllJuz;
            ChapterMenuHeader.Add(new ChapterMenusHeader() { Header = "chapter", Chapters = DataSource.GetAllChapter, Juzs = allJuz });
            ChapterMenuHeader.Add(new ChapterMenusHeader() { Header = "location", Chapters = DataSource.GetAllChapterSortedByChapterType, Juzs = allJuz });
            ChapterMenuHeader.Add(new ChapterMenusHeader() { Header = "order", Chapters = DataSource.GetAllChapterSortedByOrder, Juzs = allJuz });
            ChapterMenuHeader.Add(new ChapterMenusHeader() { Header = "size", Chapters = DataSource.GetAllChapterSortedBySize, Juzs = allJuz });
            ChapterMenuHeader.Add(new ChapterMenusHeader() { Header = "arabic name", Chapters = DataSource.GetAllChapterSortedByArabicAlphabet, Juzs = allJuz });
            ChapterMenuHeader.Add(new ChapterMenusHeader() { Header = "english name", Chapters = DataSource.GetAllChapterSortedByEnglishAlphabet, Juzs = allJuz });
        }
        public ObservableCollection<ChapterMenusHeader> ChapterMenuHeader
        {
            get { return _chapterMenuHeader; }
            set
            {
                if (_chapterMenuHeader != value)
                {
                    _chapterMenuHeader = value;
                    OnPropertyChanged("ChapterMenuHeader");
                }
            }
        }
        public event PropertyChangedEventHandler PropertyChanged;
        public void OnPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
        public class ChapterMenusHeader : INotifyPropertyChanged
        {
            public event PropertyChangedEventHandler PropertyChanged;
            public void OnPropertyChanged(string propertyName)
            {
                if (PropertyChanged != null)
                {
                    PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
                }
            }

            public ChapterMenusHeader()
            {
                SelectedChapterIndex = App.Recent.ChapterID;
            }
            string _header;
            public string Header
            {
                get { return _header; }
                set
                {
                    if (_header != value)
                    {
                        _header = value;
                        OnPropertyChanged("Header");
                    }
                }
            }

            List<Chapter> _allChapters;
            public List<Chapter> Chapters
            {
                get { return _allChapters; }
                set
                {
                    if (_allChapters != value)
                    {
                        _allChapters = value;
                        OnPropertyChanged("Chapters");
                    }
                }
            }

            int _selectedChapterIndex;
            public int SelectedChapterIndex
            {
                get { return _selectedChapterIndex; }
                set
                {
                    _selectedChapterIndex = value;
                    OnPropertyChanged("SelectedChapterIndex");
                }
            }
            List<JuzDetail> allJuz;
            public List<JuzDetail> Juzs
            {
                get { return allJuz; }
                set
                {
                    if (allJuz != value)
                    {
                        allJuz = value;
                        OnPropertyChanged("Juzs");
                    }
                }
            }
        }

Scrolling Section

private void lsbChapter_SelectionChanged(object sender, SelectionChangedEventArgs e)
 {
   ListBox lsb = sender as ListBox;
   if (lsb.SelectedIndex != -1)
      scrollIntoSelectedItem(lsb, lsb.SelectedIndex);
 }

void scrollIntoSelectedItem(ListBox lsb, int index)
{
   lsb.SelectionChanged -= lsbChapter_SelectionChanged;
   lsb.SelectedIndex = lsb.Items.Count - 1;
   lsb.UpdateLayout();
   lsb.ScrollIntoView(lsb.SelectedIndex);

   lsb.SelectedIndex = index;
   lsb.UpdateLayout();
   lsb.ScrollIntoView(index);

   lsb.SelectionChanged += lsbChapter_SelectionChanged;
}

This is only portion of the ViewModel class where I am binding the SelectedIndex of ListBox. The ListBox items are bind correctly, however, the SelectedIndex is not working. How to set and scroll the SelectedIndex of ListBox in Pivot?

Thanks!

Answer 1

So turns out the issue is at this line -

SelectedIndex="{Binding SelectedChapterIndex}" ItemsSource="{Binding Chapters}"

You need to move the ItemsSource binding in front of the SelectedIndex one -

ItemsSource="{Binding Chapters}" SelectedIndex="{Binding SelectedChapterIndex}"

The reason? I suspect that it's because of the instantiation sequence of the two values. When the SelectedIndex is placed in front of the ItemsSource in xaml and assigned with a value in the constructor, the ItemsSource is still null, so nothing will be selected.

Now, to scroll to a particular item, you need to call the ScrollIntoView method on the ListBox. In your case, it should be

lsbChapter.ScrollIntoView(Chapters[SelectedChapterIndex]);