Увеличьте зону видимого целевого объекта небольшого изображения?

Question

В списке У меня есть список названий с значком редактирования рядом с каждым, как увеличить зону касания, чтобы, даже если пользователь коснулся части названия, он фактически запускает событие изображения?

Я предполагаю, что мне нужно обернуть изображение в другом элементе, но не могу понять, что это должно быть.

Я попробовал обернуть изображение кнопкой и добавить отступы к кнопке, но затем он подтолкнул элементы пользовательского интерфейса вокруг, я не хочу влиять на презентацию, только на невидимую осязаемую область.

Answer 1

Оберните его одним нажатием кнопки - вы полностью в правильном шаровом парке. Но вам нужно отредактировать шаблон управления кнопки и уменьшить все стандартные отступы и маржу, границы и т. Д., Так что это просто необработанный осязаемый регион.

Затем вы можете обернуть что-нибудь в эту кнопку и применить свой шаблон/стиль, чтобы сделать что-то интерактивное.

Люк

Answer 2

Вы можете попробовать упаковать в Panel или Grid.
Или просто отрегулируйте запас и Z-порядок.

Answer 3

Поместите изображение в кнопке, установите размер кнопки вы хотите & затем установите свойство обводки «Нет кисти» на кнопку, чтобы удалить границу.

Answer 4

Попробуйте:

<Border BorderBrush="Transparent" 
     BorderThickness="20,25,20,0" 
     Background="Transparent"> 
     <Grid/> 
</Border> 

или использовать его в других вариантах:

<Border Background="Transparent"> 
     <Grid Margin="20 25 20 0"/> 
</Border> 

полный образца с помощью кнопки (без фона взаимодействия при нажатии на данном примере)

<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>