Question

在列表框中，我有一个标题列表，每个标题旁边都有一个编辑图标，如何增加可触摸区域，以便即使用户触摸标题的一部分，它实际上也会触发图像事件？

我认为我需要将图像包装在另一个元素中，但无法解决需要的问题。

我尝试将图像包装在按钮中并向按钮添加填充，但随后它推动了UI元素，我不想影响演示，只是不可见的可触摸区域。

Answer 1

将它包裹在一个按钮中 - 你完全在正确的球场。但是你需要编辑按钮的控制模板并减少所有标准的填充和边距，边框等，所以它只是一个原始的可触摸区域。

然后您可以在此按钮中包装任何内容并应用您的模板/样式以使任何内容具有交互性。

路

Answer 2

您可以尝试换行Panel或Grid 或者只是调整保证金和Z-Order。

Answer 3

将图像放入按钮，设置所需按钮的大小＆amp;然后在按钮上将Stroke属性设置为“No brush”以删除边框。

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>

增加小图像的可触摸目标区域？

4 个答案: