一个通用的平面样式Button Style。该样式的最大特点就是渐变的颜色不是固定颜色，而是具有透明度的白色和黑色，所以当按钮处于高亮或者按下状态时，整体颜色会变亮或者变暗，这样的话，用户可以随意定义Foreground和Backgroud，不会对整体颜色搭配造成太大影响。
而且WPF 4/Windows Phone(Silverlight)/WinRT的控件样式定义几乎是一样的（会有一些不同）。整个套路都是先定义静态元素，然后VisualStateGroup，然后具体VisualState和VisualTransition（如果需要的话）。
测试代码：
<StackPanel>
<Button Style="{StaticResource MyButtonStyle}" Background="LightBlue">Mgen</Button>
<Button Style="{StaticResource MyButtonStyle}" Background="YellowGreen">Mgen</Button>
<Button Style="{StaticResource MyButtonStyle}" IsEnabled="False">Mgen</Button>
</StackPanel>
运行在WPF程序上：
Windows 8程序上：
和Windows Phone上：
其中WPF 4和Windows Phone的样式代码完全是通用的，我们就拿这个标准贴出代码：
<!-- 按钮按下后的混合颜色 -->
<Color x:Key="BtnPressed">#80000000</Color>
<!-- 按钮高亮后的混合颜色 -->
<Color x:Key="BtnHighlighted">#80FFFFFF</Color>
<!-- 按钮禁用颜色 -->
<Color x:Key="BtnDisabled">Gray</Color>
<Style x:Key="MyButtonStyle" TargetType="Button">
<Setter Property="Background" Value="LightBlue"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Padding" Value="10"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Name="border">
<Grid>
<ContentControl Margin="{TemplateBinding Padding}"
Name="content"
Foreground="{TemplateBinding Foreground}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<Rectangle Fill="Transparent" IsHitTestVisible="False" Name="Overlay"/>
</Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Storyboard.TargetName="Overlay" Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)"
Duration="0" To="{StaticResource BtnHighlighted}"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimation Storyboard.TargetName="Overlay" Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)"
Duration="0" To="{StaticResource BtnPressed}"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ColorAnimation Storyboard.TargetName="Overlay" Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)"
Duration="0" To="Transparent"/>
<ColorAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
Duration="0" To="Transparent"/>
<ColorAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"
Duration="0" To="{StaticResource BtnDisabled}"/>
<ColorAnimation Storyboard.TargetName="content" Storyboard.TargetProperty="(ContentControl.Foreground).(SolidColorBrush.Color)"
Duration="0" To="{StaticResource BtnDisabled}"/>
</Storyboard>
</VisualState>
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.3"/>
<VisualTransition GeneratedDuration="0:0:0.1" To="Pressed"/>
</VisualStateGroup.Transitions>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
WinRT有一个变化，CommonStates中的MouseOver状态被改成了PointerOver，所以这代码：
<VisualState x:Name="MouseOver">
需要改成：
<VisualState x:Name="PointerOver">
这样就可以顺利在WinRT中用了。
注意：部分平台其实都有自己的特性可以针对优化，比如WPF中最好使用ContentPresenter的ContentSource属性，这样就不用手动绑定ContentTemplate等一大堆东西。而WinRT中ContentControl（Button也是ContentControl）还额外有ContentTransitions属性需要额外进行绑定。