windows phone7 button控件背景问题

 

在windows phone7平台下做连连看时，为button控件添加背景图片时遇到了三个问题：

1.点击按钮，按钮会变白；

2.IsEnable设置为false时，背景图片不再显示；

3.button click事件不能改变自己的背景色，前景色，背景图片；

通过下面博客里面讲述的以上问题都得以解决了。这里希望有遇到相同情况的朋友们可以解决自己的情况。

 

 

以下内容来自暗影吉他手的博客，原文地址:http://www.cnblogs.com/lhxarcher/archive/2011/01/08/1930660.html

 

关于在WP7中通过代码改变Button背景色的问题的分析与解决方案

在项目开发中尝试每按一次Button就循环改变它的Background：

view source print ?

private void btn1_Click(object sender, RoutedEventArgs e)

{

btn1.Background = new SolidColorBrush(Colors.Blue);

}

却发现按钮的背景色完全没变！开始以为以为是微软的bug，但是想不出来更好的方法，问题也无法解决。

经过研究和探索，基本锁定了问题源，下面是我的分析和结论。

首先我们观察Button的ControlTemplate（xaml代码来自Microsoft Expression Blend 4）：

代码

    
    

     
     
      
      <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>
    
    

注意到在Pressed的VisualState中，名为ButtonBackground的Border的Background被设定为了PhoneForegroundBrush。根据msdn提供的依赖属性优先级的说明（http://msdn.microsoft.com/en-us/library/cc265148(v=VS.95).aspx），storyboard设置的值应该会覆盖掉由代码设置的本地值。 

于是解决方案很简单，把ControlTemplate中的

   
   

    
    
     
     <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
</ObjectAnimationUsingKeyFrames>
   
   

去掉即可，不让VisualState影响Button的Background。这样一来想怎么改就可以怎么改了！