使用查询字符串从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);