WP7中，修改button样式并重用

在Wp7中按钮的默认效果是这样的：黑色主题普通/按下白色主题普通/按下普通状态的背景色前景很容已通过修改Background、Foreground、BorderBrush等属性实现

<Button Content="Button" Height="72" HorizontalAlignment="Left" Name="button1" VerticalAlignment="Top" Width="160"
Background="Red" BorderBrush="Green" Foreground="Blue"
Click="button1_Click" />
但是按下状态的效果并未改变，仍然是默认效果按下效果可以通过Blend修改按钮样式来实现默认的按钮样式是这样的<Style x:Key="ButtonStyle1" 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 PhoneFontSizeMediumLarge}"/><Setter Property="Padding" Value="10,3,10,5"/><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 PhoneBackgroundBrush}"/></ObjectAnimationUsingKeyFrames><ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground"><DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/></ObjectAnimationUsingKeyFrames><ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground"><DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/></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="Transparent"/></ObjectAnimationUsingKeyFrames></Storyboard></VisualState></VisualStateGroup></VisualStateManager.VisualStateGroups><Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0" Margin="{StaticResource PhoneTouchTargetOverhang}"><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>

将<VisualState x:Name="Pressed">下的Backgournd属性改成这样<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">

<DiscreteObjectKeyFrame KeyTime="0" Value="#600010"/>

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

public class ButtonEx : Button
{
#region Fields

public static readonly DependencyProperty PressedBackgroundProperty =
DependencyProperty.Register("PressedBackground",
typeof(Brush),
typeof(ButtonEx),
new PropertyMetadata(new SolidColorBrush(Colors.White), null));

public static readonly DependencyProperty PressedForegroundProperty =
DependencyProperty.Register("PressedForeground",
typeof(Brush),
typeof(ButtonEx),
new PropertyMetadata(new SolidColorBrush(Colors.Black), null));

public static readonly DependencyProperty PressedBorderBrushProperty =
DependencyProperty.Register("PressedBorderBrush",
typeof(Brush),
typeof(ButtonEx),
new PropertyMetadata(new SolidColorBrush(Colors.Black), null));

public static readonly 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
}

2. 通过blend创建一个ButtonEx的默认样式，改成这样

<Style x:Key="buttonExStyle" TargetType="my:ButtonEx">
<Setter Property="InvisibleMargin" Value="12" />
<Setter Property="PressedBackground" Value="{StaticResource PhoneAccentBrush}" />
<Setter Property="PressedForeground" Value="{StaticResource PhoneBackgroundBrush}" />
<Setter Property="PressedBorderBrush" Value="{StaticResource PhoneForegroundBrush}" />
<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 PhoneFontSizeMediumLarge}"/>
<Setter Property="Padding" Value="10,3,10,5"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="my:ButtonEx">
<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="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=PressedForeground}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=PressedBackground}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=PressedBorderBrush}"/>
</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="Transparent"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0" Margin="{TemplateBinding InvisibleMargin}">
<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>

3. UI中加入一个ButtonEx

<my:ButtonEx Content="Button" Grid.Row="1" Height="72" HorizontalAlignment="Left" Margin="181,121,0,0" x:Name="buttonEx1" VerticalAlignment="Top" Width="160"
Background="Red" PressedBackground="Green" Style="{StaticResource buttonExStyle}" />

效果如下（普通、按下）：同样可以很方便地修改按钮风格，例如

<my:ButtonEx Content="Button" Height="72" HorizontalAlignment="Left" x:Name="buttonEx1" VerticalAlignment="Top" Width="160"
Style="{StaticResource buttonExStyle}"
Click="button1_Click" >
<my:ButtonEx.Background >
<ImageBrush ImageSource="/ListCheckBox;component/Images/Desert.jpg" />
</my:ButtonEx.Background>
<my:ButtonEx.PressedBackground >
<ImageBrush ImageSource="/ListCheckBox;component/Images/Koala.jpg" />
</my:ButtonEx.PressedBackground>
</my:ButtonEx>

PS：样式的定义可以放在./Themes/generic.xaml中。将Key去掉，编译选项设为Resource。这样这个Style就作为ButtonEx的默认Style了。