Как сделать изображение в ListBox DataTemplate кликабельным?

Я делаю чат-клиент для 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# xaml listbox silverlight windows-phone
person michael.bartnett    schedule 21.07.2011    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Если я правильно понял, вот способ сделать это. Добавьте изображение на кнопку с помощью обработчика событий. Что-то типа:

           <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>
person Vivek Nirkhe    schedule 21.07.2011
comment
Это выполняет то же самое, что и мой XAML выше, за исключением того, что он просто оставляет шаблон белой рамки по умолчанию на кнопке. Проблема заключается в использовании DataTemplate во внешнем файле XAML. - person michael.bartnett; 22.07.2011

arrow_upward
1
arrow_downward

Хотя здесь не очень много информации, я бы порекомендовал вам привязать событие к самому изображению, а не использовать для него 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>
person Claus Jørgensen    schedule 21.07.2011
comment
Это выглядит как шаг в правильном направлении, но инструментарий:GestureListener не поддерживает прямой контент. Поэтому я просто установил Tap=Image_TapHandler, где Image_TapHandler был функцией, объявленной в программном коде моего представления, но это вызвало исключение AG_E_PARSER_BAD_PROPERTY_VALUE. - person michael.bartnett; 22.07.2011

arrow_upward
1
arrow_downward

Используйте событие Tap:

<Image Tap="doYourThing ... />
person Tim Dams    schedule 05.12.2011