¿Cómo se cambia el fondo de un Button MouseOver en WPF?

background triggers (5)

Tengo un botón en mi página con este XAML:

<Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Bottom" Width="50" Height="50" HorizontalContentAlignment="Left" BorderBrush="{x:Null}" Foreground="{x:Null}" Margin="50,0,0,0"> <Button.Style> <Style TargetType="Button"> <Setter Property="Background" Value="Green"/> <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Background" Value="Red"/> </Trigger> </Style.Triggers> </Style> </Button.Style> </Button>

Pero cuando coloco el mouse sobre mi botón, el fondo del botón cambia al fondo gris predeterminado de Windows.
¿Cuál es el problema?

Esta es la imagen del botón antes y después del mouseover:
Antes de:

Después:

Esto funcionó bien para mí.

Estilo de botón

Botón

<Button Style="{StaticResource TransparentStyle}" VerticalAlignment="Top" HorizontalAlignment="Right" Width="25" Height="25" Command="{Binding CloseWindow}"> <Button.Content > <Grid Margin="0 0 0 0"> <Path Data="M0,7 L10,17 M0,17 L10,7" Stroke="Blue" StrokeThickness="2" HorizontalAlignment="Center" Stretch="None" /> </Grid> </Button.Content> </Button>

Notas

El botón muestra una pequeña cruz azul, muy similar a la utilizada para cerrar una ventana.
Al establecer el fondo de la cuadrícula en "Transparente", agrega una prueba de aciertos, lo que significa que si el mouse está sobre el botón, funcionará. Omita esta etiqueta, y el botón solo se iluminará si el mouse está sobre una de las líneas vectoriales en el ícono (esto no es muy útil).

Para eliminar el comportamiento predeterminado de MouseOver en el Button , deberá modificar ControlTemplate . Cambiar la definición de su Style a lo siguiente debería ser el truco:

EDITAR: Faltan algunos años, pero en realidad puedes colocar el pincel de borde dentro del borde que está ahí. Idk si eso fue señalado, pero no parece que fuera ...

Solo quiero compartir mi estilo de botón de mi ResourceDictionary que he estado usando. Puede cambiar libremente el fondo onHover en los activadores de estilo. " ColorAnimation To = * su GS deseado (es decir, # FFCEF7A0)". El botón BG también volverá automáticamente a su BG original después del estado mouseOver. Incluso puede establecer qué tan rápido la transición.

Diccionario de recursos

todo lo que tienes que hacer es llamar al estilo.

Ejemplo de implementación

<Button Style="{StaticResource Flat_Button}" Height="Auto"Width="Auto"> <StackPanel> <TextBlock Text="SAVE" FontFamily="Arial" FontSize="10.667"/> </StackPanel> </Button>

Todas las respuestas hasta ahora implican reemplazar por completo el comportamiento del botón predeterminado con otra cosa. Sin embargo, en mi humilde opinión, es útil e importante entender que es posible cambiar solo la parte que le importa , editando la plantilla predeterminada existente para un elemento XAML.

En el caso de tratar con el efecto de desplazamiento sobre un botón WPF, el cambio en la apariencia en un elemento Button WPF es causado por un Trigger en el estilo predeterminado para el Button , que se basa en la propiedad IsMouseOver y establece las propiedades Background y BorderBrush del elemento Border nivel superior en la plantilla de control. El fondo del elemento Button se encuentra debajo del fondo del elemento Border , por lo que cambiar la propiedad Button.Background no evita que se vea el efecto de Button.Background .

Con un poco de esfuerzo, puede anular este comportamiento con su propio setter, pero dado que el elemento que necesita afectar está en la plantilla y no es directamente accesible en su propio XAML, ese enfoque sería difícil y en mi humilde lugar demasiado complejo.

Otra opción sería utilizar el gráfico como Content para el Button lugar de como Background . Si necesita contenido adicional sobre el gráfico, puede combinarlos con una Grid como el objeto de nivel superior en el contenido.

Sin embargo, si, literalmente, solo desea inhabilitar por completo el efecto de desplazamiento (en lugar de simplemente ocultarlo), puede usar el Diseñador de Visual Studio XAML:

Mientras edita su XAML, seleccione la pestaña "Diseño" .
En la pestaña "Diseño" , busca el botón para el que deseas inhabilitar el efecto.
Haga clic con el botón derecho en ese botón y elija "Editar plantilla / Editar una copia ..." . Seleccione en el mensaje que llegue a donde desea ubicar el nuevo recurso de plantilla. Esto parecerá no hacer nada, pero de hecho el Diseñador habrá agregado nuevos recursos donde lo indicó, y cambió el elemento de su botón para hacer referencia al estilo que usa esos recursos como la plantilla del botón.
Ahora, puedes ir a editar ese estilo. Lo más fácil es eliminar o comentar (por ejemplo, Ctrl + E , C ) el elemento <Trigger Property="IsMouseOver" Value="true">...</Trigger> . Por supuesto, puede hacer cualquier cambio en la plantilla que desee en ese momento.

Cuando termines, el estilo del botón se verá más o menos así:

<p:Style x:Key="FocusVisual"> <Setter Property="Control.Template"> <Setter.Value> <ControlTemplate> <Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/> </ControlTemplate> </Setter.Value> </Setter> </p:Style> <SolidColorBrush x:Key="Button.Static.Background" Color="#FFDDDDDD"/> <SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070"/> <SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFBEE6FD"/> <SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1"/> <SolidColorBrush x:Key="Button.Pressed.Background" Color="#FFC4E5F6"/> <SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B"/> <SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/> <SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/> <SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/> <p:Style x:Key="ButtonStyle1" TargetType="{x:Type Button}"> <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/> <Setter Property="Background" Value="{StaticResource Button.Static.Background}"/> <Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/> <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/> <Setter Property="BorderThickness" Value="1"/> <Setter Property="HorizontalContentAlignment" Value="Center"/> <Setter Property="VerticalContentAlignment" Value="Center"/> <Setter Property="Padding" Value="1"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Button}"> <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true"> <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> </Border> <ControlTemplate.Triggers> <Trigger Property="IsDefaulted" Value="true"> <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/> </Trigger>  <Trigger Property="IsPressed" Value="true"> <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Pressed.Background}"/> <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/> </Trigger> <Trigger Property="IsEnabled" Value="false"> <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/> <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/> <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </p:Style>

(Nota: puede omitir las calificaciones del espacio de nombres p: XML en el código real ... Las proporciono aquí solo porque el formateador de código XML se confunde con elementos <Style/> que no tienen un nombre completo con espacio de nombres XML .)

Si desea aplicar el mismo estilo a otros botones, puede hacer clic con el botón derecho en ellos y seleccionar "Editar plantilla / Aplicar recurso" y seleccionar el estilo que acaba de agregar para el primer botón. Incluso puede hacer que ese estilo sea el estilo predeterminado para todos los botones, usando las técnicas normales para aplicar un estilo predeterminado a los elementos en XAML.

Una respuesta ligeramente más difícil que utiliza ControlTemplate y tiene un efecto de animación (adaptado de https://docs.microsoft.com/en-us/dotnet/framework/wpf/controls/customizing-the-appearance-of-an-existing-control )

En su diccionario de recursos, defina una plantilla de control para su botón como esta:

en su XAML puede usar la plantilla de arriba para su botón de la siguiente manera:

Defina su botón

<Button Template="{StaticResource testButtonTemplate2}" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White">My button</Button>

Espero eso ayude