[英]Overwrite SqaureButton Style in MahApps Metro
I have noticed that the SquareButtonStyle that MahApps Metro probvides does not have a 1 pixel border. 我注意到MahApps Metro提供的SquareButtonStyle没有1像素边框。 I am looking to get something along the lines of this style: (The button Style for Visual Studio) 我正在寻找与该样式相似的东西:(Visual Studio的按钮样式)
And the Metro Style is like this: 地铁风格是这样的:
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? 我已经通过XAML查看了按钮样式,但是它显示该按钮的边框厚度为1。如果其他按钮都具有1px边框(如上面的按钮),怎么办? 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 这是button.xaml的链接(编辑链接): https : //github.com/MahApps/MahApps.Metro/blob/master/MahApps.Metro/Styles/Controls.Buttons.xaml
Here is the SquareButton 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>
我认为这是<Border x:Name="Background" BorderBrush="{DynamicResource BlackBrush}" BorderThickness="2" Background="{TemplateBinding Background}" />
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 https://github.com/joazlazer/ModdingStudio/blob/master/ModdingStudio/ModdingStudio/Themes/Buttons.xaml
It gives me this: http://i.imgur.com/5ZWa2ln.png 它给了我这个: http : //i.imgur.com/5ZWa2ln.png
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.