我如何使一个图像在ListBox DataTemplate可点击

本文关键字：DataTemplate ListBox 何使一 图像 | 更新日期: 2023-09-27 18:02:57

我正在为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>

我如何使一个图像在ListBox DataTemplate可点击

如果我理解正确的话，这里有一种方法可以完成它。将图像添加到带有事件处理程序的按钮中。比如:

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

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

使用Silverlight Toolkit，你可以简单地使用他们的特性服务，像这样:

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

使用Tap-event:

<Image Tap="doYourThing ... />
相关文章：