WP7 Silverlight - 在堆栈面板滚动视图中点击图像以在另一个网格中显示相同的图片

Question

我可能是尝试创建 Windows Phone 7 应用程序的绝对最差的“编码员”，但我急需帮助，你们中的一些人甚至可能认为这非常简单（可能确实如此）。

我的问题：我到底如何编码从一个网格中点击图片以在另一个网格上显示为更大的图像？

我会详细说明：

我有一个应用页面（仅限横向模式），有两个网格分隔屏幕。

第一个网格 (smallgrid) 包含一个 Scrollviewer (small) 和一个 Stackpanel (smallimages)，其中的图像缩小到其大小的 1/10，主要显示图像的缩略图。

第二个网格 (contentgrid) 设计用于点击smallgrid 中的缩略图图像，该图像将显示在contentgrid 中

默认情况下，气球 0 显示在 contentgrid 中，当有人点击其中一个较小的图像时会发生变化。

我会尝试为此提供一些模拟代码：

<grid x:name="smallgrid">
  <scrollviewer x:name="small">
    <stackpanel x:name="smallimages">
      <image="balloon0.jpg"><image>
      <image="balloon1.jpg"><image>
      <image="balloon2.jpg"><image>
      <image="balloon3.jpg"><image>
    </stackpanel>
  </scrollviewer>
</grid>

<grid x:name="contentgrid">
  <image source="balloon0.jpg"><image>
</grid>

后面的代码是我需要帮助的地方。我想我要么使用一个按钮，一旦单击，该图像就会替换 contentgrid 中的图像，但我不知道该怎么做。

或者我可以使用手势监听器，当点击图像时，它将替换 contentgrid 中的图像...但我也不知道该怎么做。

任何见解都是有帮助的。感谢您的帮助，因为我不是 C# 编码器，更不用说太了解语言或 WP7 silverlight。

Answer 1

确保将 Silverlight Toolkit 程序集引用添加到您的 phoneapplicationpage 元素（并作为对项目的引用）：

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

您可以像这样在您的 XAML 中使用 Silverlight 工具包中的 GestureListener（还请务必将 name 属性添加到您的大图像中）：

<grid x:name="smallgrid">
   <scrollviewer x:name="small">
      <stackpanel x:name="smallimages">
         <image="balloon0.jpg">
           <toolkit:GestureService.GestureListener>
             <toolkit:GestureListener Tap="smallImage_Tap" />
           </toolkit:GestureService.GestureListener>
         <image>
         <image="balloon1.jpg">
           <toolkit:GestureService.GestureListener>
             <toolkit:GestureListener Tap="smallImage_Tap" />
           </toolkit:GestureService.GestureListener>
         <image>
         <image="balloon2.jpg">
           <toolkit:GestureService.GestureListener>
             <toolkit:GestureListener Tap="smallImage_Tap" />
           </toolkit:GestureService.GestureListener>
         <image>
         <image="balloon3.jpg">
           <toolkit:GestureService.GestureListener>
             <toolkit:GestureListener Tap="smallImage_Tap" />
           </toolkit:GestureService.GestureListener>
         <image>
      </stackpanel>
   </scrollviewer>
</grid>

<grid x:name="contentgrid">
   <image x:Name="BigImage" source="balloon0.jpg"><image>
</grid>

然后在您的代码隐藏中，您可以像这样处理事件：

private void smallImage_Tap(object sender, GestureEventArgs e)
{
    BigImage.Source = (sender as Image).Source;
}

Answer 2

如果您查看工具包源代码，则似乎只要 XNA TouchPanel 检测到 Tap 手势，就会生成 GestureListener.Tap 事件。直觉上，我希望每当生成 MouseLeftButtonUp 事件时都会发生这种情况。好吧，并非总是如此，但在所描述的交互类型中，它基本上是“总是”。

因此，我觉得这两个级别（XNA 和 Toolkit 类）都是不必要的开销 - 至少对于像点击事件这样简单的事情。 （其他负面后果：由于必须包含工具包，应用程序大小会增加，由于必须加载更多程序集而导致启动速度变慢。）

话虽如此，我还是先简单地听一下 MouseLeftButtonUp 事件，例如

<Image Source="123.jpg" MouseLeftButtonUp="smallImage_Tap" ImageOpened="..." ImageFailed="..."/>

我还包括 ImageOpened/Failed 事件。您可以选择使用它们来微调您的应用程序。它们可以解决诸如点击事件太频繁或图像加载失败等问题。