Windows Phone 7（WP7）点击更改按钮的背景颜色

Question

这似乎是一个非常非常简单的问题，但我无法弄清楚。罪魁祸首似乎是WP7的默认风格。当单击按钮时，它将背景颜色更改为白色，然后返回到按钮的默认背景。

我有的问题是我想改变按钮的背景，当按钮被点击。我找不到任何可能的方法来做到这一点。

我试过在代码中设置背景，但是什么都不做。我认为它被默认样式覆盖。

我试过在混合使用属性更改行为，但具有完全相同的结果。

我试着为按钮创建一个新的可视化状态，并设置点击，但这是一个小bug，并有大量的按钮我正在处理的开销。另外，它没有工作。

我可以在点击事件上设置其他按钮的背景，而不是被点击的按钮。

这是一个令人讨厌的障碍！我确信这是一种代码类型的答案。 :)

Answer 1

你需要做的是创建一个按钮模板，修改按下的视觉状态。

在混合中，选择您的按钮，单击菜单项“对象” - >“编辑模板” - >“编辑副本...”并创建一个新模板。在States窗口中，选择CommonStates可视状态组中的Pressed可视状态。现在在对象层次结构中选择ButtonBackground并在“属性”窗口中编辑背景画笔。

我编辑了Pressed状态的背景，使其成为一种纯色的青色，并以类似于此XAML的东西结束。

<phone:PhoneApplicationPage ...> 
    <phone:PhoneApplicationPage.Resources> 
     <Style x:Key="ButtonStyle1" TargetType="Button"> 
      <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="BorderBrush" Storyboard.TargetName="ButtonBackground"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/> 
              </ObjectAnimationUsingKeyFrames> 
              <ColorAnimation Duration="0" To="Cyan" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="ButtonBackground" d:IsOptimized="True"/> 
             </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> 
             </Storyboard> 
            </VisualState> 
           </VisualStateGroup> 
          </VisualStateManager.VisualStateGroups> 
          <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0" Margin="{StaticResource PhoneTouchTargetOverhang}" Background="Black"> 
           <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
          </Border> 
         </Grid> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </phone:PhoneApplicationPage.Resources> 

    <Grid x:Name="LayoutRoot" Background="Transparent"> 
     <Button Content="Button" Style="{StaticResource ButtonStyle1}"/> 
    </Grid> 
</phone:PhoneApplicationPage> 

Answer 2

我想获得一个实际背景的参考，然后改变这可能有所帮助。这里有一个方法可以让一个实例成为一个按钮。

 private void HighlightButton(Button btnToHighlight) 
     { 

      SolidColorBrush sBrush = (SolidColorBrush)btnToHighlight.Background; 


      sBrush.Color = //enter your colour here 
      btnToHighlight.Background = sBrush; 

     } 

Answer 3

<ControlTemplate x:Key="ButtonNextOver" TargetType="Button"> 
       <Grid> 
        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="CommonStates"> 
          <VisualState x:Name="Normal"/> 
          <VisualState x:Name="MouseOver"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00" Storyboard.TargetProperty="Background" Storyboard.TargetName="hoverbutton"> 
             <DiscreteObjectKeyFrame KeyTime="00:00:00"> 
              <DiscreteObjectKeyFrame.Value> 
               <ImageBrush ImageSource="/NhomMua;component/Image/ico_next_over.png"/> 
              </DiscreteObjectKeyFrame.Value> 
             </DiscreteObjectKeyFrame> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
         <VisualStateGroup x:Name="FocusStates"> 
          <VisualState x:Name="Focused"/> 
          <VisualState x:Name="Unfocused"/> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 
        <Border x:Name="hoverbutton"> 
         <Border.Background> 
          <ImageBrush ImageSource="/NhomMua;component/Image/ico_next.png"/> 
         </Border.Background> 
        </Border> 
       </Grid> 
      </ControlTemplate> 

Answer 4

要更改按钮的背景按下按钮时，我用的模板。正如马特指出的那样，在Blend中打开项目。转到按钮>右键单击>编辑模板>编辑副本。您的按钮的新模板将创建并附加到您的XAML页面的开头。

现在由于您需要更改按钮按下时的按钮行为，因此您需要更改VisualState。前往“按下”的视觉状态，并与之同行。这是“按下”的视觉状态。

<VisualState x:Name="Pressed"> 
<Storyboard> 
     <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer"> 
      <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}"/> 
     </ObjectAnimationUsingKeyFrames> 
      <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground"> 
     <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/> 
     </ObjectAnimationUsingKeyFrames> 
     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="BorderBrush"> 
      <DiscreteObjectKeyFrame KeyTime="0" Value="#FF373737" /> 
     </ObjectAnimationUsingKeyFrames> 
</Storyboard> 

变化＃FF373737到你想要什么价值。你现在被设置。