What is the property being changed here when hovering?

Question

What is the property that is causing this blue rectangle to appear on mouse hover for this custom toggle button? I have a feeling this may be a very dumb question but I cannot seem to find the answer by searching. I am somewhat new to XAML but I am learning pretty fast I think. Here are the images of the button on and off mouse hover.

Button on hover

Button off hover

The following is my code for creating this style in a resource dictionary.

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style BasedOn="{StaticResource {x:Type ToggleButton}}"
           TargetType="{x:Type ToggleButton}"
           x:Key="ControlButtonToggle">
        <Style.Setters>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="OverridesDefaultStyle" Value="True"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ToggleButton">
                        <Border Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                CornerRadius="20">
                            <ContentPresenter HorizontalAlignment="Center"
                                              VerticalAlignment="Center"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" Value="Yellow"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style.Setters>

        <Style.Triggers>
            <!-- TRUE TRIGGER -->
            <Trigger Property="IsChecked"
                     Value="True">
                <Setter Property="Background" Value="LightGreen"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ToggleButton">
                            <Border CornerRadius="10"
                                    Background="LightGreen"
                                    Width="{TemplateBinding Width}"
                                    Height="{TemplateBinding Height}"
                                    BorderBrush="Green"
                                    BorderThickness="2">
                                <Grid>
                                    <Rectangle StrokeThickness="1"/>
                                    <Button Margin="1"
                                            Content="Enabled"
                                            BorderThickness="0"
                                            Background="Transparent"
                                            VerticalContentAlignment="Center"
                                            Padding="5"
                                            Foreground="Black"
                                            BorderBrush="Green"/>
                                </Grid>
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter Property="Opacity" Value="0.8"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Trigger>

            <!-- FALSE TRIGGER -->
            <Trigger Property="IsChecked"
                     Value="False">
                <Setter Property="Background" Value="#FFFF5454"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ToggleButton">
                            <Border CornerRadius="10"
                                    Background="#FFFF5454"
                                    Width="{TemplateBinding Width}"
                                    Height="{TemplateBinding Height}"
                                    BorderBrush="Red"
                                    BorderThickness="2">
                                <Grid>
                                    <Rectangle StrokeThickness="1"/>
                                    <Button Margin="1"
                                            Content="Disabled"
                                            BorderThickness="0"
                                            Background="Transparent"
                                            VerticalContentAlignment="Center"
                                            Padding="5"
                                            Foreground="Black"
                                            BorderBrush="Red"/>
                                </Grid>
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter Property="Opacity" Value="0.8"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </Style.Triggers>
    </Style>
</ResourceDictionary>

I have tried making the ControlTemplate.Trigger for OnMouseHover change the background and I have made a general trigger outside the ControlTemplate itself but neither has seemed to work. I have searched the properties of the elements of this style but I cannot seem to figure out what is causing this appearance. I would like to either darken the entire rounded field on hover, or just make this property simply transparent as the cursor changes on hover anyways. Any help is greatly appreciated, I apologize if this is a very simple question lol.

Answer 1

Right now I can't even click on your ToggleButton to change its state to: Enable/Disable

1. That rectangle is thanks to your Button inside ToggleButton, why aren't you using Label or TextBlock instead? If you do that, than don't forget to add to your Grid HorizontalAlignment="Center" to Center your text after that.

2. Or if you don't wanna get rid of your buttons, you can add: IsHitTestVisible="False" to those two Buttons to disable their styles/click/interaction, but that's not really nice.

3. Or change Background of your Buttons inside of your ToggleButton when IsMouseOver is triggered .