Customizing Mahapps.MetroWindow Close Button

Question

I'm using Mahapps.MetroWindow ( http://mahapps.com/ ) to style my applications appearance and right now I'm looking for the right way to customize the appearance of the X / Close button. By default MetroWindow applies custom styling to all three command buttons. I would like to either match Windows in always having the Close button be red or on mouse over become red.

What I found so far was, that I can set the WindowCloseButtonStyle attribute to a custom style. I did so like this:

<controls:MetroWindow x:Class="WpfApplication2.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
    Title="MainWindow" 
    Height="350" 
    Width="525"
    WindowCloseButtonStyle="{DynamicResource RedCloseWindowButtonStyle}">
...

In a separate XAML file I've got the style defined as

<Style x:Key="RedCloseWindowButtonStyle"
       TargetType="{x:Type Button}"
       BasedOn="{StaticResource MetroBaseWindowButtonStyle}">
    <Setter Property="XXX"
               Value="XXX" />
</Style>

I assume that I'll have to fill in the blanks for XXX in the style setter. Since I'm new to Windows development my question is: What's the property I'm interested in? Where can I find an explorer to browse the available properties depending on the given context? and what's the style value if I want to accomplish what I described above?

You can download [XAMLSpy](http://xamlspy.com/) and install it. Once it is installed, run your app and XAMLSpy together. You can attach XAMLSpy to your app and discover it's elements and their properties. — Johnathon Sullinger, May 20 '14 at 00:39
I imagine what you are looking for is foreground, but they might use something different. XAMLSpy will let you mouse over the elements while in Visual Studio and find its content and properties. — Johnathon Sullinger, May 20 '14 at 00:40

punker76 · Accepted Answer · 2019-06-03T08:00:57.457

Here is an inherited custom style for a close button with mouse over / pressed effect:

<Style x:Key="MetroWindowCloseButtonStyle"
       TargetType="{x:Type Button}"
       BasedOn="{StaticResource MetroWindowButtonStyle}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Grid x:Name="grid"
                      Background="{TemplateBinding Background}">
                    <ContentPresenter x:Name="contentPresenter"
                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                      Margin="{TemplateBinding Padding}"
                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                      SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                      RecognizesAccessKey="True"
                                      Opacity="0.75" />
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver"
                             Value="True">
                        <Setter TargetName="contentPresenter"
                                Property="Opacity"
                                Value="1" />
                        <Setter TargetName="grid"
                                Property="Background"
                                Value="#E04343" />
                    </Trigger>
                    <Trigger Property="IsMouseOver"
                             Value="False">
                        <Setter TargetName="contentPresenter"
                                Property="Opacity"
                                Value=".5" />
                    </Trigger>
                    <Trigger Property="IsPressed"
                             Value="True">
                        <Setter TargetName="grid"
                                Property="Background"
                                Value="#993D3D" />
                    </Trigger>
                    <Trigger Property="IsEnabled"
                             Value="false">
                        <Setter Property="Foreground"
                                Value="#ADADAD" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

The original (obsolete) style can be found here on GitHub

Hope that helps.

@joey I replaced the link with the correct permalink to the sources. — punker76, Jun 03 '19 at 08:02
@punker76 I have a similar question posted [here](https://stackoverflow.com/q/65541141/1232087) in case you get a chance for a suggestion/comment etc. Thank you. — nam, Jan 02 '21 at 16:02

score 1 · Answer 2 · answered Jul 17 '14 at 18:52

Well, In the new version of I dont find the style "MetroWindowCloseButtonStyle" I have rewritten the style "MetroBaseWindowButtonStyle" with and extra style trigger: The trigger will fire only if the button name is "PART_Close" which is the default mahapp button name. So it will change the background color to red when hover to close button.

<MultiTrigger>
  <MultiTrigger.Conditions>
    <Condition Property="IsMouseOver" Value="True" />
    <Condition Property="Name" Value="PART_Close" />
  </MultiTrigger.Conditions>

  <Setter Property="Background" Value="Red" />
</MultiTrigger>

The complete style is here:

 <!-- base button style for min, max and close window buttons -->
 <Style x:Key="MetroBaseWindowButtonStyle" TargetType="{x:Type Button}">
    <Setter Property="Background"
            Value="{DynamicResource TransparentWhiteBrush}" />
    <Setter Property="Foreground"
            Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
    <Setter Property="HorizontalContentAlignment"
            Value="Center" />
    <Setter Property="VerticalContentAlignment"
            Value="Center" />
    <Setter Property="Padding"
            Value="1" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Grid Background="{TemplateBinding Background}">
                    <ContentPresenter x:Name="contentPresenter"
                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                      Margin="{TemplateBinding Padding}"
                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                      SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                      RecognizesAccessKey="True"
                                      Opacity="0.75" />
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver"
                             Value="True">
                        <Setter TargetName="contentPresenter"
                                Property="Opacity"
                                Value="1" />
                    </Trigger>
                    <Trigger Property="IsMouseOver"
                             Value="False">
                        <Setter TargetName="contentPresenter"
                                Property="Opacity"
                                Value=".5" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsMouseOver"
                 Value="True">
            <Setter Property="Background"
                    Value="#F6F6F6" />
        </Trigger>
        <Trigger Property="IsPressed"
                 Value="True">
            <Setter Property="Background"
                    Value="{DynamicResource HighlightBrush}" />
        </Trigger>
        <Trigger Property="IsEnabled"
                 Value="false">
            <Setter Property="Foreground"
                    Value="#ADADAD" />
        </Trigger>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsMouseOver"
                           Value="True" />
                <Condition Property="Name"
                           Value="PART_Close" />
            </MultiTrigger.Conditions>
            <Setter Property="Background"
                    Value="Red" />
        </MultiTrigger>
    </Style.Triggers>
  </Style>

KornMuffin · Answer 3 · 2018-05-25T12:30:02.720

Putting the following in the App.xaml will apply a red mouse over style to all MetroWindows:

<Style x:Key="CleanCloseWindowButtonStyle" TargetType="{x:Type Button}" BasedOn="{StaticResource MetroWindowButtonStyle}">
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="#EB2F2F" />
            <Setter Property="Foreground" Value="{DynamicResource WhiteBrush}" />
        </Trigger>
        <Trigger Property="IsPressed" Value="True">
            <Setter Property="Background" Value="#7C0000" />
        </Trigger>
    </Style.Triggers>
</Style>

<Style TargetType="{x:Type mah:WindowButtonCommands}" BasedOn="{StaticResource {x:Type mah:WindowButtonCommands}}">
    <Setter Property="LightCloseButtonStyle" Value="{StaticResource CleanCloseWindowButtonStyle}" />
    <Setter Property="DarkCloseButtonStyle" Value="{StaticResource CleanCloseWindowButtonStyle}" />
</Style>

This was based on a solution posted by Punker on github using the WindowCloseButtonStyle (obsolete).

Customizing Mahapps.MetroWindow Close Button

3 Answers3

Linked