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

发布于 2024-12-06 03:08:22 字数 1872 浏览 1 评论 0原文

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

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

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

原文

I'm using the following button style which takes away the borders and makes a transparent background to make my image buttons:

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

The Style is from the following answer:
WPF button with image of a circle

The problem now is that the clickable area is confined to the image regardless of how big the actual button is:

Button problem

My button code:

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

Question: how do I make the whole button area react to the click? I want to keep it transparent and without border as it is now.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

七禾 2024-12-13 03:08:22

您可以将演示者包装在带有绑定背景的Border中。

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

该样式将背景设置为透明的东西，但它甚至从未在模板中使用，这样边框将使整个区域命中-测试。

You could wrap the presenter in a Border with a bound Background.

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

The style sets the Background to something transparent but it was never even used in the Template, this way the Border will make the whole area hit-test.

回复收藏 0 原文

陌路黄昏 2024-12-13 03:08:22

在调查问题数小时后，只需在上面的答案中添加一些信息即可。

如果您像上面的示例一样定义自己的模板，那么您将更改元素的可视化树。在上面的示例中，应用 Style="{DynamicResource EmptyButtonStyle}" 它变成：

Button
  |
ContentPresenter

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

Button
  |
ButtonChrome
  |
ContentPresenter

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

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

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

编辑：最后一点在此处的评论中回答图像按钮仅在单击图像时响应，而不是按钮内周围的区域

Just adding some info to the answer above after investigating the issue for hours.

If you are defining your own template as in the example above you are changing the visual tree of the element. In the above example applying the Style="{DynamicResource EmptyButtonStyle}" it becomes:

Button
  |
ContentPresenter

But if you look at the visual tree of a standard button(you can do this in Visual Studio) it looks like this:

Button
  |
ButtonChrome
  |
ContentPresenter

So in the styled button there is nothing around the ContentPresenter to be clicked on, and if the Content is in the "middle" the surrounding area will be left totally empty. We have to add an element to take this place:

You can do it with a <Border>(I think this is best because Border is a lightweight element I suppose) or some other element, I tried <Grid> and <DockPanel> and both worked.

The only thing I don't understand is why you need to explicitly set the background to something transparent, just leaving it out will not produce a clickable area.

Edit: Last point answered in the comments here Image Button only responds when clicking on the image and not the area around inside the button

回复收藏 0 原文