Increase touchable target area of a small image? - windows-phone-7

Question

In a listbox I have a list of titles with an edit icon next to each, how do I increase the touchable area so that even if the user touches part of the title, it actually triggers the image event?
I assume I need to wrap the image in another element but cannot work out what that needs to be.
I tried wrapping the image in a button and add padding to the button but then it pushed the UI elements around, I do not want to affect the presentation, just the none-visible touchable area.

Answer 1

Wrap it in a button - you're totally in the right ball-park. But you need to edit the control template of the button and reduce down all the standard padding and margin, borders etc. so its just a raw touchable region.
You can then wrap anything in this button and apply your template/style to make anything interactive.
Luke

Answer 2

You could try wrapping in a Panel or Grid.
Or just adjust the margin and Z-Order.

Answer 3

Put the image in a button, set the size of the button you want & then set the Stroke property to "No brush" on the button to remove the border.

Answer 4

Try it:
<Border BorderBrush="Transparent"
BorderThickness="20,25,20,0"
Background="Transparent">
<Grid/>
</Border>
or use it in other variations:
<Border Background="Transparent">
<Grid Margin="20 25 20 0"/>
</Border>
full sample with button: (no background interaction when pressed at this sample)
<Button BorderBrush="Transparent"
Tag="{Binding SelectedPhoto.commentsCount}">
<Button.Template>
<ControlTemplate>
<Border BorderThickness="20,25,20,0"
BorderBrush="Transparent"
Background="Transparent">
<StackPanel Orientation="Horizontal"
VerticalAlignment="Top">
<Grid Margin="0 0 4 0"
Visibility="{Binding CommentsAllowedForAlbum,Converter={StaticResource BoolToVisibilityConverter}}">
<TextBlock Text="{TemplateBinding Tag}"
Visibility="{Binding SelectedPhoto.HasComments,Converter={StaticResource BoolToVisibilityConverter}}"
Foreground="{StaticResource BlueColorBrush}"
FontSize="{StaticResource MFontSize36}" />
</Grid>
<Image Source="/Images/photo_comments_icon.png"
Stretch="Uniform"
MaxWidth="23"
Visibility="{Binding CommentsAllowedForAlbum,Converter={StaticResource BoolToVisibilityConverter}}"
Margin="0 7 0 0"
VerticalAlignment="Top" />
<Image Source="/Images/photo_comments_icon_blocked.png"
Stretch="Uniform"
MaxWidth="23"
Visibility="{Binding CommentsAllowedForAlbum,Converter={StaticResource OppositeBoolToVisibilityConverter}}"
Margin="0 7 0 0"
VerticalAlignment="Top" />
</StackPanel>
</Border>
</ControlTemplate>
</Button.Template>
</Button>