Increase touchable target area of a small image?

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 actu开发者_如何学Cally 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.

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

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

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.

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>