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

Question

这似乎是一个非常非常简单的问题，但我无法弄清楚。罪魁祸首似乎是WP7的默认样式。单击按钮时，它将背景颜色更改为白色，然后返回到该按钮的默认背景。我遇到的问题是我想在单击按钮时更改按钮的背景。我找不到任何可能的方式来做到这一点。我试过在代码中设置背景，但这无济于事。我认为它已被默认样式覆盖。我尝试在Blend中使用“属性更改”行为，但结果完全相同。我尝试为按钮创建一个新的视觉状态并在单击时进行设置，但这有点小问题，并且要处理的按钮数量也很大。另外，它没有用。我可以在单击事件上设置其他按钮的背景，而不能设置正在单击的按钮。这是一个令人讨厌的障碍！我确定这是单行代码的答案。:)

Answer 1

您需要做的是创建一个按钮模板，该模板可以修改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>