Windows Phone 7 (WP7) 单击时更改按钮的背景颜色 [英] Windows Phone 7 (WP7) Change a button's background color on click

问题描述

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

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.

我遇到的问题是我想在单击按钮时更改按钮的背景.我找不到任何可能的方法来做到这一点.

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.

我曾尝试在 Blend 中使用属性更改行为，但结果完全相同.

I've tried using a Property Change behavior in Blend, but that has the exact same result.

我已经尝试为按钮创建一个新的视觉状态并在点击时设置它，但这有点问题，而且我处理的按钮数量有很大的开销.此外，它没有用.

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. :)

推荐答案

您需要做的是创建一个修改 Pressed 视觉状态的按钮模板.

What you need to do is create a button template that modifies the Pressed visual state.

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

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.

我将 Pressed 状态的背景编辑为纯青色，最终得到类似 XAML 的内容.

I edited the Pressed state's background to be a solid Cyan-ish color and ended up with something like this 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>

这篇关于Windows Phone 7 (WP7) 单击时更改按钮的背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！