ToggleButton Style click behaviour

Question

I want to design a new toggle button. I use this code for the design:

<UserControl.Resources>
    <Style TargetType="ToggleButton">
        <Setter Property="Width" Value="20" />
        <Setter Property="Height" Value="20" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ToggleButton">
                    <Border BorderBrush="Black" BorderThickness="1 1 1 1" CornerRadius="8 8 8 8">
                        <Path Name="Arrow" Fill="Black" HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="true">
                            <Setter TargetName="Arrow" Property="Data" Value="M 0 0 L 4 4 L 8 0 Z" />
                        </Trigger>
                        <Trigger Property="IsChecked" Value="false">
                            <Setter TargetName="Arrow" Property="Data" Value="M 0 4 L 4 0 L 8 4 Z" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>

So it looks at the moment:

that's very nice.

My problem is that the button only toggle when I'm clicked on the triangle. But it should toggle anywhere in the circle.

How can i do that?

Answer 1

Try giving your Border a Background otherwise it will not receive any Mouse.Clicks.

<Border Background="Transparent"