Question

我注意到MahApps Metro提供的SquareButtonStyle没有1像素边框。我希望得到这种风格的东西:( Visual Studio的按钮样式）

enter image description here

Metro风格是这样的：

enter image description here

我已经通过XAML查看了按钮样式，但它显示按钮的边框厚度为1.如果其他按钮具有1px边框，如上面的按钮，这怎么可能？如何像我显示的关闭按钮一样覆盖此按钮。

以下是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>

Answer 1

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

Answer 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

在MahApps Metro中覆盖SqaureButton样式

2 个答案: