图像按钮仅在单击图像而不是按钮内部区域时响应

Posted 2023-02-22

【中文标题】图像按钮仅在单击图像而不是按钮内部区域时响应

【英文标题】：Image Button only responds when clicking on the image and not the area around inside the button

【发布时间】：2011-11-24 09:44:44

【问题描述】：

我正在使用以下按钮样式，它去掉了边框并制作了透明背景来制作我的图像按钮：

  <Style x:Key="EmptyButtonStyle" TargetType="x:Type Button">
    <Setter Property="Background" Value="#00000000"/>
    <Setter Property="BorderBrush" Value="#00000000"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="Foreground" Value="DynamicResource x:Static SystemColors.ControlTextBrushKey"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Padding" Value="1"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="x:Type Button">
                <ContentPresenter 
                    HorizontalAlignment="TemplateBinding HorizontalContentAlignment" 
                    Margin="TemplateBinding Padding" 
                    RecognizesAccessKey="True" 
                    SnapsToDevicePixels="TemplateBinding SnapsToDevicePixels" 
                    VerticalAlignment="TemplateBinding VerticalContentAlignment"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

样式来自以下答案： WPF button with image of a circle

现在的问题是，无论实际按钮有多大，可点击区域都仅限于图像：

我的按钮代码：

<Button Name="n02" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Style="DynamicResource EmptyButtonStyle" Canvas.Left="308" Canvas.Top="157" Height="106" Width="120">
        <Image Source="boto_face_off.PNG" Height="61" Width="59" />
    </Button>

问题：如何让整个按钮区域对点击做出反应？我想让它保持透明且没有边界，就像现在一样。

【问题讨论】：

我不太确定您关于“这是整个按钮区域”的断言是否正确。我怀疑那个盒子是你画布的边界——而不是你的功能按钮的边界。在你的按钮 Style 上放置一个临时的红色边框，看看它是否有你认为的边框。

@Balam 无论颜色和粗细如何，边框都不会显示。但是我看到了设计器上的按钮区域，如果我从样式中删除“模板”，边框就会出现，整个区域都可以点击，正如预期的那样。模板所做的事情就是搞砸了。

我会删除所有的 setter 属性，然后一次添加一个，看看其中一个是否破坏了它。我不明白为什么你不能显示边框。我只是将 Style="StaticResource x:Static ToolBar.ButtonStyleKey" 用于没有边框的按钮。

【参考方案1】：

我有按钮，其中内容是包含图像和文本块的网格

我通过将透明背景添加到网格来修复可点击区域

Background="#00000000"

【参考方案2】：

在调查了几个小时后，在上面的答案中添加了一些信息。

如果您在上面的示例中定义自己的模板，则您正在更改元素的可视化树。在上面应用Style="DynamicResource EmptyButtonStyle" 的示例中，它变为：

Button
  |
ContentPresenter

但是，如果您查看标准按钮的可视化树（您可以在 Visual Studio 中执行此操作），它看起来像这样：

Button
  |
ButtonChrome
  |
ContentPresenter

因此，在样式按钮中，ContentPresenter 周围没有可点击的内容，如果内容位于“中间”，则周围区域将完全为空。我们必须添加一个元素来代替这个位置：

您可以使用 <Border>（我认为这是最好的，因为我认为 Border 是一个轻量级元素）或其他一些元素，我尝试了 <Grid> 和 <DockPanel> 并且都有效。

我唯一不明白的是为什么您需要将背景显式设置为透明的，只是将其保留不会产生可点击区域。

编辑：最后一点在 cmets 中回答 Image Button only responds when clicking on the image and not the area around inside the button

【参考方案3】：

您可以将演示者包装在 Border 中，并绑定 Background。

<ControlTemplate TargetType="x:Type Button">
     <Border Background="TemplateBinding Background">
          <!-- ContentPresenter here -->
     </Border>
</ControlTemplate>

该样式将Background 设置为透明的，但它甚至从未在Template 中使用过，这样Border 将使整个区域成为热门测试。

【讨论】：

我唯一不明白的是为什么你需要明确地将背景设置为透明的东西，只是将其省略不会产生可点击区域。

@Mr.Roland：就是这样实现的，让命中测试更加灵活。

是的 - 我需要的只是背景属性集！