c# - studio - WPF: cambie el color de fondo del borde con el botón izquierdo del mouse hacia abajo

botones redondos visual studio 2017

Question

NO SE ASUSTEN, ¡LA PREGUNTA ES SIMPLE!

A continuación se muestra un estilo que uso para botones en mi aplicación. Ahora trato de cambiar el color de fondo del elemento Border que tiene el nombre "Background" cuando el usuario hace clic en el botón con el botón izquierdo del mouse.

¿Cómo puedo hacer eso?

<Style TargetType="{x:Type Button}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border BorderBrush="#6e6964" BorderThickness="1" CornerRadius="1" Margin="{TemplateBinding Margin}" SnapsToDevicePixels="True">
                    <Border BorderBrush="White" BorderThickness="1" CornerRadius="1" SnapsToDevicePixels="True">
                        <Border Padding="12,4,12,4" SnapsToDevicePixels="True" Name="Background">
                            <Border.Background>
                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                    <GradientStop Color="White" Offset="0"/>
                                    <GradientStop Color="#f1f1f1" Offset="1"/>
                                </LinearGradientBrush>
                            </Border.Background>
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                        </Border>
                    </Border>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" TargetName="Background">
                            <Setter.Value>
                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                    <GradientStop Offset="0" Color="#edf8fb"/>
                                    <GradientStop Offset="1" Color="#e2edf0"/>
                                </LinearGradientBrush>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 1

Necesitas un EventTrigger

Asigne un nombre a uno o ambos GradientStops de su Border (no a los que están en su Trigger):

<GradientStop Color="#f1f1f1" Offset="1" x:Name="Stop2" />

Y agregue el siguiente EventTrigger a su ControlTemplate.Triggers:

<EventTrigger RoutedEvent="Button.Click">
  <EventTrigger.Actions>
    <BeginStoryboard>
      <Storyboard>
        <ColorAnimation Storyboard.TargetName="Stop2" Storyboard.TargetProperty="Color" To="Red" Duration="0" />
      </Storyboard>
    </BeginStoryboard>
  </EventTrigger.Actions>
</EventTrigger>

Si desea modificar ambas paradas de gradiente, asegúrese de darles un nombre y realizar una Animación de color en cada una de ellas individualmente (creo que puede hacer ambas cosas en el mismo guión gráfico).

¡Espero eso ayude!

Editar: Esto hará que el cambio sea permanente en un evento Click (Probé con VS 2010 Beta 2 y Button.MouseLeftButtonDown no funciona pero Button.Click solo funciona para el botón izquierdo del mouse pero no para el botón derecho del mouse). Si solo desea tener el cambio mientras el mouse está abajo ... pero vuelve a un valor normal cuando el botón ya no está presionado ... entonces debe usar el Disparador de propiedad IsPressed como se indica en la otra respuesta.

Answer 2

Solo necesita el siguiente activador de propiedad :

            <ControlTemplate.Triggers>
                <Trigger Property="IsPressed" Value="True">
                    <Setter Property="Background" TargetName="Background" Value="Red"/>
                </Trigger>
            </ControlTemplate.Triggers>