Windows Phone 7(WP7) Cambia el color de fondo de un botón al hacer clic

expression-blend windows-phone-7

Question

Esto parece un problema realmente, muy simple, pero no puedo resolverlo. El culpable parece ser el estilo predeterminado de WP7. Cambia el color de fondo a blanco cuando se hace clic en un botón, luego vuelve al fondo predeterminado del botón.

El problema que tengo es que quiero cambiar el fondo del botón cuando se hace clic en él. No puedo encontrar ninguna forma posible de hacer esto.

Intenté configurar el fondo en el código, pero eso no hace nada. Creo que está sobrescrito por el estilo predeterminado.

Intenté usar un comportamiento de cambio de propiedad en Blend, pero eso tiene exactamente el mismo resultado.

Intenté crear un nuevo estado visual para el botón y configurarlo al hacer clic, pero eso es un poco problemático y tiene una gran sobrecarga para la cantidad de botones con los que estoy tratando. Además, no funcionó.

Puedo establecer el fondo de otros botones en un evento de clic, simplemente no se hace clic en el botón.

¡Este es un obstáculo tan molesto! Estoy seguro de que esta es una línea de código tipo de respuesta. :)

Answer 1

Creo que obtener una referencia al fondo real, luego cambiar eso podría ayudar. Aquí hay un método que tomará un botón de instancia.

 private void HighlightButton(Button btnToHighlight)
{
SolidColorBrush sBrush = (SolidColorBrush)btnToHighlight.Background;
sBrush.Color = //enter your colour here
btnToHighlight.Background = sBrush;
}

Answer 2

Lo que debe hacer es crear una plantilla de botón que modifique el estado visual Presionado.

En blend, seleccione su botón, haga clic en el elemento de menú "Objeto" -> "Editar plantilla" -> "Editar una copia ..." y se crea una nueva plantilla. En la ventana Estados, seleccione el estado visual Presionado en el grupo de estado visual CommonStates. Ahora seleccione ButtonBackground en la jerarquía de objetos y edite el pincel de fondo en la ventana Propiedades.

Edité el fondo del estado Presionado para que fuera un color Cyan-ish sólido y terminé con algo así como este 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 3

Para cambiar el fondo del botón cuando se presiona el botón, uso las plantillas. Como Matt ha señalado, abra el proyecto en Blend. Vaya al botón> clic derecho> Editar plantilla> Editar una copia. Se creará una nueva plantilla para su botón y se agregará al comienzo de su página XAML.

Ahora que necesita cambiar el comportamiento de los botones cuando se presiona el botón, debe cambiar VisualState. Dirígete al estado visual "Presionado" y mira dentro. Este es el estado visual "Presionado".

<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>

Cambie el valor de # FF373737 a cualquier cosa que desee. Ahora estás listo.

Answer 4

<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>