How to hit detect on a null or transparent background?

Question

I'm running into a problem where a button with path content is only detecting mouse clicks on the path. I'd like to, for ux, to have the click registered anywhere in the button. I've set the background of the button to both null and transparent so the top control container dictates the background style.

Here's another SO post : Mouse event on transparent background

As stated I've tried both transparent and null so far.

<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:wpfMyCustomControl">

<ControlTemplate x:Key="IconTemplate" TargetType="{x:Type ContentControl}">
    <Grid>
        <Path Name="ForegroundSymbol" Data="M0,0 L1,0 1,1 0,1 0.5,0.5 z" Fill="{TemplateBinding Foreground}" Stretch="Fill" />
    </Grid>
</ControlTemplate>

<Style x:Key="IconButtonStyle" TargetType="{x:Type RepeatButton}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type RepeatButton}">
                <Grid>
                    <ContentControl Name="icon" Template="{StaticResource IconTemplate}" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>


<ControlTemplate x:Key="MyCustomTemplate" TargetType="{x:Type local:MyCustomControl}">
    <Grid Name="LayoutRoot" Background="Red">
        <RepeatButton Background="{x:Null}" Style="{StaticResource ResourceKey=IconButtonStyle}" />
    </Grid>
</ControlTemplate>

<Style TargetType="{x:Type local:MyCustomControl}">
    <Setter Property="Template" Value="{StaticResource ResourceKey=MyCustomTemplate}" />
</Style>
</ResourceDictionary>

If I remove the "x:Key" attribute from "Style", the control renders. I've been able to reproduce the issue, with the above xaml control style, where the hit detection does not trigger on the "background" portion of the button.

Would help immensely if you provided some code for us to see. — JerKimball, Mar 02 '13 at 00:51
How about `iconstyle`? Any issues are most likely going to be with the `VisualTree` of the control template. — JerKimball, Mar 02 '13 at 02:56
I cannot reproduce this with a button, your `` and a `{x:Null}` background for the button. This proves it's your `Style` that's causing this. Start deconstructing the Style until the problem goes away, or start the other way around: Start with a blank style and add stuff until your problem shows up. Either way you'll find exactly what's causing the problem and that in turn will enable you to solve the problem. — Cosmin Prund, Mar 04 '13 at 07:12

score 6 · Answer 1 · edited Mar 04 '13 at 13:30

6

Instead of using a transparent background, you should use a background which is almost transparent. This way, the Click-event will still get fired, but the button will still appear to be transparent.
Something like:

<RepeatButton Background="#01FFFFFF" Style="{StaticResource ResourceKey=IconButtonStyle}" />

The first two digits of the color definition define the Transparency or Alpha value.

edited Mar 04 '13 at 13:30

RoelF

7,483
5
44
67

answered Mar 04 '13 at 13:19

Danield

121,619
37
226
255

1

Looks more like `Opacity` rather than `Transparency` then – Ben Philipp Jun 02 '16 at 01:57

AndrewS · Accepted Answer · 2013-03-04T12:39:49.730

1

HitTesting would work if the Background is Transparent if you're actually using it. You're applying a Style but didn't include the Style so I can't say but if in that Style you're setting the Template and you're not using the Background in the ControlTemplate then setting the Background is meaningless. Typically the Background of the root element in the template does a TemplateBinding to the Background (usually a panel or border). The element itself doesn't use the Background. One other option is to override the HitTestCore method. You can look in Reflector/ILSpy at the TextBlock's implementation as it overrides this to ensure that any point within its rect (and not just the characters of the text) is a valid hit point.

Edit: Based on the styles/templates you have provided the problem is what I described. You need to use the Background within the ControlTemplate or it won't have any impact. So the IconTemplate should look like:

<ControlTemplate x:Key="IconTemplate" TargetType="{x:Type ContentControl}">
    <Grid Background="{TemplateBinding Background}">
        <Path Name="ForegroundSymbol" Data="M0,0 L1,0 1,1 0,1 0.5,0.5 z" Fill="{TemplateBinding Foreground}" Stretch="Fill" />
    </Grid>
</ControlTemplate>

edited Mar 04 '13 at 12:39

answered Mar 02 '13 at 03:46

AndrewS

6,054
24
31

You guys got me onto something else that's apparently the problem. On my " – chrisp Mar 04 '13 at 01:35
Not sure what you mean. In the snippet you provided you set the Style of the button to a Style with a key of _iconStyle_. Can you just post that Style? And if that has a Setter for the Template property be sure to include that ControlTemplate. – AndrewS Mar 04 '13 at 02:36
OK I see you posted the Style(s). The problem is as I mentioned - you're not actually using the Background so setting it has no impact. So if you want to address this you could just add Background="{TemplateBinding Background}" to the Grid in the IconTemplate. – AndrewS Mar 04 '13 at 12:35
This is the answer. Though I did have to add the "background" binding to the style "IconButtonStyle"'s "Control Template". It didn't do anything as posted above. I can't explain it. Thanks! – chrisp Mar 04 '13 at 23:49
You still need to set the Background of the button to a Brush. A Null will not hit test but a Transparent (or any other color) brush will. – AndrewS Mar 05 '13 at 02:26

score 0 · Answer 3 · answered Mar 04 '13 at 12:59

0

You need to provide background color for hit detect, if you doesnot want set color than set Transparent.

answered Mar 04 '13 at 12:59

Nakul Chaudhary

25,572
15
44
47

How to hit detect on a null or transparent background?

3 Answers3

Linked