使用查詢字符串從XML中檢索圖片

Question

我使用LINQ將圖像從XML解析爲單個頁面。我想在用戶單擊某個特定按鈕時只顯示一張圖片。問題是列表框一次顯示XML中的所有圖片，而不是我希望顯示的圖片。如何使用NavigationContext.QueryString僅顯示與特定按鈕關聯的圖片？我嘗試過，但它仍然顯示多張照片。

下面是XML文件的樣本：

<?xml version="1.0" encoding="utf-8" ?> 
    <Exercises> 
     <Exercise name = "Exercise 1"> 
     <image>/Images/BeginnerEX/ex1.jpg</image> 
     <audio>/Audio/ex1.mp3</audio> 
     </Exercise> 
     <Exercise name = "Exercise 2"> 
     <image>/Images/BeginnerEX/ex2.jpg</image> 
     <audio>"/Audio/ex2.mp3"</audio> 
     </Exercise> 
     <Exercise name = "Exercise 3"> 
     <image>/Images/BeginnerEX/ex3.jpg</image> 
     <audio>"/Audio/ex3.mp3"</audio> 
     </Exercise> 
    </Exercises> 

按鈕單擊事件：

private void begButton1_Click(object sender, RoutedEventArgs e) 
    { 
     string name = "Exercise 1"; 
     NavigationService.Navigate(new Uri(string.Format("/BeginnerExercisePage.xaml?Exercise={0}", name), UriKind.Relative)); 

    } 

我要顯示一個畫面的頁：

public partial class BeginnerExercisePage : PhoneApplicationPage 
{ 
    public BeginnerExercisePage() 
    { 
     InitializeComponent(); 

     XDocument beginnerExerciseData = XDocument.Load("BeginnerXML.xml"); 

     var data = from query in beginnerExerciseData.Descendants("Exercise") 
        select new Exercise 
        { 
         ExImage = (string)query.Element("image"), 
         ExAudio = (string)query.Element("audio") 

        }; 
     lbBegExPage.ItemsSource = data; 

    } 

    public class Exercise 
    { 
     string image; 
     string audio; 

     public string ExAudio 
     { 
      get { return audio; } 
      set { audio = value; } 

     } 

     public string ExImage 
     { 
      get { return image; } 
      set { image = value; } 

     } 

    } 

    protected override void OnNavigatedTo(NavigationEventArgs e) 
    { 
     base.OnNavigatedTo(e); 

     string name = string.Empty; 
     if (NavigationContext.QueryString.TryGetValue("name", out name)) 
     { 
      this.lbBegExPage.ItemsSource = name; 
     } 


    } 
} 

XAML：`這裏是XAML：

<!--LayoutRoot is the root grid where all page content is placed--> 
<Grid x:Name="LayoutRoot" Background="Transparent"> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="Auto"/> 
     <RowDefinition Height="*"/> 
    </Grid.RowDefinitions> 

    <!--TitlePanel contains the name of the application and page title--> 
    <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28"> 
     <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/> 
     <TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/> 
    </StackPanel> 

    <!--ContentPanel - place additional content here--> 
    <StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" Orientation="Horizontal"> 
     <ListBox x:Name="lbBegExPage"> 
      <ListBox.ItemTemplate> 
       <DataTemplate> 
        <StackPanel Margin="10"> 
         <Image Source="{Binding ExImage}" /> 
        </StackPanel> 
       </DataTemplate> 
      </ListBox.ItemTemplate>  
     </ListBox> 
    </StackPanel> 
</Grid> 

<!--Sample code showing usage of ApplicationBar--> 
<!--<phone:PhoneApplicationPage.ApplicationBar> 
    <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True"> 
     <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/> 
     <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/> 
     <shell:ApplicationBar.MenuItems> 
      <shell:ApplicationBarMenuItem Text="MenuItem 1"/> 
      <shell:ApplicationBarMenuItem Text="MenuItem 2"/> 
     </shell:ApplicationBar.MenuItems> 
    </shell:ApplicationBar> 
</phone:PhoneApplicationPage.ApplicationBar>--> 

`

Answer 1

什麼是你的XAML是怎樣的？我猜你在ListBox的（lbBegExPage）DataTemplate中有一個Image。您應該可以將它放在ListBox之外並將其Source屬性設置爲{Binding SelectedItem.ExImage，ElementName = lbBegExPage}

對不起，我誤解了您的意圖。假設你的起始頁面只有3個硬編碼按鈕，將導航練習的名稱傳遞給第二頁 - 你應該修改你的BeginerExercisePage頁面。從構造，並在重寫的OnNavigatedTo刪除所有數據的代碼做：

var exercise = (from ex in beginnerExerciseData.Descendants("Exercise") 
       where ex.Attribute("name") == name 
       select new Exercise 
       { 
        ExImage = (string)query.Element("image"), 
        ExAudio = (string)query.Element("audio") 
       }).Single(); 
    im.Source = new BitmapImage(new Uri(exercise.ExImage, UriKind.Relative)); 

更換

<StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" Orientation="Horizontal"> 
    <ListBox x:Name="lbBegExPage"> 
     <ListBox.ItemTemplate> 
      <DataTemplate> 
       <StackPanel Margin="10"> 
        <Image Source="{Binding ExImage}" /> 
       </StackPanel> 
      </DataTemplate> 
     </ListBox.ItemTemplate>  
    </ListBox> 
</StackPanel> 

隨着

<Image x:Name="im" Grid.Row="1" Margin="12,0,12,0"/> 

Answer 2

試試這個修改後的代碼：

var data = (from query in beginnerExerciseData.Descendants("Exercise") 
        select new Exercise 
        { 
         ExImage = (string)query.Element("image"), 
         ExAudio = (string)query.Element("audio") 

        }).Take(1);