WPF toggle buttons with custom template not accepting click in correct area

Question

I'm a relative beginner in the WPF space so I'm sure this will be the first of many questions!

I have a series of toggle buttons all with a custom template designed to show an image with a transparent background that then becomes highlighted when the user toggles the button. I wanted to add padding around the content so that the highlighted area would extent around the content. This is working, but the user still has to click in the inner area to activate the button, which is not what I want.

I'm assuming it's because I'm using the Margin property of the ContentPresenter to bind to the Padding of the button and this is classed as outside of the content, but not sure of the best way to fix this. It does work when de-selecting the button though.

Below is some XAML showing the problem which should be able to be copied and pasted straight into XamlPad.

<Page.Resources>
    <Style x:Key="ValidationToggleButton" TargetType="ToggleButton">
    <Setter Property="Padding" Value="5" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate >
                <Grid Name="MainGrid">
                    <Viewbox>
                        <ContentPresenter Margin="{TemplateBinding Padding}"
                              Content="{TemplateBinding Property=Button.Content}" />
                    </Viewbox>
                </Grid>

                <ControlTemplate.Triggers>
                    <Trigger Property="ToggleButton.IsChecked" Value="True">
                        <Setter TargetName="MainGrid" Property="Background" Value="#88FFFF55" />
                    </Trigger>
                </ControlTemplate.Triggers>

            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
</Page.Resources> 
<Grid>
<GroupBox Grid.Column="0" Header="Validation" BorderBrush="#55BBE6" Margin="2" >
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <ToggleButton Grid.Column="0" Style="{StaticResource ValidationToggleButton}">
            CLICK
        </ToggleButton>
    </Grid>
</GroupBox>
</Grid>

Anyone have any idea how I might correct this?

Answer 1

Welcome to WPF world :). That happens because of the... background brush. If you don't set it it's null. And that means it's not visible for hit testing mechanism. Quick fix to this set Background="Transparent" to the MainGrid. But more appropriate way to set it via styles:

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 <Page.Resources>
    <Style x:Key="ValidationToggleButton" TargetType="ToggleButton">
    <Setter Property="Padding" Value="5" />
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate >
                <Grid Name="MainGrid" Background="{TemplateBinding Background}">
                    <Viewbox>
                        <ContentPresenter Margin="{TemplateBinding Padding}"
                              Content="{TemplateBinding Property=Button.Content}" />
                    </Viewbox>
                </Grid>

                <ControlTemplate.Triggers>
                    <Trigger Property="ToggleButton.IsChecked" Value="True">
                        <Setter TargetName="MainGrid" Property="Background" Value="#88FFFF55" />
                    </Trigger>
                </ControlTemplate.Triggers>

            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
</Page.Resources> 
<Grid>
<GroupBox Grid.Column="0" Header="Validation" BorderBrush="#55BBE6" Margin="2" >
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <ToggleButton Grid.Column="0" Style="{StaticResource ValidationToggleButton}">
            CLICK
        </ToggleButton>
    </Grid>
</GroupBox>
</Grid>
</Page>