本篇主题
用Blend for visual studio 2012 查看button控件的样式源码。
1. 用Blend新建或者打开一个项目
一般在下载和安装visual studio 2012 的时候都会自动下载和安装Blend，如果没有可以自己下载安装。
新建或者打开项目如图所示：
2. 在新建项目中添加button控件
1. 在新项目左侧的资产中 ->选择资产中的控件 ->找到button，并将其拖到下面的grid中。
2. 右击新建的button -> 编辑模板 -> 编辑副本 -> 在新窗口创建Style资源 ->确定
3. 右击新建的ButtonStyle1里面的Template -> 查看源
3. 解析这段button样式源码
button样式的源码总共分为两个部分：1. 默认的样式设置 2.样式的模板设置，包括button里面的控件和相应的状态管理
1. 上图中的以下代码为默认的样式设置：
<!--设置背景 , ButtonBackgroundThemeBrush为系统默认的button背景色--> <Setter Property="Background" Value="{StaticResource ButtonBackgroundThemeBrush}"/> <!--设置前景色, ButtonForegroundThemeBrush为系统默认的button前景色--> <Setter Property="Foreground" Value="{StaticResource ButtonForegroundThemeBrush}"/> <Setter Property="BorderBrush" Value="{StaticResource ButtonBorderThemeBrush}"/> <Setter Property="BorderThickness" Value="{StaticResource ButtonBorderThemeThickness}"/> <Setter Property="Padding" Value="12,4,12,4"/> <Setter Property="HorizontalAlignment" Value="Left"/> <Setter Property="VerticalAlignment" Value="Center"/> <Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}"/> <Setter Property="FontWeight" Value="SemiBold"/>
<Setter Property="FontSize" Value="{StaticResource ControlContentThemeFontSize}"/>
如果要修改默认的button样式，可以在上述位置进行修改。或者添加一些默认样式。
2. button模板中的button内部控件。
<ControlTemplate TargetType="Button"> <Grid>
<!--内部主要由以下3个控件组成 :
1. Border边框控件,命名成"Border" 新建button的时候,可以看到一个边框，就是这个border.
border内部放置一个ContentPresenter,内容呈现控件. 主要用来放在内容。在设置Button的Content属性时，就会修改
ContentPresenter的content属性,(Content="{TemplateBinding Content}")。
设置Button的ContentTemplate,也会修改ContentPresenter控件。
**** 所以,Button里的内容主要通过ContentPresenter呈现 *****
2. Rectangle,矩形控件,命名成"FocusVisualWhite"
3. Rectangle,矩形控件,命名成"FocusVisualBlack"
--> <Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Margin="3"> <ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> </Border> <Rectangle x:Name="FocusVisualWhite" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="1.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}" StrokeDashArray="1,1"/> <Rectangle x:Name="FocusVisualBlack" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="0.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}" StrokeDashArray="1,1"/> </Grid> </ControlTemplate>
3.
button模板中的状态变化
<VisualStateManager.VisualStateGroups>
<!--button这个空间的状态管理
比如，当鼠标经过button、点击button、松开button的时候,button状态会改变。而button的变化就写在这里面
--> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal"/>
<!--PointerOver,鼠标经过的时候,button的一些变化--> <VisualState x:Name="PointerOver">
<!--Storyboard,故事版。可以理解为：定义动画。当鼠标经过button的时候，下面一些动画会执行--> <Storyboard>
<!--用关键帧的对象动画。将border的背景Background,在"0"开始的时候,改变成系统的ButtonPointerOverBackgroundThemeBrush--> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPointerOverBackgroundThemeBrush}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPointerOverForegroundThemeBrush}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState>
<!--Pressed,button被按下的时候的一些变化--> <VisualState x:Name="Pressed"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPressedBackgroundThemeBrush}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPressedForegroundThemeBrush}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState>
<!--Disabled,button变为不可用状态的动画--> <VisualState x:Name="Disabled"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledBackgroundThemeBrush}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Border"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledBorderThemeBrush}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledForegroundThemeBrush}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> <VisualStateGroup x:Name="FocusStates"> <VisualState x:Name="Focused"> <Storyboard> <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualWhite"/> <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualBlack"/> </Storyboard> </VisualState> <VisualState x:Name="Unfocused"/> <VisualState x:Name="PointerFocused"/> </VisualStateGroup> </VisualStateManager.VisualStateGroups>
上述代码定义了，button在相应状态触发时的状态改变。修改上述代码可以达到你想要button效果。
不过在修改button样式，并达到想要的动画的时候，还是要先学习一下win8里的storyboard,即动画。
4.扩展
既然button控件的样式源码可以获取到。
同样的，像ListView,GridView,CheckBox,TextBox等等所有的控件的源码都可以在Blend里面拿到。
而且所有的样式，都分为上述3个部分。只要自己实现修改一个控件达到自己想要的效果，我想想拿下所有的控件已经不在话下了。
最后，想要更好的效果，还是多多学学Storyboard吧。