Passing the selectedindex in ListPicker to another page

Question

When I adding Genre of book by Listpicker, it's successful but when I choose the Book title in Listbox in order to show the details of Book, the value of Genre does not pass. What I want is in detail page, Genre is showed in Listpicker (as in Add page) and show the Genre I had chosen before

Addpage.xaml

<phone:PhoneApplicationPage.Resources>
    <DataTemplate x:Name="listpickertemplate">
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="{Binding Genre}"  Margin="10 0 0 0" />
        </StackPanel>
    </DataTemplate>

    <Grid x:Name="ContentPanel1" Grid.Row="1" >
                <ListBox x:Name="BookInfo" >
                    <TextBlock   Text="Book Title: *" FontWeight="Normal" FontStyle="Normal" Style="{StaticResource PhoneTextTitle3Style}" />
                    <TextBox x:Name="booktitletext" Width="460"  TextWrapping="Wrap"/>
                    <TextBlock   Text="Genre: *" FontWeight="Normal" FontStyle="Normal" Style="{StaticResource PhoneTextTitle3Style}" />
                    <toolkit:ListPicker x:Name="ListPicker"  ItemTemplate="{StaticResource listpickertemplate}" Width="120" HorizontalAlignment="Left"/>
                </ListBox>
            </Grid>

The code behind Addpage:

 public AddingPage()
    {
        InitializeComponent();
        this.DataContext = App.MainViewModel;
        List<GenrePicker> newpicker = new List<GenrePicker>();
        newpicker.Add(new GenrePicker() { Genre = "Comedy",Index = 0 });
        newpicker.Add(new GenrePicker() { Genre = "Science",Index = 1 });
        newpicker.Add(new GenrePicker() { Genre = "Action", Index = 2 });
        this.ListPicker.ItemsSource = newpicker;
    }
private void Add_Click(object sender, EventArgs e)
    {
        if (booktitletext.Text.Length > 0)

        {
            Book newbook = new Book
            {
                BookTitle = booktitletext.Text,
                Genre = (ListPicker.SelectedItem as GenrePicker).Genre.ToString(),
            }
            App.MainViewModel.Addinfo(newbook);
        }
    }

In my Browsepage.xaml, I just show the title of the book

 <Grid x:Name="ContentPanel1" Margin="12,0,12,0">
                <ListBox x:Name="TitleList" SelectionChanged="TitleList_SelectionChanged" ItemsSource="{Binding Load0}">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <Grid Width="466" Margin="0, 0, 0, 12">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="10"/>
                                    <ColumnDefinition Width="360"/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>
                                <Grid Grid.Column="0"></Grid>
                                <StackPanel Grid.Column="1">
                                    <TextBlock FontSize="40"   Text="{Binding BookTitle}" FontWeight="Normal" FontStyle="Normal" Style="{StaticResource PhoneTextTitle3Style}" TextWrapping="Wrap"/>
                                </StackPanel>
                                <Grid Grid.Column="2">
                                    <Button x:Name="Deletebutton" Height="50" Width="50" Click="deleteButton_Click" BorderBrush="{StaticResource TransparentBrush}" Margin="-40">
                                        <Image Source="/Assets/delete.dark.png"  Height="50" Width="50" Visibility="{StaticResource PhoneDarkThemeVisibility}" Margin="-40" />
                                    </Button>
                                </Grid>
                            </Grid>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </Grid>

The code behind of Browsepage when i choose a book title:

private void TitleList_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {

        // If no Book is selected, just return
        if (TitleList.SelectedIndex== -1) return;
        // Get the parent application that contains the Book being edited
        App thisApp = Application.Current as App;

        // Set this to the selected customer
        thisApp.SelectedBook = TitleList.SelectedItem as Book;
        thisApp.SelectedGenre = TitleList.SelectedItem as GenrePicker;
        // Navigate to the detail page
        NavigationService.Navigate(new Uri("/View/DetailPage/BookDetail.xaml",UriKind.RelativeOrAbsolute));
        TitleList.SelectedIndex = -1;
    }

And the Bookdetails.xaml:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" >
        <ListBox x:Name="BookDetails">
            <TextBlock x:Name="booktitle" Text="Book Title:" Foreground="#FF3B12AA" FontSize="30" FontWeight="Bold" FontFamily="Courier New"/>
            <TextBox x:Name="booktitletext" Text="{Binding BookTitle, Mode=TwoWay}" Width="460"  TextWrapping="Wrap" Background="#BF22A1DC" BorderBrush="#BFFFFFFF" FontFamily="Tahoma" FontSize="26"/>
            <TextBlock x:Name="author" Text="Author:" Foreground="#FF3B12AA" FontSize="30" FontWeight="Bold" FontFamily="Courier New"/>
            <TextBox x:Name="authortext" Tap="authortext_Tap" Text="{Binding Author, Mode=TwoWay}" Width="460"  TextWrapping="Wrap" Background="#BF22A1DC" BorderBrush="#BFFFFFFF" FontFamily="Tahoma" FontSize="26"/>
            <TextBlock x:Name="genre" Text="Genre:" Foreground="#FF3B12AA" FontSize="30" FontWeight="Bold" FontFamily="Courier New"/>
            <toolkit:ListPicker x:Name="ListPicker"  ItemTemplate="{StaticResource listpickertemplate}" Width="120" HorizontalAlignment="Left" Background="#BF3BDC22" SelectedIndex="{Binding Index}"/>
        </ListBox>
    </Grid>

the code-behind Bookdetails page:

public BookDetail()
    {
        InitializeComponent();
        this.DataContext = App.MainViewModel;
        List<GenrePicker> newpicker = new List<GenrePicker>();
        newpicker.Add(new GenrePicker() { Genre = "Comedy",Index = 0});
        newpicker.Add(new GenrePicker() { Genre = "Science", Index = 1 });
        newpicker.Add(new GenrePicker() { Genre = "Action", Index = 2});
        this.ListPicker.ItemsSource = newpicker;
    }

    protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
    {
        // Get the parent application
        App thisApp = Application.Current as App;

        // Load the active customer into the viewmodel
        App.MainViewModel.LoadDetails(thisApp.SelectedBook,thisApp.SelectedGenre);

    }

and this is the Loadtails function

public void LoadDetails(Book bcd,GenrePicker xyz)
    {
        Index = xyz.Index;
        BookTitle = bcd.BookTitle;
        Genre = bcd.Genre;
    }

I have try emulate it but it show error when I choose the booktile System.InvalidOperationException: SelectedIndex must always be set to a valid value. at this.DataContext = App.MainViewModelof Bookdetails Page

Answer 1

My guess, the problem is your code setting DataContext (which means setting ListPicker's selected index too) before populating ListPicker's ItemsSource. That will cause selecting a non-existent -yet- Item of the ListPicker. Try to reorder codes to populate ListPicker before setting DataContext :

public BookDetail()
{
    InitializeComponent();
    List<GenrePicker> newpicker = new List<GenrePicker>();
    newpicker.Add(new GenrePicker() { Genre = "Comedy",Index = 0});
    newpicker.Add(new GenrePicker() { Genre = "Science", Index = 1 });
    newpicker.Add(new GenrePicker() { Genre = "Action", Index = 2});
    this.ListPicker.ItemsSource = newpicker;
    this.DataContext = App.MainViewModel;
}

Answer 2

Instead of SelectedIndex = -1, try SelectedItem = null, which makes more sense.

When you set SelectedIndex = -1, you tell the ListPicker, "Hey, go find the -1'th element in your list and set that as selected." Then your ListPicker crashes because it doesn't understand what ListPicker[-1] means.