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
How about iconstyle? Any issues are most likely going to be with the VisualTree of the control template. — JerKimball
I cannot reproduce this with a button, your <Path> 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

AndrewS AndrewS · Accepted Answer · 2013-03-02T03:46:17

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>

How to hit detect on a null or transparent background?

3 Answers