Windows Phone 7(WP7)点击更改按钮的背景颜色
这似乎是一个非常非常简单的问题,但我无法弄清楚。罪魁祸首似乎是WP7的默认风格。当单击按钮时,它将背景颜色更改为白色,然后返回到按钮的默认背景。Windows Phone 7(WP7)点击更改按钮的背景颜色
我有的问题是我想改变按钮的背景,当按钮被点击。我找不到任何可能的方法来做到这一点。
我试过在代码中设置背景,但是什么都不做。我认为它被默认样式覆盖。
我试过在混合使用属性更改行为,但具有完全相同的结果。
我试着为按钮创建一个新的可视化状态,并设置点击,但这是一个小bug,并有大量的按钮我正在处理的开销。另外,它没有工作。
我可以在点击事件上设置其他按钮的背景,而不是被点击的按钮。
这是一个令人讨厌的障碍!我确信这是一种代码类型的答案。 :)
你需要做的是创建一个按钮模板,修改按下的视觉状态。
在混合中,选择您的按钮,单击菜单项“对象” - >“编辑模板” - >“编辑副本...”并创建一个新模板。在States窗口中,选择CommonStates可视状态组中的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>
我想获得一个实际背景的参考,然后改变这可能有所帮助。这里有一个方法可以让一个实例成为一个按钮。
private void HighlightButton(Button btnToHighlight)
{
SolidColorBrush sBrush = (SolidColorBrush)btnToHighlight.Background;
sBrush.Color = //enter your colour here
btnToHighlight.Background = sBrush;
}
<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>
要更改按钮的背景按下按钮时,我用的模板。正如马特指出的那样,在Blend中打开项目。转到按钮>右键单击>编辑模板>编辑副本。您的按钮的新模板将创建并附加到您的XAML页面的开头。
现在由于您需要更改按钮按下时的按钮行为,因此您需要更改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>
变化#FF373737到你想要什么价值。你现在被设置。
我有同样的问题,我只是想让它透明,因为我使用图像作为背景。但是,当点击按钮时,我希望没有背景色,因为我使用图像作为按钮背景。 我该怎么做? :) – 2011-01-31 16:34:07
也是:http://blogs.msdn。com/b/ptorr/archive/2010/06/18/why-can-ti-change-the-background-of-my-button-on-a-click-event.aspx?CommentPosted = true#commentmessage – mlvljr 2013-05-23 10:43:47