如何使 ListBox DataTemplate 中的图像可点击？答案

【问题标题】：How do I make an image in ListBox DataTemplate clickable?如何使 ListBox DataTemplate 中的图像可点击？
【发布时间】：2011-07-21 20:54:17
【问题描述】：

我正在为 WP7 制作一个聊天客户端，您可以在其中分享照片。

我们有一个设置，其中一条消息显示在一个带有用户昵称的小聊天框中，一个用于图像的 StackPanel（如果随消息一起提供了 URL 字符串），以及一个用于消息文本的 StackPanel。

如果用户可以直接点击图片来查看更大的版本，那就太好了。但是，我无法触发任何事件。

我之前使用过将按钮模板更改为图像的方法（虽然不是在数据模板中），但效果很好。但是这个 DataTemplate（与完整视图分开的文件）不起作用。

我怎样才能做到这一点？这在 ListBox 中是否可行，还是我坚持必须选择整个消息，然后查看图像的完整视图的尴尬 Twitter 风格？

编辑

我尝试了 GestureListener 方法，但遇到了一个问题，它无法解析事件处理程序名称，并且在我运行应用程序时会抛出异常。

我的数据模板位于单独的 XAML 文件中。我认为在与 PhoneApplicationPage 相同的文件中定义每个模板不会有任何区别。对吗？

<DataTemplate x:Name="LeftMessageTemplate">
    <Grid Margin="0,0,0,17" HorizontalAlignment="Stretch">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="70"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Border Grid.Column="0" BorderThickness="3" BorderBrush="{StaticResource ChatPivotSubBrush}" Margin="0, 3, 9, 0" VerticalAlignment="Top">
            <Image Source="{Binding AvatarURL}" Height="60" Width="60" VerticalAlignment="Top"/>
        </Border>
        <Grid Grid.Column="1" Width="372" VerticalAlignment="Top">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"></ColumnDefinition>
                <ColumnDefinition Width="*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <StackPanel Grid.Column="0" HorizontalAlignment="Right" Orientation="Horizontal" Background="Transparent">
                <Image Source="/my_chatclient;component/Images/chattheirspointercroppedwp7.png" VerticalAlignment="Top" Margin="0, 28, 0, 0" Height="19" Width="13"/>
                <StackPanel Background="{StaticResource ChatPivotMainBrush}" Width="Auto" HorizontalAlignment="Left" MinHeight="66" VerticalAlignment="Top" Margin="0, 3, 0, 0" Orientation="Horizontal">
                    <StackPanel Margin="4, 4, 4, 4">
                        <Button>
                            <Button.Template>
                                <ControlTemplate>
                                    <Image Source="{Binding PictureURLPreview}" VerticalAlignment="Top" MaxWidth="200"/>
                                </ControlTemplate>
                            </Button.Template>
                            <i:EventTrigger EventName="Click">
                                <GalaSoft_MvvmLight_Command:EventToCommand Command="{Binding ViewPictureCommand, Mode=OneWay}" />
                            </i:EventTrigger>
                        </Button>
                    </StackPanel>
                    <StackPanel MaxWidth="340" Orientation="Vertical" Margin="12,12,12,12">
                        <TextBlock FontWeight="Bold" Foreground="{StaticResource ChatDarkerBlueBrush}" Text="{Binding CreatorNicknameLabel}" TextWrapping="NoWrap" Margin="0, 0, 0, 0"  FontSize="18" />
                        <TextBlock MaxWidth="316" Foreground="{StaticResource ChatDarkerBlueBrush}" Text="{Binding Text}" TextWrapping="Wrap" Margin="0,0,0,0" FontSize="16" />
                        <TextBlock Foreground="{StaticResource ChatDarkerBlueBrush}" FontWeight="Light" Text="{Binding CreatedAtLabel}" TextWrapping="Wrap" Margin="0, 0,0 ,0" FontSize="14" />
                    </StackPanel>
                </StackPanel>
            </StackPanel>
        </Grid>
    </Grid>
</DataTemplate>

【问题讨论】：

标签： c# silverlight xaml listbox windows-phone

【解决方案1】：

如果我理解正确，这里有一个方法来完成它。使用事件处理程序将图像添加到按钮。比如：

           <StackPanel Grid.Column="0" HorizontalAlignment="Right" Orientation="Horizontal" Background="Transparent">
            <Button Click="ShowLarger" BorderThickness="0">
                <Image Source="/my_chatclient;component/Images/chattheirspointercroppedwp7.png" VerticalAlignment="Top" Margin="0, 28, 0, 0" Height="19" Width="13"/>
            </Button>
            <StackPanel Background="{StaticResource ChatPivotMainBrush}" Width="Auto" HorizontalAlignment="Left" MinHeight="66" VerticalAlignment="Top" Margin="0, 3, 0, 0" Orientation="Horizontal">
                <StackPanel Margin="4, 4, 4, 4">
                    <Button>
                        <Button.Template>

【讨论】：

这完成了与我上面的 XAML 相同的事情，除了它只是在按钮上保留了默认的白色边框模板。问题是在外部 XAML 文件中使用 DataTemplate。

【解决方案2】：

虽然这里没有太多信息，但我建议您将事件绑定到图像本身，而不是使用按钮的 ContentTemplate。

使用Silverlight Toolkit，您可以简单地使用他们的geatureservice，如下所示：

<Image Source="{Binding PictureURLPreview}" VerticalAlignment="Top" MaxWidth="200">
    <toolkit:GestureService.GestureListener>
        <toolkit:GestureListener>
            <i:EventTrigger EventName="Tap">
                <GalaSoft_MvvmLight_Command:EventToCommand Command="{Binding ViewPictureCommand, Mode=OneWay}" />
            </i:EventTrigger>
        </toolkit>
    </toolkit:GestureService.GestureListener>
</Image>

【讨论】：

这看起来是朝着正确方向迈出的一步，但 toolkit:GestureListener 不支持直接内容。所以我只设置了 Tap="Image_TapHandler"，其中 Image_TapHandler 是在我的视图代码隐藏中声明的函数，但这会导致 AG_E_PARSER_BAD_PROPERTY_VALUE 异常。

【解决方案3】：

使用点击事件：

<Image Tap="doYourThing ... />

【讨论】：