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覆盖do：

中删除所有数据代码

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

使用查询字符串从XML检索图片

2 个答案: