如何创建平面按钮样式答案

【问题标题】：How to Create a Flat Button Style如何创建平面按钮样式
【发布时间】：2013-12-25 18:29:08
【问题描述】：

遵循当前的设计理念，我希望能够创建可以应用任何手机强调色的扁平按钮样式。从本质上讲，我希望它看起来有点像一个平铺主题和一个图标作为按钮的内容。我怎么能做到这一点？我不需要在我的应用程序中使用 HubTile 或任何类型的辅助磁贴，这只是用作以这种方式设置主题的按钮。它只会将用户导航到应用程序的另一部分。我不确定如何更改按钮控件的默认样式模板来创建这样的效果？我的最终结果是在屏幕底部有四个这样的风格化按钮，每个按钮都有一个不同的图标作为内容，用户可以直观地了解按钮的点击事件将执行的操作。

编辑

玻璃按钮样式，我想修改为扁平按钮样式

<Style x:Key="GlassButton" TargetType="Button">
    <Setter Property="Background" Value="#FF1F3B53"/>
    <Setter Property="Foreground" Value="#FF000000"/>
    <Setter Property="Padding" Value="3"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="BorderBrush">
        <Setter.Value>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFA3AEB9" Offset="0"/>
                <GradientStop Color="#FF8399A9" Offset="0.375"/>
                <GradientStop Color="#FF718597" Offset="0.375"/>
                <GradientStop Color="#FF617584" Offset="1"/>
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid>
                    <vsm:VisualStateManager.VisualStateGroups>
                        <vsm:VisualStateGroup x:Name="CommonStates">
                            <vsm:VisualState x:Name="Normal"/>

                            <vsm:VisualState x:Name="MouseOver">
                            </vsm:VisualState>

                            <vsm:VisualState x:Name="Pressed">
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                                                                   Storyboard.TargetName="glow" 
                                                                   Storyboard.TargetProperty="(UIElement.Opacity)">
                                        <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" 
                                                              Value="1"/>
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>

                            <vsm:VisualState x:Name="Disabled">
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity">
                                        <SplineDoubleKeyFrame KeyTime="0" Value=".55"/>
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="FocusStates">
                            <vsm:VisualState x:Name="Focused">
                            </vsm:VisualState>
                            <vsm:VisualState x:Name="Unfocused"/>
                        </vsm:VisualStateGroup>
                    </vsm:VisualStateManager.VisualStateGroups>

                    <Border BorderBrush="#FFFFFFFF" BorderThickness="1,1,1,1" CornerRadius="4,4,4,4">
                        <Border x:Name="border" Background="#7F000000" BorderBrush="#FF000000" BorderThickness="1,1,1,1" CornerRadius="4,4,4,4">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="0.507*"/>
                                    <RowDefinition Height="0.493*"/>
                                </Grid.RowDefinitions>
                                <Border Opacity="0" HorizontalAlignment="Stretch" x:Name="glow" Width="Auto" Grid.RowSpan="2" CornerRadius="4,4,4,4">
                                    <Border.Background>
                                        <RadialGradientBrush>
                                            <RadialGradientBrush.RelativeTransform>
                                                <TransformGroup>
                                                    <ScaleTransform ScaleX="1.702" ScaleY="2.243"/>
                                                    <SkewTransform AngleX="0" AngleY="0"/>
                                                    <RotateTransform Angle="0"/>
                                                    <TranslateTransform X="-0.368" Y="-0.152"/>
                                                </TransformGroup>
                                            </RadialGradientBrush.RelativeTransform>
                                            <GradientStop Color="#B28DBDFF" Offset="0"/>
                                            <GradientStop Color="#008DBDFF" Offset="1"/>
                                        </RadialGradientBrush>
                                    </Border.Background>
                                </Border>
                                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" Grid.RowSpan="2"/>
                                <Border HorizontalAlignment="Stretch" Margin="0,0,0,0" x:Name="shine" Width="Auto" CornerRadius="4,4,0,0">
                                    <Border.Background>
                                        <LinearGradientBrush EndPoint="0.494,0.889" StartPoint="0.494,0.028">
                                            <GradientStop Color="#99FFFFFF" Offset="0"/>
                                            <GradientStop Color="#33FFFFFF" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Border.Background>
                                </Border>
                            </Grid>
                        </Border>
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

我尝试将样式底部的 shine 边框修改为单一颜色（最好是深色（可能不透明度为 0.7）灰色，可以很好地匹配深色主题），但我仍然看到效果玻璃按钮样式，即按钮的上半部分比底部轻。我相信我可以管理其他我想做的更改，例如删除按钮样式的角半径，以便按钮是方形的并且也是按钮周围的边框。无论哪种方式，任何建议、提示或建议都会有很大帮助！

【问题讨论】：

它必须是一个按钮的任何特殊原因，为什么不只是一个带有图像的边框，对点击事件做出反应，瞧......？从 Windows Phone 工具包添加倾斜效果以获得完整的 Windows Phone 体验？ :)
这很好。我的主要原因是在选择按钮时使用我从现有的“玻璃”按钮中为“平面”按钮选择的样式。这样的东西可以在边界上使用吗？我已经添加了上面的样式（与您刚刚评论的我的另一个问题相同）。我宁愿摆脱“玻璃”效果，而只使用平面、方形、按钮（或边框）来更好地匹配标准 Windows Phone 设计。
看我的回答，希望对你有帮助

标签： windows-phone-7 button windows-phone-8 styles

【解决方案1】：

这个怎么样：

<Style x:Key="FlatButtonStyle" TargetType="Button">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
    <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
    <Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
    <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
    <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMedium}"/>
    <Setter Property="Padding" Value="10,5,10,6"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid Background="Transparent">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="MouseOver"/>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneButtonBasePressedForegroundBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0" Margin="{TemplateBinding Margin}">
                        <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

像这样使用它：

<Button Grid.Row="1" Grid.Column="0" 
        Background="{StaticResource PhoneAccentBrush}" 
        Height="80" Width="300" Margin="12,0"
        Style="{StaticResource FlatButtonStyle}">
    <Button.Content>
        <Image Source="/Assets/ApplicationIcon.png" />
    </Button.Content>
</Button>

结果是这样的：

编辑：为 Border Margin 属性使用 TemplateBinding 以删除预定义的间距

【讨论】：

似乎工作得很好。我唯一的问题是，当放置在网格中时，按钮末端和网格边缘之间存在间距。我应该更改什么属性来删除间距，以便按钮延伸到网格的边缘？我将边距设置为<Setter Property="Margin" Value="-12"/>，这似乎解决了消除按钮边缘与其网格之间间隙的问题。这是正确/最好的方法吗？
@Matthew Remove Margin="{StaticResource PhoneTouchTargetOverhang}" 从样式中的边框并添加 Margin="{TemplateBinding Margin}" 代替。然后只需使用 Button 的 Margin 属性来设置您可能想要的任何边距。编辑：我在上面的代码中为你做了。
另外一点，我看到在按下按钮时可以更改背景的样式，但是当按下按钮时我如何只更改内容图像的前景（图标）？