Editing a MahApps Metro Circle Toggle button - wpf

Question

I know there are a few questions surrounding the MahApps Metro styles, but i haven't found one that address the issue I am having.
I have an app that I am maintaining, a lot of which I helped build, using a central style XAML repository.
A part that I didn't build uses the style for the Metro Circle Toggle Button from MahApps. According to my Stakeholders, I need to change the selected state to be more contrasting from the normal state of the button. However I haven't been able to find where to go to access that style in my application.
My gut instinct is to create a complete style in my repository that replaces the Metro Style, but I figured I would ask around to see if anyone here could help me.
Any Hints wold be greatly appreciated.
Update 1:
I tried to use the BasedOn property to keep the amount of code down. I then set the background color to switch from black to white when "IsChecked" is True.
here is the code i added:
<Style x:Key="CustomCircleToggleButtonStyle"
TargetType="{x:Type ToggleButton}"
BasedOn="{StaticResource MetroCircleToggleButtonStyle}">
<Setter Property="Background" Value="{StaticResource DarkBorder}"/>
<Style.Triggers>
<Trigger Property="IsChecked" Value="True" >
<Setter Property="Background" Value="White"/>
</Trigger>
</Style.Triggers>
</Style>
Unfortunately, there is some animation form the MahApps sinking through that makes the button go from the black, immediately to white then fade to the dark blue color that i am trying to get rid of.
Here is the wpf toggle button:
<ToggleButton Width="50" IsEnabled="{Binding IsMultipleSelected,Converter= {StaticResource BooleanNegate}}"
Height="50"
Style="{DynamicResource CustomCircleToggleButtonStyle}"
Command="{Binding Path=GroupSelectCommand}"
IsChecked="{Binding IsLasoSelected}">
<Rectangle Width="20"
Height="20"
Fill="{DynamicResource IconButtonActiveBorder}">
<Rectangle.OpacityMask>
<VisualBrush Stretch="Fill"
Visual="{DynamicResource appbar_lasso}" />
</Rectangle.OpacityMask>
</Rectangle>
</ToggleButton>
I am hoping to move a lot of this into the style, but I have to keep functional.

Answer 1

Right, so the reason it's not working with your example is you can't overwrite triggers that interact with ControlTemplate via Triggers from the Style....
So, if we go take a peek at line 615 here (which btw, I assume there's a file in your metro stuff named the same) we see inside the template the ControlTemplate.Triggers which on IsChecked is changing the opacity of ellipsebg ellipse. It in turn is hard set to fill of {DynamicResource AccentColorBrush}...
So...you could overwrite that brush at the instance level....or, just go edit the full style template to use a different brush all together.
In other words you could go change line 630 of Fill="{DynamicResource AccentColorBrush}" to another brush or brush resource and it would inherit to each instance (that would be my choice to keep centrally maintainable properties).
Or, at the instance something like:
<StackPanel>
<StackPanel.Resources>
<SolidColorBrush x:Key="AccentColorBrush">Red</SolidColorBrush>
<Style TargetType="ToggleButton"
BasedOn="{DynamicResource CustomCircleToggleButtonStyle}"/>
</StackPanel.Resources>
<ToggleButton/>
<ToggleButton/>
<ToggleButton/>
</StackPanel>
Make sense? :)

Answer 2

To close the loop, and post my answer for everyone else with the issue, I ended up creating a style that i put in my style repository. I think my Solution might be a little unique though as i don't actually have access the the MahApps.Metro source code in my solution.
Here is what I did:
<Style x:Key="CircleButton" TargetType="ToggleButton">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Margin" Value="2"/>
<Setter Property="FocusVisualStyle" Value="{StaticResource MyFocusVisual}"/>
<Setter Property="Margin" Value="2 2 2 2"/>
<Setter Property="Width" Value="45"/>
<Setter Property="Height" Value="45"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Grid>
<Ellipse x:Name="BorderCircle">
<Ellipse.Fill>
<SolidColorBrush Color="SlateGray"/>
</Ellipse.Fill>
</Ellipse>
<Ellipse x:Name="BodyCircle" Margin="3" >
<Ellipse.Fill >
<SolidColorBrush Color="Black"/>
</Ellipse.Fill>
</Ellipse>
<Rectangle x:Name="Mask"
Width="20"
Height="20"
Fill="{DynamicResource IconButtonActiveBorder}">
<Rectangle.OpacityMask>
<VisualBrush Stretch="Fill"
Visual="{DynamicResource appbar_lasso}" />
</Rectangle.OpacityMask>
</Rectangle>
<ContentPresenter x:Name="content" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="BodyCircle" Property="Fill" Value="White"/>
<Setter TargetName="BorderCircle" Property="Fill" Value="Black"/>
<Setter TargetName="Mask" Property="Fill" Value="Black"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="BodyCircle" Property="Fill" Value="DarkOrange"/>
<Setter TargetName="BorderCircle" Property="Fill" Value="Black"/>
<Setter TargetName="Mask" Property="Fill" Value="Black"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
This gives me total control of all aspects of the toggle button and the identical look as it had before. All i have to do to implement it is call it from the WPF view:
<ToggleButton IsEnabled="{Binding IsMultipleSelected,Converter={StaticResource BooleanNegate}}"
Style="{DynamicResource CircleButton}"
Command="{Binding Path=GroupSelectCommand}"
IsChecked="{Binding IsLasoSelected}">
</ToggleButton>
Hope this helps others out.