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

Question

Esto parece un problema realmente, muy simple, pero no lo puedo resolver. 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 el botón. No puedo encontrar ninguna forma posible de hacer esto.

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

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

He intentado 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 configurar el fondo de otros botones en un evento de clic, simplemente no se hace clic en el botón.

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

Answer 1

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

En combinación, 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.

He editado el fondo del estado Presionado para que sea 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 2

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

Answer 4

Para cambiar el fondo del botón cuando se pulsa el botón, utilizo 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, ya 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> 

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