在 MahApps Metro 中覆盖 SqaureButton 样式答案

【问题标题】：Overwrite SqaureButton Style in MahApps Metro在 MahApps Metro 中覆盖 SqaureButton 样式
【发布时间】：2014-05-12 17:32:17
【问题描述】：

我注意到 MahApps Metro 提供的 SquareButtonStyle 没有 1 像素边框。我正在寻找类似这种风格的东西：（Visual Studio 的按钮样式）

Metro Style 是这样的：

我查看了按钮样式的 XAML，但它显示该按钮的边框厚度为 1。如果其他按钮的边框像上面的按钮一样，怎么会这样？我将如何覆盖这个按钮，就像我显示的关闭按钮一样。

这是 button.xaml 的链接（已编辑链接）：https://github.com/MahApps/MahApps.Metro/blob/master/MahApps.Metro/Styles/Controls.Buttons.xaml

这是 SquareButton xaml：

<Style x:Key="SquareButtonStyle"
       TargetType="{x:Type Button}">
    <Setter Property="MinHeight"
            Value="25" />
    <Setter Property="FontFamily"
            Value="{DynamicResource DefaultFont}" />
    <Setter Property="FontWeight"
            Value="SemiBold" />
    <Setter Property="Background"
            Value="{DynamicResource WhiteBrush}" />
    <Setter Property="BorderBrush"
            Value="{DynamicResource BlackBrush}" />
    <Setter Property="Foreground"
            Value="{DynamicResource TextBrush}" />
    <Setter Property="Padding"
            Value="5,6" />
    <Setter Property="BorderThickness"
            Value="1" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
                                                                   Storyboard.TargetName="MouseOverBorder">
                                        <EasingDoubleKeyFrame KeyTime="0"
                                                              Value="1" />
                                    </DoubleAnimationUsingKeyFrames>
                                    <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)"
                                                                      Storyboard.TargetName="MouseOverBorder">
                                        <EasingThicknessKeyFrame KeyTime="0"
                                                                 Value="2" />
                                    </ThicknessAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
                                                                   Storyboard.TargetName="PressedBorder">
                                        <EasingDoubleKeyFrame KeyTime="0"
                                                              Value="1" />
                                    </DoubleAnimationUsingKeyFrames>
                                    <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)"
                                                                      Storyboard.TargetName="MouseOverBorder">
                                        <EasingThicknessKeyFrame KeyTime="0"
                                                                 Value="0" />
                                    </ThicknessAnimationUsingKeyFrames>
                                    <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderThickness)"
                                                                      Storyboard.TargetName="PressedBorder">
                                        <EasingThicknessKeyFrame KeyTime="0"
                                                                 Value="2" />
                                    </ThicknessAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity"
                                                                   Storyboard.TargetName="DisabledVisualElement">
                                        <SplineDoubleKeyFrame KeyTime="0"
                                                              Value="0.7" />
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
                                                                   Storyboard.TargetName="contentPresenter">
                                        <EasingDoubleKeyFrame KeyTime="0"
                                                              Value="0.3" />
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="FocusStates">
                            <VisualState x:Name="Focused" />
                            <VisualState x:Name="Unfocused" />
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="ValidationStates">
                            <VisualState x:Name="Valid" />
                            <VisualState x:Name="InvalidFocused" />
                            <VisualState x:Name="InvalidUnfocused" />
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border x:Name="Background"
                            BorderBrush="{DynamicResource BlackBrush}"
                            BorderThickness="2"
                            Background="{TemplateBinding Background}" />
                    <Rectangle x:Name="DisabledVisualElement"
                               Fill="{DynamicResource ControlsDisabledBrush}"
                               IsHitTestVisible="false"
                               Opacity="0" />
                    <Border x:Name="MouseOverBorder"
                            Background="{DynamicResource GrayBrush8}"
                            Opacity="0" />
                    <Border x:Name="PressedBorder"
                            Background="{DynamicResource BlackBrush}"
                            Opacity="0"
                            BorderBrush="{DynamicResource BlackBrush}" />
                    <ContentPresenter x:Name="contentPresenter"
                                      ContentTemplate="{TemplateBinding ContentTemplate}"
                                      Content="{TemplateBinding Content, Converter={StaticResource ToLowerConverter}}"
                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                      Margin="{TemplateBinding Padding}"
                                      RecognizesAccessKey="True"
                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                      OpacityMask="{x:Null}" />
                </Grid>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver"
                             Value="True">
                        <Setter Property="Foreground"
                                Value="{DynamicResource BlackBrush}" />
                    </Trigger>
                    <Trigger Property="IsPressed"
                             Value="true">
                        <Setter Property="Foreground"
                                Value="{DynamicResource WhiteBrush}" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

【问题讨论】：

标签： c# wpf xaml mahapps.metro

【解决方案1】：

我认为是这件作品 <Border x:Name="Background" BorderBrush="{DynamicResource BlackBrush}" BorderThickness="2" Background="{TemplateBinding Background}" />

【讨论】：

好的，我会试着换帽子。为什么会在顶部说borderThickness="1"？
如果你想使用你还需要设置否则此边框将始终具有其默认值

【解决方案2】：

别忘了将按钮的文本内容展示器设置为：

<ContentPresenter x:Name="contentPresenter"
    ContentTemplate="{TemplateBinding ContentTemplate}"
    Content="{TemplateBinding Content}"
    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
    Margin="{TemplateBinding Padding}"
    RecognizesAccessKey="True"
    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
    OpacityMask="{x:Null}" />

如果您不希望文本为小写。这是我的做法：

https://github.com/joazlazer/ModdingStudio/blob/master/ModdingStudio/ModdingStudio/Themes/Buttons.xaml

它给了我这个：http://i.imgur.com/5ZWa2ln.png

【讨论】：