Windows Phone 7（WP7）点击后更改button的背景颜色

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

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

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

我已经尝试在Blend中使用属性更改行为，但具有完全相同的结果。

我已经尝试创build一个新的button的可视化状态，并设置点击，但这是一个小错误，并与我正在处理的button数量有很大的开销。 而且，它没有工作。

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

这是一个令人讨厌的路障！ 我确信这是一种代码types的答案。 🙂

Answer 1

你需要做的是创build一个button模板，修改压制的视觉状态。

在混合中，select你的button，点击菜单项“对象” – >“编辑模板” – >“编辑副本…”，并创build一个新的模板。 在States窗口中，selectCommonStates可视状态组中的Pressed可视状态。 现在select对象层次结构中的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

我想获得一个实际背景的参考，然后改变这可能会有所帮助。 这里有一个方法，将一个button的实例。

  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

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

现在，由于您需要更改button按下时的button行为，因此您需要更改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的值更改为任何您想要的值。 你现在被设置。