CODEWITHSUNDEEP
silverlightwindows-phone-7
webdad3
webdad3

Reputation: 9090

WP7 - Image Click Event?

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>

Upvotes: 8

Views: 11323

Answers (6)

Vinayak Bevinakatti
Vinayak Bevinakatti

Reputation: 40513

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");
    }

Upvotes: 0

Mick N
Mick N

Reputation: 14882

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.

Upvotes: 9

Sigfrid Maenhout
Sigfrid Maenhout

Reputation: 77

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.

Upvotes: 0

i_am_jorf
i_am_jorf

Reputation: 54640

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.

Upvotes: 0

avanek
avanek

Reputation: 1659

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.

Upvotes: 13

Todd Main
Todd Main

Reputation: 29155

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.

Upvotes: 2

Related Questions