Windows Phone 7中，修改button样式并重用

中国网络水泥

　　在Wp7中按钮的默认效果是这样的：
　　黑色主题普通/按下
http://silverlightchina.net/uploads/allimg/111128/2000144c8-0.gifhttp://silverlightchina.net/uploads/allimg/111128/200014N11-1.gif　　白色主题普通/按下
http://silverlightchina.net/uploads/allimg/111128/200014JM-2.gifhttp://silverlightchina.net/uploads/allimg/111128/2000145014-3.gif　　普通状态的背景色前景很容已通过修改Background、Foreground、BorderBrush等属性实现

• 　　<ButtonContent="Button"Height="72"HorizontalAlignment="Left"Name="button1"VerticalAlignment="Top"Width="160"
  
• 　　Background="Red"BorderBrush="Green"Foreground="Blue"
  
• 　　Click="button1_Click"/>
  
• 　　;
  

http://silverlightchina.net/uploads/allimg/111128/200014LD-4.gif　　但是按下状态的效果并未改变，仍然是默认效果
http://silverlightchina.net/uploads/allimg/111128/200014N11-1.gif　　按下效果可以通过Blend修改按钮样式来实现
　　默认的按钮样式是这样的

• 　　<Stylex:Key="ButtonStyle1"TargetType="Button">
  
• 　　<SetterProperty="Background"Value="Transparent"/>
  
• 　　<SetterProperty="BorderBrush"Value="{StaticResource PhoneForegroundBrush}"/>
  
• 　　<SetterProperty="Foreground"Value="{StaticResource PhoneForegroundBrush}"/>
  
• 　　<SetterProperty="BorderThickness"Value="{StaticResource PhoneBorderThickness}"/>
  
• 　　<SetterProperty="FontFamily"Value="{StaticResource PhoneFontFamilySemiBold}"/>
  
• 　　<SetterProperty="FontSize"Value="{StaticResource PhoneFontSizeMediumLarge}"/>
  
• 　　<SetterProperty="Padding"Value="10,3,10,5"/>
  
• 　　<SetterProperty="Template">
  
• 　　<Setter.Value>
  
• 　　<ControlTemplateTargetType="Button">
  
• 　　<GridBackground="Transparent">
  
• 　　<VisualStateManager.VisualStateGroups>
  
• 　　<VisualStateGroupx:Name="CommonStates">
  
• 　　<VisualStatex:Name="Normal"/>
  
• 　　<VisualStatex:Name="MouseOver"/>
  
• 　　<VisualStatex:Name="Pressed">
  
• 　　<Storyboard>
  
• 　　<ObjectAnimationUsingKeyFramesStoryboard.TargetProperty="Foreground"Storyboard.TargetName=
  　　"ContentContainer">
  
• 　　<DiscreteObjectKeyFrameKeyTime="0"Value="{StaticResource PhoneBackgroundBrush}"/>
  
• 　　</ObjectAnimationUsingKeyFrames>
  
• 　　<ObjectAnimationUsingKeyFramesStoryboard.TargetProperty="Background"Storyboard.TargetName="
  　　ButtonBackground">
  
• 　　<DiscreteObjectKeyFrameKeyTime="0"Value="{StaticResource PhoneForegroundBrush}"/>
  
• 　　</ObjectAnimationUsingKeyFrames>
  
• 　　<ObjectAnimationUsingKeyFramesStoryboard.TargetProperty="BorderBrush"Storyboard.TargetName=
  　　"ButtonBackground">
  
• 　　<DiscreteObjectKeyFrameKeyTime="0"Value="{StaticResource PhoneForegroundBrush}"/>
  
• 　　</ObjectAnimationUsingKeyFrames>
  
• 　　</Storyboard>
  
• 　　</VisualState>
  
• 　　<VisualStatex:Name="Disabled">
  
• 　　<Storyboard>
  
• 　　<ObjectAnimationUsingKeyFramesStoryboard.TargetProperty="Foreground"Storyboard.TargetName="
  　　ContentContainer">
  
• 　　<DiscreteObjectKeyFrameKeyTime="0"Value="{StaticResource PhoneDisabledBrush}"/>
  
• 　　</ObjectAnimationUsingKeyFrames>
  
• 　　<ObjectAnimationUsingKeyFramesStoryboard.TargetProperty="BorderBrush"Storyboard.TargetName="
  　　ButtonBackground">
  
