WPF/Windows Phone/WinRT: 通用的平面Button渐变样式
<div class="postcontent"><div id="cnblogs_post_body">一个通用的平面样式Button Style。该样式的最大特点就是渐变的颜色不是固定颜色，而是具有透明度的白色和黑色，所以当按钮处于高亮或者按下状态时，整体颜色会变亮或者变暗，这样的话，用户可以随意定义Foreground和Backgroud，不会对整体颜色搭配造成太大影响。而且WPF 4/Windows Phone(Silverlight)/WinRT的控件样式定义几乎是一样的（会有一些不同）。整个套路都是先定义静态元素，然后VisualStateGroup，然后具体VisualState和VisualTransition（如果需要的话）。
因此同样的样式可以顺利应用在WPF程序上：
http://images.cnblogs.com/cnblogs_com/mgen/201212/201212051038471214.png
Windows 8程序上：
http://images.cnblogs.com/cnblogs_com/mgen/201212/201212051038479229.png
和Windows Phone上：
http://images.cnblogs.com/cnblogs_com/mgen/201212/201212051038479512.png
其中WPF 4和Windows Phone的样式代码完全是通用的，我们就拿这个标准贴出代码：
<div class="mgen_code" style="border-top: gray 1px solid; border-right: gray 1px solid; border-bottom: gray 1px solid; padding-bottom: 10px; padding-top: 10px; padding-left: 10px; margin: 12px; border-left: gray 1px solid; padding-right: 10px; background-color: #262626"> <!-- 按钮按下后的混合颜色 -->
<Color x:Key=&quot;BtnPressed&quot;>#80000000</Color>
<!-- 按钮高亮后的混合颜色 -->
<Color x:Key=&quot;BtnHighlighted&quot;>#80FFFFFF</Color>
<!-- 按钮禁用颜色 -->
<Color x:Key=&quot;BtnDisabled&quot;>Gray</Color>
<Style x:Key=&quot;MyButtonStyle&quot; TargetType=&quot;Button&quot;>
<Setter Property=&quot;Padding&quot; Value=&quot;10&quot;/>
<Setter Property=&quot;Background&quot; Value=&quot;Transparent&quot;/>
<Setter Property=&quot;Template&quot;>
<Setter.Value>
<ControlTemplate TargetType=&quot;Button&quot;>
<Border Background=&quot;{TemplateBinding Background}&quot;
BorderBrush=&quot;{TemplateBinding BorderBrush}&quot;
BorderThickness=&quot;{TemplateBinding BorderThickness}&quot;
Name=&quot;border&quot;>
<Grid>
<ContentControl Margin=&quot;{TemplateBinding Padding}&quot;
Name=&quot;content&quot;
Foreground=&quot;{TemplateBinding Foreground}&quot;
Content=&quot;{TemplateBinding Content}&quot;
ContentTemplate=&quot;{TemplateBinding ContentTemplate}&quot;/>
<Rectangle Fill=&quot;Transparent&quot; IsHitTestVisible=&quot;False&quot; Name=&quot;Overlay&quot;/>
</Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name=&quot;CommonStates&quot;>
<VisualState x:Name=&quot;Normal&quot;/>
<VisualState x:Name=&quot;MouseOver&quot;>
<Storyboard>
<ColorAnimation Storyboard.TargetName=&quot;Overlay&quot; Storyboard.TargetProperty=&quot;(Rectangle.Fill).(SolidColorBrush.Color)&quot;
Duration=&quot;0&quot; To=&quot;{StaticResource BtnHighlighted}&quot;/>
</Storyboard>
</VisualState>
<VisualState x:Name=&quot;Pressed&quot;>
<Storyboard>
<ColorAnimation Storyboard.TargetName=&quot;Overlay&quot; Storyboard.TargetProperty=&quot;(Rectangle.Fill).(SolidColorBrush.Color)&quot;
Duration=&quot;0&quot; To=&quot;{StaticResource BtnPressed}&quot;/>
</Storyboard>
</VisualState>
<VisualState x:Name=&quot;Disabled&quot;>
<Storyboard>
<ColorAnimation Storyboard.TargetName=&quot;Overlay&quot; Storyboard.TargetProperty=&quot;(Rectangle.Fill).(SolidColorBrush.Color)&quot;
Duration=&quot;0&quot; To=&quot;Transparent&quot;/>
<ColorAnimation Storyboard.TargetName=&quot;border&quot; Storyboard.TargetProperty=&quot;(Border.Background).(SolidColorBrush.Color)&quot;
Duration=&quot;0&quot; To=&quot;Transparent&quot;/>
<ColorAnimation Storyboard.TargetName=&quot;border&quot; Storyboard.TargetProperty=&quot;(Border.BorderBrush).(SolidColorBrush.Color)&quot;
Duration=&quot;0&quot; To=&quot;{StaticResource BtnDisabled}&quot;/>
<ColorAnimation Storyboard.TargetName=&quot;content&quot; Storyboard.TargetProperty=&quot;(ContentControl.Foreground).(SolidColorBrush.Color)&quot;
Duration=&quot;0&quot; To=&quot;{StaticResource BtnDisabled}&quot;/>
</Storyboard>
</VisualState>
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration=&quot;0:0:0.3&quot;/>
<VisualTransition GeneratedDuration=&quot;0:0:0.1&quot; To=&quot;Pressed&quot;/>
</VisualStateGroup.Transitions>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
页:
[1]