How to preserve mahapps metro styling when adding custom trigger?

Question

I had a button that was styled in the default metro style. However when I added a trigger to the button, the style is overridden. How to preserve the original mahapps metro styling when adding your own style and triggers?

    <Button x:Name="startButton" Content="Start" HorizontalAlignment="Right"  VerticalAlignment="Bottom" Margin="0,0,20,26" Width="75" Click="startButton_Click" Height="67" Grid.Column="1">
        <!--<Button.Style>
            <Style TargetType="Button">
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Foreground" Value="Red"></Setter>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Button.Style>-->
    </Button>

This is how the button looked originally

This is how it looks after I added the trigger

Answer 1

You need to set the "BasedOn" property of your style to the one mahapps.metro is providing as default:

<Style TargetType="Button" BasedOn="{StaticResource MetroButton}">

The documentation doesn't say the default static resource, but it's OpenSource so easy to track it down in the source code for the Controls.xaml you import to load the default styles in your app.xaml (or top of window etc):

https://github.com/MahApps/MahApps.Metro/tree/develop/src/MahApps.Metro/Styles

A search for TargetType="Button" finds our default style (without a key):

Which is even also based on the base style, MahApps.Metro.Styles.MetroButton.