c# - How to set Page Navigation from Listbox to another Page?

Question

Hi am using XAML file given below.I want to Navigate Listbox selected item to another page.

 <ListBox x:Name="NotchsList11"  Grid.ColumnSpan="2"
           Margin="0,0,0,0" Grid.Row="3" HorizontalAlignment="left" Width="720"  Grid.RowSpan="2">
        <ListBox.ItemTemplate>
            <DataTemplate>
                  <StackPanel Margin="0,0,0,0"  Grid.ColumnSpan="3" x:Name="ControlsPanel"
                        Grid.Column="0"
                        Height="215"
                        VerticalAlignment="Top">
                        <StackPanel Background="#eb2427" Orientation="Horizontal">
                            <TextBlock Grid.Row="1"  FontFamily="Calibri" FontSize="34" FontWeight="Bold"  FontStyle="Normal" Margin="10,0,0,0"
                                Text="{Binding name}"
                                   />               
                        </StackPanel>
                        <ScrollViewer ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.VerticalScrollBarVisibility="Disabled">
                        <StackPanel>
                        <StackPanel VerticalAlignment="Top" Width="Auto">
                                 <ListBox ItemsSource="{Binding Images}" SelectionChanged="NotchsList11_SelectionChanged" Width="Auto" ScrollViewer.VerticalScrollBarVisibility="Disabled">
                                    <ListBox.ItemsPanel>
                                            <ItemsPanelTemplate>
                                                <StackPanel Orientation="Horizontal" VerticalAlignment="Top">
                                                </StackPanel>
                                            </ItemsPanelTemplate>
                                        </ListBox.ItemsPanel>
                                    <ListBox.ItemTemplate>
                                        <DataTemplate>
                                            <Image Source="{Binding}" Width="160" Height="120" VerticalAlignment="Top"></Image>
                                        </DataTemplate>
                                    </ListBox.ItemTemplate>
                                </ListBox>
                     </StackPanel>
                 </StackPanel>
            </ScrollViewer>         
          </StackPanel>
        </DataTemplate>
      </ListBox.ItemTemplate>
    </ListBox>

My xml file given below

<?xml version="1.0" encoding="utf-8" ?>
  <root>
   <Categories>
     <Category name="Photos">
      <Articles>
       <article  title="Sherawat's">
        <FullContent>
         <style> img {padding:2px;} </style><p> <img alt=" Sherawat" pimcore_disable_thumbnail="true" pimcore_id="5853" pimcore_type="asset" src="http://feb2013/bolly---sherawat-s-upcoming-movie-dirty-politics/90_mallika-sherawat_bolly.jpg" style="width: 500px; height: 370px; float: left;" /></p> <p>Sherawat is all set to begin shooting for&nbsp;<em>Dirty Politics</em>&nbsp;where she plays Bhanwari Devi, a nurse whose murder hit the headlines last year. Meanwhile, she gets talking on&nbsp;Hollywood where she has not really had any meaty roles.</p>
        </FullContent>
        <thumb_image>
          <image  url="http://sss.com/Photo1.jpeg"/>"/>
        </thumb_image>
       </article>
       <article articleid="2684" title="Steals the Mai Show">
        <FullContent>
          <div id="container" class="cf">
           <link rel="stylesheet" href="http://sss.com/imageslider/app/css/demo.css" type="text/css" media="screen" /> <link rel="stylesheet" href="http://sss.com/imageslider/app/css/flexslider.css" type="text/css" media="screen" /><div id="main" role="main"> <section class="slider"> <div class="flexslider"> <ul class="slides"><li>Sonam Kapoor<img src="http://sss.com//website/var/tmp/thumb_5814_1_01feb2013__appfeed.jpeg" alt="Kapoor"/>/li> </ul></li>
         </div>
      </FullContent>
      <thumb_image>
        <image  url="http://Photo2.jpeg"/>"/>
      </thumb_image>
     </article>
    </Articles>
