Data binding in Windows Phone 8 app using ListBox

Question

Here is my code. What it doing. I have one textbox(button) with text Book name, when I click on it I can change text in textbox using binding. But now I add another textbox for author name and I dont know how bind it. If I use same method like for Book name its not works or text from book name is too in book author. All text are changed via popup setting page.

My source here: https://dl.dropbox.com/u/40039421/App1.rar . Image here: https://dl.dropbox.com/u/40039421/helpp.png

 public partial class MainPage : INotifyPropertyChanged
{
    private ObservableCollection<Book> _books = new ObservableCollection<Book>();
    public ObservableCollection<Book> AllBooks
    {
        get { return _books; }
        set { _books = value; }
    }

    ...

    private void InitializeData()
    {

        var bookName1 = new Book { Id = 1, BookName = "Small red apple",AuthorName = "Daniel"};
        ...

        AllBooks.Add(bookName1);
       ...

        OnPropertyChanged("AllBooks");
    }

    public event PropertyChangedEventHandler PropertyChanged;

    public void OnPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(null, new PropertyChangedEventArgs(propertyName));
        }
    }

    private void btnGreenBook_Click(object sender, RoutedEventArgs e)
    {
        var button = sender as Button;
        if (button != null)
        {
            Popup popup = new Popup();
            popup.VerticalOffset = 30;
            PopupSettingPage control = new PopupSettingPage();
            popup.Child = control;
            popup.IsOpen = true;

            control.btnSave.Click += (s, args) =>
            {
                var id = Convert.ToInt32(button.Tag);
                var book = AllBooks.FirstOrDefault(sub => sub.Id == id);
                if (book != null)
                {
                    book.BookName = control.BookName;
                    book.OnPropertyChanged("BookName");

                }

                popup.IsOpen = false;
            };

           ...

Answer 1

Ohh dear, it was a simple mistake :)

You forgot to add the AuthorName in the Xaml of your PopupSettingsPage.xaml

<TextBox x:Name="tbInputAuthorName" Text="{Binding AuthorName, Mode=TwoWay}" VerticalAlignment="Center"/>

And then in MainPage do this

book.BookName = control.BookName;
book.OnPropertyChanged("BookName");
book.AuthorName = control.AuthorName;
book.OnPropertyChanged("AuthorName");

Additional answer based on your comments:

In order to achieve that, You have to remove the second stackpanel in the listbox. Instead, use the WrapPanel control. Search for how to use WrapPanel for WindowsPhone.

And then you have to find some way to set the backgrounds as red or green. Good luck

Answer 2

OK I use wrap panel but problem is still here. I have two panorama items (I post code from item 1 and item 2 have same code only is showing on second panorama page) and problem is still if I save some value to one of item in panorama item 1 this value is too in panorama item 2 and I dont know how make it. Logic is click on panorama 1 item change values in panoam 1 items, click on panorama 2 items change panorama 2 items values. Its look like panoram item 1 have same ID like panoram item 2. Here is full source : https://dl.dropbox.com/u/40039421/App1SecondEdit.rar

<Grid x:Name="LayoutRoot" Background="Transparent">
     <!--Panorama control-->
    <phone:Panorama>
        <!--Panorama item 1-->
        <phone:PanoramaItem Header="Test">
            <Grid x:Name="PanelPanoramaItem1" 
          Grid.Row="1"
          Margin="25,0,12,0">
                <ListBox ItemsSource="{Binding AllBooks}">
                    <ListBox.ItemsPanel>
                        <ItemsPanelTemplate>
                            <toolkit:WrapPanel Orientation="Vertical"/>
                        </ItemsPanelTemplate>
                    </ListBox.ItemsPanel>
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                   <Button Width="140"
                            Height="140"
                            toolkit:TiltEffect.IsTiltEnabled="True" Margin="0,0,0,5" Click="Button_Click_1" Tag="{Binding Id}" >
                                            <Button.Template>
                                                <ControlTemplate>
                                                    <Grid Background="Chartreuse">
                                                        <TextBlock Foreground="Black" Text="{Binding BookName}" />
                                                    </Grid>
                                                </ControlTemplate>
                                            </Button.Template>
                                        </Button>

                                    </DataTemplate>
                                </ListBox.ItemTemplate>
                            </ListBox>
            </Grid>
        </phone:PanoramaItem>
        <!-- END Panorama item 1 -->