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
页:
[1]