</Category>
<Category name="Videos">
  <Articles>
    <article articleid="415" title=" Dirty Politics">
     <FullContent>
       <style> img {padding:2px;} </style><p> <img alt="Sherawat" pimcore_disable_thumbnail="true" pimcore_id="5853" pimcore_type="asset" src="http://sss.com/bolly/feb2013/bolly---sherawat-s-upcoming-movie-dirty-politics/90_sherawat_bolly.jpg" style="width: 500px; height: 370px; float: left;" /></p>
     </FullContent>
     <thumb_image>
       <image  url="http://Video1.jpeg"/>"/>
     </thumb_image>
    </articles>
    <article articleid="68" title="Digital!">
     <FullContent>
    <p> Touch, tap, flip, slide! You don&#39;you experience it.</p> <br/><br/><br/> <br/><br/>
     </FullContent>
     <thumb_image>
       <image  url="http://Video2.jpeg"/>"/>
     </thumb_image>
   </article>
 </Article>
</Category>
<Category name="Bolly">
  <Articles>
   <article articleid="415" title="upcoming movie">
    <FullContent>
     <style> img {padding:2px;} </style><p> <img alt="Sherawat" pimcore_disable_thumbnail="true" pimcore_id="5853" pimcore_type="asset" src="http://sss.com/bolly/feb2013/bolly---sherawat-s-upcoming-movie-dirty-politics/90_sherawat_bolly.jpg" style="width: 500px; height: 370px; float: left;" /></p>
    </FullContent>
    <thumb_image>
     <image url="http://sss.com/website/var/tmp/thumb_5854_90_mallika-sherawat_thumb_bolly__forfeed.jpeg"/>
    </thumb_image>
   </articles>
   <article articleid="436" title="Surprise Package">
     <Description>
       There was more than just good music at the trio's recent performance
     </Description>
     <FullContent>
       <style> img {padding:2px;} </style><p> <img alt="Akcent" pimcore_disable_thumbnail="true" pimcore_id="6110" pimcore_type="asset" src="http://dev2.mercuryminds.com/global/feb2013/surprise-package-at-akcent-concert/18_akcent_global.jpg" style="width: 370px; height: 500px; float: left;" /></p>
     </FullContent>
     <thumb_image>
       <image url="http://sss.com/website/var/tmp/thumb_6109_18_akcent_thumb__forfeed.jpeg"/>
     </thumb_image>
    </article>
   </Article>
  </Category>
 </Categories>
</root>

My MainPage.xaml.cs code

      void ParseXMLFile(string  dataInXmlFile)
    {
        try
        {
          //Parsing XML File

            XDocument xmlDoc = XDocument.Parse(dataInXmlFile);

            var query = from l in xmlDoc.Descendants("Category")
                        select new Notch
                        {
                            name = (string)l.Attribute("name").Value,
                            Titles = l.Element("Articles").Elements("article")
                                     .Select(s => s.Attribute("title").Value)
                                     .ToList(),

                            Images = l.Element("Articles").Elements("article")
                                     .Elements("thumb_image").Elements("image")
                                     .Select(x => x.Attribute("url").Value).ToList(),

                        };

                        foreach (var result in query)
                        {
                            Console.WriteLine(result.name);
                            foreach (var detail in result.Titles.Zip(result.Images, (st, si) => string.Format("{0} {1}", st, si)))
                            {
                                Console.WriteLine(detail);
                            }
                        }
                        NotchsList11.ItemsSource= query;

        }
        catch(Exception e)
        {
            MessageBox.Show("Binding Failed");
        }

    } 
    private void NotchsList11_SelectionChanged(object sender, SelectionChangedEventArgs e)
   {
      Notch selectedItemData = (sender as ListBox).SelectedValue as Notch;
      if(selectedItemData != null)
       {
     NavigationService.Navigate(new Uri(string.Format("/Test.xaml?parameter",selectedItemData.articleid), UriKind.Relative));
       }
    }

My DetailPage.xaml.cs

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
 {
     base.OnNavigatedTo(e);
     string parameter = this.NavigationContext.QueryString["parameter"];
  }

If i click any image,related title and fullcontent navigate to details page but fullcontent want to show webview on details page. so I tried this code but selectedItemData getting null value.i cant navigate to other page.So any one can help me to resolve in this problem?

Answer 1

In the SelectionChanged event handler of ListBox,, add this line

override NotchsList11_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        var item = NotchsList11.Items[NotchsList11.SelectedIndex] as YourClassUsedForBinding;
        if(item.SomeProperty == "Something")
        NavigationService.Navigate(new Uri("/YourNewPage.xaml", UriKind.Relative));
        else
        NavigationService.Navigate(new Uri("/YourOtherPage.xaml", UriKind.Relative));
        //if more cases use a switch case
    }