WPF Button to CheckBoxTemplate - wpf

Question

I am trying to give checkBox controltemplate to Button seeing an example in WPF Unleashed Text Book.
<ControlTemplate x:Key="buttoncheckBox" TargetType="{x:Type Button}">
<Grid>
<Rectangle Width="20" Height="20" x:Name="outerCircle" Stroke="Black" StrokeThickness="0.5">
</Rectangle>
<Rectangle Width="10" Height="10" x:Name="InnerCircle">
</Rectangle>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Button.IsMouseOver" Value="True">
<Setter TargetName="outerCircle" Property="Stroke" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"></Setter>
</Trigger>
<Trigger Property="Button.IsPressed" Value="True">
<Setter TargetName="InnerCircle" Property="Fill" Value="Orange"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<Button Template="{StaticResource buttoncheckBox}" Margin="10" Padding="10"/>
Here When I hover mouse or press it is not triggering events everywhere but only when I click on the border it is triggering.
When I use textbook example it is working anywhere what is difference I don't understand.

Answer 1

The problem is that the Grid you are using has no Background.
This is to fix your issue:
<ControlTemplate x:Key="buttoncheckBox" TargetType="{x:Type Button}">
<Grid Background="Transparent" Width="20" Height="20">
.....
You will have to check to see how you can make this code work with different resolutions. Now it seems to be only for 20x20.

Answer 2

In general, when you don't set a Background for a control or a panel such as the Grid, the area is considered to belong to the parent window and that's why no mouse events get raised.
If you don't want any actual background you should still set the Background property of the Grid to Transparent for the mouse movements and the clicks to be registered.
You don't need to specify a fixed size for the Grid though. Just setting the Background should be enough:
<ControlTemplate x:Key="buttoncheckBox" TargetType="{x:Type Button}">
<Grid Background="Transparent">
...

Answer 3

The only element that is currently available for hit test is the Rectangle.Stroke (the small border or line) When you interact with that thin line you will recognize that it will behave as you would expect. To make the whole Rectangle hit test visible you have to set the Rectangle.Fill property of both Rectangles:
<Rectangle Fill="Transparent" />
To allow the Button to resize properly use a Border. To enable the Button to display content like an icon or label text you need to add a ContentPresenter:
<ControlTemplate x:Key="buttoncheckBox" TargetType="{x:Type Button}">
<Border x:Name="outerCircle"
Margin="{TemplateBinding Margin}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}">
<Grid>
<Rectangle x:Name="InnerCircle" />
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Button.IsMouseOver"
Value="True">
<Setter TargetName="outerCircle"
Property="BorderBrush"
Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}">
</Setter>
</Trigger>
<Trigger Property="Button.IsPressed"
Value="True">
<Setter TargetName="InnerCircle"
Property="Fill"
Value="Orange">
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
and use it like this:
<Button Background="Transparent"
Width="80" Height="80"
Padding="5"
Template="{StaticResource buttoncheckBox}"
BorderBrush="Black"
BorderThickness="0.5"
Content="Label Text" />
Modify Button.Padding to resize the inner Rectangle.