I'm making a chat client for WP7 in which you can share photos.
We have a setup where a message appears in a little chat box with user's nickname, a StackPanel for an image (if a URL string is provided along with the message), and a StackPanel for the message text.
It'd be great if a user could tap directly on the image to see a larger version. However, I can't get any events to fire.
I've used the approach of changing a button's template to be just an image before (not in a data template though) and it's worked fine. But this DataTemplate (separate file from the full view) is not working.
How can I accomplish this? Is this doable in a ListBox, or am I stuck to the awkward Twitter style of having to select the whole message, then look at a full view of the image?
I tried the GestureListener approach, but ran into a problem where it couldn't parse the event handler name and would just throw an exception when I ran the app.
My data templates are in separate XAML files. I assumed there wouldn't be any difference in defining each template in the same file as the PhoneApplicationPage. Is that correct?
<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>
If I understood it correct, here is a way to accomplish it. Add the image to a button with an event handler. Something like:
<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>
While there's not a awful lot of information here, I would recommend you bind a event to the Image itself, rather than using a Button's ContentTemplate for it.
With the Silverlight Toolkit you can simply use their geatureservice, like this:
<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>
Use the Tap-event:
<Image Tap="doYourThing ... />
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.