Basic pivot item listbox data binding

This is a very basic question but i am trying to get this to work the issue what i am facing is i have an list of items as on my mainpage.xaml

<controls:PivotItem Header="WATER">
        <controls:PivotItem.Background>
            <ImageBrush ImageSource="Water.png" Stretch="Uniform"/>
        </controls:PivotItem.Background>
        <!--Triple line list no text wrapping-->
        <ListBox x:Name="SecondListBox" ItemsSource="{Binding Water}" Margin="0,0,-12,0" BorderBrush="Black" BorderThickness="0">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Margin="0,0,0,17" Width="432" Height="50">
                        <TextBlock Text="{Binding LineOne}" TextWrapping="NoWrap" Margin="12,0,0,0" Style="{StaticResource PhoneTextExtraLargeStyle}" FontSize="40" FontFamily="/Survival_Handbook;component/Fonts/Fonts.zip#XXII ARMY" Foreground="Black"/>
                        <!--<TextBlock Text="{Binding LineThree}" TextWrapping="NoWrap" Margin="12,-6,0,0" Style="{StaticResource PhoneTextSubtleStyle}"/>-->
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </controls:PivotItem>

This is how it looks like in MainViewModelSampleData.xaml

 <local:MainViewModel.Water>
    <local:ItemViewModel LineOne="Finding water" LineTwo="Image" LineThree="Description"/>
    <local:ItemViewModel LineOne="Purifying water" LineTwo="Image" LineThree="Description"/>
    <local:ItemViewModel LineOne="Springs" LineTwo="Image" LineThree="Description"/>
    <local:ItemViewModel LineOne="Digging" LineTwo="Image" LineThree="Description"/>
    <local:ItemViewModel LineOne="Catchments" LineTwo="Image" LineThree="Description"/>
    <local:ItemViewModel LineOne="Solar stills" LineTwo="Image" LineThree="Description"/>
    <local:ItemViewModel LineOne="Sal gathering" LineTwo="Image" LineThree="Description"/>
</local:MainViewModel.Water>

this is how it looks in MainViewModel.cs

public MainViewModel()
{
    this.Water = new ObservableCollection<ItemViewModel>();  
} 
public ObservableCollection<ItemViewModel> Water { get; private set; }

public void LoadData()
{
    this.Water.Add(new ItemViewModel()开发者_StackOverflow { LineOne = "Finding water", LineTwo = "Image", LineThree = "Description" });
    this.Water.Add(new ItemViewModel() { LineOne = "Purifying water", LineTwo = "Image", LineThree = "Description" });
    this.Water.Add(new ItemViewModel() { LineOne = "Springs", LineTwo = "Image", LineThree = "Description" });
    this.Water.Add(new ItemViewModel() { LineOne = "Digging", LineTwo = "Image", LineThree = "Description" });
    this.Water.Add(new ItemViewModel() { LineOne = "Catchments", LineTwo = "Image", LineThree = "Description" });
    this.Water.Add(new ItemViewModel() { LineOne = "Solar stills", LineTwo = "Image", LineThree = "Description" });
    this.Water.Add(new ItemViewModel() { LineOne = "Sal gathering", LineTwo = "Image", LineThree = "Description" });
}

what I am trying is to get each of this item from the list box to open up in a new page with title as lineOne and image as line two and its description as line three. do I need to create separate xaml for each pivot items? If not then how do i bind it to one single xaml which can display items through a binded xml. what I am trying to create is a book as an app.

Hope my question is clear and understandable.

---

It is easier and less buggy to use the Tap event instead of the SelectedChangedEvent. If you're targetting WP7.5 this will work with no extra libraries. If you are targetting WP7.0 then you should use the GestureListener from the Silverlight Toolkit.

<DataTemplate>
 <StackPanel Margin="0,0,0,17" Width="432" Height="50"
  Tap="TapEventHandler" >
  <TextBlock Text="{Binding LineOne}" TextWrapping="NoWrap" Margin="12,0,0,0" Style="{StaticResource PhoneTextExtraLargeStyle}" FontSize="40" FontFamily="/Survival_Handbook;component/Fonts/Fonts.zip#XXII ARMY" Foreground="Black"/>
 </StackPanel>
</DataTemplate>

Then place your navigation code in the TapEventHandler in your code-behind. Here you need to get a reference to the ViewModel instance of the item you tapped on, calculate where you're navigating to, and then navigate to that new page.

void TapEventHandler(object sender, RoutedEventArgs e)
{
  ItemViewModel ivm = (ItemViewModel) sender.DataContext;
  // ... find out what page/query string to navigate to based on ivm.
  NavigationService.Navigate(new Uri(/*uri here*/);
}

You can also use an MVVM framework such as MVVM Light to help with this kind of plumbing and remove to tight dependency between View and ViewModel but that's more advanced.