WP7 - Click Event Image?

Question

Can I assign a click event to images? I would like to assign events to the delete and search buttons inside my list, which displays my data. Is there a way to do this using the image control or do I need to create a BLEND style for the 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

You can use the gesture listener to detect click (click) events. Walkthrough here.

WP7 Tip of the Day: Silverlight Toolkit: Gestures

Alternatively, you can put your image in the Button control and put it in the mix to have the look you want.

Answer 2

As far as I know, the image itself does not display listeners for click events and gestures (they must be attached using Gestures, as mentioned earlier). One way to get closer to this is to reformat the button:

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

When configuring the template on the button, you will override the default template used by the phone (with additional filling, thick border, etc.). Using this method will allow you to bind a button click event.

Answer 3

Handle the ManipulationCompleted event (which is any tap, double-tap, napkin, caress or caress) 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 ImageDelete_ManipulationCompleted track where it came from from sender and do your job.

If you want to track only napkins instead of a tap, simply execute the if statement on e.IsInertial with ManipulationCompletedEventArgs .

Answer 4

If your ListBox not in the Panorama element, you can simply handle the SelectionChanged event for the list, and then display the "Delete" and "Search" options in the ApplicationBar for the page.

Answer 5

I do this with MouseLeftButtonDown and MouseLeftButtonUp. It replaces the tab or clicks on the device as you press the mouse button on the PC with the mouse. It works in my application. Just try this and you will be happy, I think.

Answer 6

This worked for me (Make Padding = "- 10" removed the button frame and added 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"); }