Overwrite SqaureButton Style in MahApps Metro

StackOverflow https://stackoverflow.com/questions/23615314

  •  21-07-2023
  •  | 
  •  

Question

I have noticed that the SquareButtonStyle that MahApps Metro probvides does not have a 1 pixel border. I am looking to get something along the lines of this style: (The button Style for Visual Studio)

enter image description here

And the Metro Style is like this:

enter image description here

I have looked through the XAML for the button style, but it shows that the button has a border thickness of 1. How can this be if the other buttons have a 1px border, like the button above? How would i overwrite this button like the close button i have displayed.

Here is a link to the button.xaml (Edited Link): https://github.com/MahApps/MahApps.Metro/blob/master/MahApps.Metro/Styles/Controls.Buttons.xaml

Here is the 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>
Was it helpful?

Solution

I Think its this piece <Border x:Name="Background" BorderBrush="{DynamicResource BlackBrush}" BorderThickness="2" Background="{TemplateBinding Background}" />

OTHER TIPS

Don't forget to set the button's text content presenter to:

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

if you don't want the text to be lowercase. Here is how I did mine:

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

It gives me this: https://i.stack.imgur.com/zS1A6.png

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top