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.

在混合中，选择按钮，单击菜单项对象"->编辑模板"->编辑副本..."，然后创建一个新模板.在状态"窗口中，在公共状态"视觉状态组中选择已按下"视觉状态.现在，在对象层次结构中选择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屋！