如何設置頁面從列表框導航到另一頁？

Question

您好我正在使用下面給出的XAML文件。我想導航列表框選擇項目到另一個頁面。

<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> 

下面

<?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> 

我MainPage.xaml.cs中的代碼我的XML文件中給出

 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)); 
     } 
    } 

我DetailPage.xaml.cs

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

如果我點擊任何圖像，相關標題和完整內容導航到detai ls頁面，但fullcontent想要在詳細信息頁面上顯示webview。所以我嘗試了這段代碼，但selectedItemData獲取null值。我不能導航到其他頁面。所以任何人都可以幫助我解決這個問題？

Answer 1

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; 
    } 

設置詳細信息頁面

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中頁面

   <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"); 
     } 

Answer 2

在ListBox的SelectionChanged事件處理程序,,加入這一行

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 
    } 

Answer 3

已設置ItemsSource="{Binding Images}"你的列表框，這意味着你不應該轉換爲Notch在SelectionChangedHandler。每個項目都會收到一個圖像作爲其數據上下文，該數據上下文是Notch實例中的列表Images中的一個元素。

因此，您只能在您的處理程序中投射到String。

您有一個頂級列表框，每個項目都有自己的列表框。您正在跟蹤內部列表的選擇更改，在這種情況下，您的數據上下文是的個別項目，即列表。您無權訪問其中的父範圍。