WP7 - Image Click Event?

Question

Is there a way to assign a click event to images? I would like to assign events to the delete and search buttons inside of my listbox that displays my data. Is there a way to do this using the image control or do I have to create a style in BLEND for a button?

        <ListBox x:Name="lbPills" ItemsSource="{Binding pillItemsCollection}" SelectionChanged="lbPills_SelectionChanged">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel x:Name="DataTemplateStackPanel" Orientation="Horizontal">
                        <TextBlock FontFamily="Segoe WP Semibold" FontWeight="Bold" FontSize="30" VerticalAlignment="Top" Margin="20,0">*</TextBlock>
                        <StackPanel>
                            <TextBlock x:Name="ItemText" Text="{Binding Name}" Margin="-2,-13,0,0" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                        </StackPanel>

                        <Image Source="Images/delete.png" Margin="10,0"/>
                        <Image Source="Images/search.png" Margin="10,0"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

Answer 1

To my knowledge there are no listeners on the Image itself for click and gesture events (they will have to be attached via Gestures as previously mentioned). One way to approach this is to re-template the button:

        <Button>
            <Button.Template>
                <ControlTemplate>
                    <Image Source="Images/delete.png" Margin="10,0"/>
                </ControlTemplate>
            </Button.Template>
        </Button>

In setting the template on the button you will override the default template used by the phone (which has the extra padding, thick border, etc.). Using this method will allow you to tie into the button click event.

Answer 2

You can use the gesture listener to detect tap (click) events. A walkthrough here.

WP7 Tip of the Day: Silverlight Toolkit: Gestures

Alternatively, you can place your image into a Button control and retemplate it in blend to have the appearance you want.

Answer 3

Handle the ManipulationCompleted event (which is any tap, double-tap, swipe, caress or fondle) to your image(s). So:

<Image Source="Images/delete.png" Margin="10,0"/> becomes <Image x:Name="ImageDelete" ManipulationCompleted="ImageDelete_ManipulationCompleted" Source="Images/delete.png" Margin="10,0"/>. Then in the ImageDelete_ManipulationCompleted handler, track from whence it came in from the sender and do your thing.

If you want to only track a swipe instead of a tap, just do an if statement on the e.IsInertial from ManipulationCompletedEventArgs.

Answer 4

If your ListBox is not in a Panorama control, then you could just handle the SelectionChanged event for the list box and then display the Delete and Search options in an ApplicationBar for the page.

Answer 5

I do it with MouseLeftButtonDown and MouseLeftButtonUp. It replaces the tab or click on the device like you have click event on pc with mouse. It works in my app. Just try this and you will be happy, I guess.

Answer 6

It worked this way for me (Making Padding="-10" removed the button border and padding inside the button)

<Button x:Name="Channells" Click="Thumb_Click" Padding="-10" >
      <Image 
           VerticalAlignment="Center"
           Source="Assets/Images/thumb2.jpg"/>
</Button>

*.cs

 void Thumb_Click(object sender, RoutedEventArgs e)
    {
        Debug.WriteLine("Thumb Clicked");
    }