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.
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.
