Windows Phone 7(WP7)单击更改按钮的背景颜色

Question

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

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

我已经尝试在代码中设置背景,但这没有任何作用.我认为它被默认样式覆盖了.

我尝试在Blend中使用Property Change行为,但结果完全相同.

我已经尝试为按钮创建一个新的可视状态并在点击时进行设置,但这有点儿错误并且我正在处理的按钮数量有很大的开销.此外,它没有用.

我可以在点击事件中设置其他按钮的背景,而不是单击按钮.

这是一个令人讨厌的障碍!我确信这是一行代码的答案.:)

Answer 1

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

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

我将Pressed州的背景编辑为纯色的Cyan-ish颜色,最终得到了类似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>