• 　　<DiscreteObjectKeyFrameKeyTime="0"Value="{StaticResource PhoneDisabledBrush}"/>
  
• 　　</ObjectAnimationUsingKeyFrames>
  
• 　　<ObjectAnimationUsingKeyFramesStoryboard.TargetProperty="Background"Storyboard.TargetName="
  　　ButtonBackground">
  
• 　　<DiscreteObjectKeyFrameKeyTime="0"Value="Transparent"/>
  
• 　　</ObjectAnimationUsingKeyFrames>
  
• 　　</Storyboard>
  
• 　　</VisualState>
  
• 　　</VisualStateGroup>
  
• 　　</VisualStateManager.VisualStateGroups>
  
• 　　<Borderx:Name="ButtonBackground"BorderBrush="{TemplateBinding BorderBrush}"BorderThickness="
  　　{TemplateBinding BorderThickness}"Background="{TemplateBinding Background}"CornerRadius="0"Margin="
  　　{StaticResource PhoneTouchTargetOverhang}">
  
• 　　<ContentControlx: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>
  

　　将下<VisualState x:Name="Pressed">的Backgournd属性改成这样

• 　　<DiscreteObjectKeyFrameKeyTime="0"Value="#600010"/>
  

　　按下效果如下：
http://silverlightchina.net/uploads/allimg/111128/2000145359-6.gif　　如果需要加入两个按钮，他们的按下效果不完全一样，例如一个按下背景是棕色，一个是紫色就需要写两个Style。
　　仅仅这点差异，就需要写一个50行的style，这对代码维护显然是不利的。最终找到了一个解决方案。步骤如下
　　1. 创建一个Button的派生类

• 　　publicclass ButtonEx : Button
  
• 　　{
  
• 　　#region Fields
  
• 
  
• 　　publicstaticreadonly DependencyProperty PressedBackgroundProperty =
  
• 　　DependencyProperty.Register("PressedBackground",
  
• 　　typeof(Brush),
  
• 　　typeof(ButtonEx),
  
• 　　new PropertyMetadata(new SolidColorBrush(Colors.White), null));
  
• 
  
• 　　publicstaticreadonly DependencyProperty PressedForegroundProperty =
  
• 　　DependencyProperty.Register("PressedForeground",
  
• 　　typeof(Brush),
  
• 　　typeof(ButtonEx),
  
• 　　new PropertyMetadata(new SolidColorBrush(Colors.Black), null));
  
• 
  
• 　　publicstaticreadonly DependencyProperty PressedBorderBrushProperty =
  
• 　　DependencyProperty.Register("PressedBorderBrush",
  
• 　　typeof(Brush),
  
• 　　typeof(ButtonEx),
  
• 　　new PropertyMetadata(new SolidColorBrush(Colors.Black), null));
  
• 
  
• 　　publicstaticreadonly DependencyProperty InvisibleMarginProperty =
  
• 　　DependencyProperty.Register("InvisibleMargin",
  
• 　　typeof(Thickness),
  
• 　　typeof(ButtonEx),
  
• 　　new PropertyMetadata(new Thickness(12), null));
  
• 
  
• 　　#endregion
  
• 
  
• 　　#region Properties
  
• 
  
• 　　public Brush PressedBackground
  
• 　　{
  
• 　　set { SetValue(PressedBackgroundProperty, value); }
  
• 　　get { return (Brush)GetValue(PressedBackgroundProperty); }
  
• 　　}
  
• 
  
• 　　public Brush PressedForeground
  
• 　　{
  
• 　　set { SetValue(PressedForegroundProperty, value); }
  
• 　　get { return (Brush)GetValue(PressedForegroundProperty); }
  
• 　　}
  
• 
  
• 　　public Brush PressedBorderBrush
  
• 　　{
  
• 　　set { SetValue(PressedBorderBrushProperty, value); }
  
• 　　get { return (Brush)GetValue(PressedBorderBrushProperty); }
  
• 　　}
  
• 
  
• 　　public Thickness InvisibleMargin
  
• 　　{
  
• 　　set { SetValue(InvisibleMarginProperty, value); }
  
• 　　get { return (Thickness)GetValue(InvisibleMarginProperty); }
  
• 　　}
  
• 　　#endregion
  
• 　　}
  

　　http://silverlightchina.net/html/zhuantixilie/winphone7/2011/1128/12144.html