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

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

1 голос
/ 22 июля 2011

Я создаю чат-клиент для WP7, в котором вы можете делиться фотографиями.

У нас есть настройка, в которой в маленьком окне чата появляется сообщение с никнеймом пользователя, StackPanel для изображения (если вместе с сообщением указана строка URL) и StackPanel для текста сообщения.

Было бы здорово, если бы пользователь мог нажать прямо на изображение, чтобы увидеть увеличенную версию. Тем не менее, я не могу получить какие-либо события для запуска.

Я использовал метод изменения шаблона кнопки, чтобы он был просто изображением раньше (но не в шаблоне данных), и он работал нормально. Но этот DataTemplate (отдельный файл из полного представления) не работает.

Как мне это сделать? Это выполнимо в ListBox, или я застрял в неловком стиле Твиттера, когда нужно выделить все сообщение, а затем посмотреть на полный просмотр изображения?

EDIT

Я попробовал подход 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>

Ответы [ 3 ]

1 голос
/ 22 июля 2011

Хотя здесь не так уж много информации, я бы порекомендовал связать событие с самим изображением, а не использовать для него шаблон 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>
1 голос
/ 05 декабря 2011

Использовать событие Tap: 

<Image Tap="doYourThing ... />
1 голос
/ 22 июля 2011

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

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