Reputation: 9090
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
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
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
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
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
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
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