使用查詢字符串從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

試試這個修改后的代碼

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

                   }).Take(1);

Answer 2

你的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"/>