Customizing Mahapps.MetroWindow Close Button

mahapps.metro, wpf, xaml

Solution

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.

Problem

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?

Original source