Windows Phone 7 (WP7) 单击时更改按钮的背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3476963/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Windows Phone 7 (WP7) Change a button's background color on click
提问by Jason
This seems like a really, really simple problem, but I can't figure it out. The culprit appears to be WP7's default style. It changes the background color to white when a button is clicked, then back to the button's default background.
这似乎是一个非常非常简单的问题，但我无法弄清楚。罪魁祸首似乎是 WP7 的默认样式。单击按钮时，它会将背景颜色更改为白色，然后返回到按钮的默认背景。
The problem I have is I want to change the button's background when the button is clicked. I can't find any possible way to do this.
我遇到的问题是我想在单击按钮时更改按钮的背景。我找不到任何可能的方法来做到这一点。
I've tried setting the background in code, but that does nothing. I think it's being overwritten by the default style.
我试过在代码中设置背景，但这没有任何作用。我认为它正在被默认样式覆盖。
I've tried using a Property Change behavior in Blend, but that has the exact same result.
我曾尝试在 Blend 中使用属性更改行为，但结果完全相同。
I've tried creating a new visual state for the button and setting that on click, but that's a little buggy and has a large overhead for the number of buttons I'm dealing with. Also, it didn't work.
我已经尝试为按钮创建一个新的视觉状态并在点击时设置它，但这有点问题，并且对于我正在处理的按钮数量有很大的开销。此外，它没有奏效。
I can set other buttons' background on a click event, just not the button being clicked.
我可以在点击事件上设置其他按钮的背景，而不是被点击的按钮。
This is such an annoying roadblock! I'm sure this is a one line of code kind of answer. :)
这真是一个令人讨厌的障碍！我确定这是一行代码类型的答案。:)
回答by Matt Casto
What you need to do is create a button template that modifies the Pressed visual state.
您需要做的是创建一个修改 Pressed 视觉状态的按钮模板。
In blend, select your button, click the menu item "Object"->"Edit Template"->"Edit a Copy..." and a new template is created. In the States window, select the Pressed visual state in the CommonStates visual state group. Now select ButtonBackground in the object hierarchy and edit the background brush in the Properties window.
在混合中，选择您的按钮，单击菜单项“对象”->“编辑模板”->“编辑副本...”并创建一个新模板。在“状态”窗口中，在 CommonStates 视觉状态组中选择 Pressed 视觉状态。现在选择对象层次结构中的 ButtonBackground 并在属性窗口中编辑背景画笔。
I edited the Pressed state's background to be a solid Cyan-ish color and ended up with something like this XAML.
我将 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>
回答by keyboardP
I think getting a reference to the actual background, then changing that might help. Here's a method that will take an instance a button.
我认为获得对实际背景的参考，然后改变它可能会有所帮助。这是一个将实例化为按钮的方法。
private void HighlightButton(Button btnToHighlight)
{
SolidColorBrush sBrush = (SolidColorBrush)btnToHighlight.Background;
sBrush.Color = //enter your colour here
btnToHighlight.Background = sBrush;
}
回答by thongaduka
<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>
回答by Saif Al Falah
To change the button background when the button is pressed, I use the templates. As Matt has pointed out, open the project in Blend. Go to the button > Right Click > Edit Template > Edit a copy. A new template for your button would be created and appended at the near beginning of your XAML page.
要在按下按钮时更改按钮背景，我使用模板。正如马特指出的那样，在 Blend 中打开项目。转到按钮 > 右键单击 > 编辑模板 > 编辑副本。将为您的按钮创建一个新模板并将其附加到您的 XAML 页面的开头附近。
Now since you need to change the buttons behavior when the button is pressed, you need to change the VisualState. Head over to the "Pressed" visual state and peer into it. This is the "Pressed" visual state.
现在，由于您需要在按下按钮时更改按钮行为，因此您需要更改 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>
Change the value of #FF373737 to anything you desire. You are now set.
将#FF373737 的值更改为您想要的任何值。你现在已经准备好了。
