在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了。