wpf 自定义 Mahapps.MetroWindow 关闭按钮

Customizing Mahapps.MetroWindow Close Button

提问by pkluz

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 oron mouse over become red.

我正在使用 Mahapps.MetroWindow ( http://mahaps.com/) 来设计我的应用程序外观，现在我正在寻找正确的方法来自定义 X / 关闭按钮的外观。默认情况下，MetroWindow 将自定义样式应用于所有三个命令按钮。我想要么匹配 Windows，要么总是让关闭按钮为红色，或者鼠标悬停为红色。

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

到目前为止我发现的是，我可以将WindowCloseButtonStyle属性设置为自定义样式。我是这样做的：

<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

在单独的 XAML 文件中，我将样式定义为

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

我假设我必须在样式设置器中填写 XXX 的空白。由于我是 Windows 开发的新手，我的问题是：我感兴趣的属性是什么？在哪里可以找到资源管理器来根据给定的上下文浏览可用属性？如果我想完成我上面描述的事情，样式值是什么？

采纳答案by punker76

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

原始（过时）样式可以在GitHub上找到

Hope that helps.

希望有帮助。

回答by Dipu Raj

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.

好吧，在新版本的我没有找到样式“MetroWindowCloseButtonStyle”我已经用额外的样式触发器重写了样式“MetroBaseWindowButtonStyle”：触发器只会在按钮名称为“PART_Close”时触发，这是默认的 mahapp 按钮名称。因此，当悬停关闭按钮时，它会将背景颜色更改为红色。

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

回答by KornMuffin

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

将以下内容放入 App.xaml 会将红色鼠标悬停样式应用于所有 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).

这是基于 Punker 在 github 上使用 WindowCloseButtonStyle（已过时）发布的解决方案。