How to change WPF Combo-Box style hover effect - wpf

Question

I've created a custom Combo Box style in WPF, but there is this irritating blue hover effect that I believe has to do with the FocusVisualStyle but i'm not sure.
I've tried editing the Background, Border, MouseOver Trigger and FocusVisualStyle but still nothing.
Custom ComboBox Style
<Style x:Key="CB" TargetType="{x:Type ComboBox}">
<Setter Property="Foreground" Value="Gray" />
<Setter Property="BorderBrush" Value="#b3b3b3" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="0 0 0 2"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
<Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
<Setter Property="FrameworkElement.OverridesDefaultStyle" Value="True"/>
<Setter Property="FontSize" Value="16" />
<Setter Property="FontWeight" Value="Regular" />
<Setter Property="MinWidth" Value="50"/>
<Setter Property="MinHeight" Value="32"/>
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBox">
<Grid>
<!--ToggleButton-->
<ToggleButton Name="ToggleButton" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" BorderThickness="{TemplateBinding BorderThickness}"
FocusVisualStyle="{x:Null}"
Grid.Column="2"
Focusable="false"
IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"
ClickMode="Press">
<Border x:Name="templateRoot" SnapsToDevicePixels="true" Background="{x:Null}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="Transparent">
<Border x:Name="splitBorder" Width="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" SnapsToDevicePixels="true" Margin="200 0 0 0" HorizontalAlignment="Right" BorderThickness="1" BorderBrush="Transparent">
<Path x:Name="arrow" VerticalAlignment="Center" Margin="0 0 0 0" HorizontalAlignment="Right" Fill="#333333" Data="M0,0 L0,2 L4,6 L8,2 L8,0 L4,4 z"/>
</Border>
</Border>
</ToggleButton>
<ContentPresenter
Name="ContentSite"
IsHitTestVisible="False"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
Margin="0 0 0 5"
FocusVisualStyle="{x:Null}"/>
<TextBox x:Name="PART_EditableTextBox"
Style="{x:Null}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="3,3,23,3"
Focusable="True"
Visibility="Hidden"
IsReadOnly="{TemplateBinding IsReadOnly}"/>
<Popup Name="Popup"
Placement="Bottom"
IsOpen="{TemplateBinding IsDropDownOpen}"
AllowsTransparency="True"
Focusable="False"
PopupAnimation="Slide"
FocusVisualStyle="{x:Null}">
<Grid Name="DropDown"
SnapsToDevicePixels="True"
MinWidth="{TemplateBinding ActualWidth}"
MaxHeight="{TemplateBinding MaxDropDownHeight}"
FocusVisualStyle="{x:Null}">
<Border x:Name="DropDownBorder"
Background="White"
BorderThickness="1.5"
BorderBrush="{x:Null}"
FocusVisualStyle="{x:Null}">
<Border.Effect>
<DropShadowEffect Opacity="0.6" ShadowDepth="3" BlurRadius="2"/>
</Border.Effect>
</Border>
<ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True" FocusVisualStyle="{x:Null}">
<StackPanel FocusVisualStyle="{x:Null}" IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="HasItems" Value="false">
<Setter TargetName="DropDownBorder" Property="MinHeight" Value="95"/>
</Trigger>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="True"/>
</Trigger>
<Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="true">
<Setter TargetName="DropDownBorder" Property="CornerRadius" Value="0 0 10 10"/>
<Setter TargetName="DropDownBorder" Property="Margin" Value="0,-5,0,0"/>
</Trigger>
<Trigger Property="IsEditable" Value="true">
<Setter Property="IsTabStop" Value="false"/>
<Setter TargetName="PART_EditableTextBox" Property="Visibility" Value="Visible"/>
<Setter TargetName="ContentSite" Property="Visibility" Value="Hidden"/>
</Trigger>
<Trigger Property="UIElement.IsMouseOver" Value="True">
<Setter TargetName="arrow" Property="Fill" Value="White" />
<Setter Property="Background" Value="Transparent"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Answer 1

The effect you are describing is the mouse over effect of the ToggleButton. You need to override the ControlTemplate of the ToggleButton in order to override its default behavior:
<!--ToggleButton-->
<ToggleButton Name="ToggleButton" >
<ToggleButton.Style>
<Style TargetType="ToggleButton">
<Setter Property="Background"
Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background}"/>
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}">
<ContentPresenter />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ToggleButton.Style>
...
</ToggleButton>