How to set Page Navigation from Listbox to another

问题:

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?

回答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
    }

回答2:

You have set ItemsSource="{Binding Images}" for your list box which means that you should not cast to Notch in your SelectionChangedHandler. Every item receives an image as its data context which is an element from the list Images inside a Notch instance.

Therefore, you can only cast to String inside your handler.

You have a top-level listbox and each item again has its own listbox. You are tracking the selection changes for the inner list and in that case your data context is individual item for that list. You do not have access to parent scope inside it.

回答3:

   private void NotchsList11_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {

        var lb = sender as ListBox;
        if (lb == null) return;
        var articleSubItem = lb.SelectedItem as NotchSubItem;
        if (articleSubItem == null)  return;

        App.CurrentArticle = articleSubItem;
        NavigationService.Navigate(new Uri("/Test.xaml?selectedItem=" + articleSubItem.ArticleId, UriKind.Relative));
        NotchsList11.SelectedIndex = -1;
    }

To set details page

   protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
    {
        string selectedIndex = "";
        if (NavigationContext.QueryString.TryGetValue("selectedItem", out selectedIndex))
        {
            title.Text = App.CurrentArticle.Titles;

            webBrowser.NavigateToString(App.CurrentArticle.FullContent);

        }
        base.OnNavigatedTo(e);

    }

MainPage.xaml page

              <StackPanel Width="Auto">
                            <StackPanel VerticalAlignment="Top" Width="Auto">
                                <ListBox  ItemsSource="{Binding Articles}"   Margin="5,5,5,0" Width="Auto" ScrollViewer.VerticalScrollBarVisibility="Disabled" SelectionChanged="NotchsList11_SelectionChanged">
                                    <ListBox.ItemsPanel>
                                        <ItemsPanelTemplate>
                                            <StackPanel Orientation="Horizontal"  VerticalAlignment="Top">
                                            </StackPanel>
                                        </ItemsPanelTemplate>
                                    </ListBox.ItemsPanel>
                                    <ListBox.ItemTemplate>
                                        <DataTemplate>
                                            <Border BorderBrush="#302c2d" Background="#302c2d" BorderThickness="5,5,5,0"   Name="image"  Margin="3,0,3,0">
                                                <Image Source="{Binding Image}"  Width="141" Height="95" Name="value"  Stretch="Fill" VerticalAlignment="Top"></Image>
                                            </Border>
                                        </DataTemplate>
                                    </ListBox.ItemTemplate>
                                </ListBox>
                            </StackPanel>
                            <StackPanel Orientation="Horizontal" VerticalAlignment="Top"  Width="Auto">
                                <ListBox  x:Name="NotchsList11"  ItemsSource="{Binding Articles}"  Margin="5,0,5,0"   ScrollViewer.VerticalScrollBarVisibility="Disabled" SelectionChanged="NotchsList11_SelectionChanged">
                                    <ListBox.ItemsPanel>
                                        <ItemsPanelTemplate>
                                            <StackPanel Orientation="Horizontal">
                                            </StackPanel>
                                        </ItemsPanelTemplate>
                                    </ListBox.ItemsPanel>
                                    <ListBox.ItemTemplate>
                                        <DataTemplate >
                                            <Border BorderBrush="#302c2d" Background="#302c2d"  BorderThickness="5,5,5,0"  Margin="3,0,3,0">
                                                <TextBlock Text="{Binding Titles}"   Width="141" Height="90" Padding="3,0,0,30"  TextWrapping="Wrap"></TextBlock>
                                            </Border>
                                        </DataTemplate>
                                    </ListBox.ItemTemplate>
                                </ListBox>
                            </StackPanel>
                        </StackPanel>

MainPage.xaml.cs

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(),


                            Articles = l.Element("Articles").Elements("article")
                                        .Select(article =>  new NotchSubItem
                                        {
                                        Image = article.Element("thumb_image").Element("image").Attribute("url").Value,
                                        ArticleId = article.Attribute("articleid").Value,
                                        FullContent = article.Element("FullContent").Value.ToString(),
                                        Titles = article.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");
        }