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?
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.