Editing a MahApps Metro Circle Toggle button

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

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.