Question

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

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

Answer 2

虽然这里没有太多信息，但我建议您将事件绑定到Image本身，而不是使用Button的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>

Answer 3

使用点击事件：

<Image Tap="doYourThing ... />

如何在ListBox DataTemplate中创建可单击的图像？

修改

3 个答案: