wpf - ¿Por qué está cambiando el fondo del botón?

button triggers

Question

Soy un principiante de rango con WPF y ni siquiera sé dónde buscar para encontrar la respuesta a esta pregunta. Este XAML me parece muy sencillo:

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Grid>
    <Button>
      <Button.Style>
        <Style TargetType="{x:Type Button}">
        <Style.Triggers>
          <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="Green"/>
          </Trigger>      
        </Style.Triggers>
        </Style>
      </Button.Style>
      <Button.Content>Test</Button.Content>
    </Button>
  </Grid>
</Page>

Cuando IsMouseOver el mouse sobre el botón, IsMouseOver cambia a True y el disparador hace que el fondo se vuelva verde. Por un instante. Luego se vuelve azul.

Aún mejor: si IsFocused el mismo setter a la propiedad IsFocused , una vez que me concentro en el botón, el color de fondo palpita entre verde y azul.

Hay algo en algún lugar del Botón (supongo que está en el tema predeterminado que se usa en Vista) que hace que se comporte de esta manera. Sospecho que hay otra propiedad que el activador necesita establecer. ¿Pero que?

Answer 1

Necesita cambiar la Template del Button lugar de su Style . Construido en la plantilla es algo llamado ButtonChrome , y eso es lo que está causando el efecto de enfoque azul irritante. Aquí hay una remodelación muy simple del control de Button , tomado de los estilos simples proporcionados:

<Style TargetType="{x:Type Button}">
   <Setter Property="SnapsToDevicePixels" Value="true"/>
   <Setter Property="OverridesDefaultStyle" Value="true"/>
   <Setter Property="MinHeight" Value="23"/>
   <Setter Property="MinWidth" Value="75"/>
   <Setter Property="Template">
     <Setter.Value>
       <ControlTemplate TargetType="{x:Type Button}">
         <Border 
           x:Name="Border"  
           CornerRadius="2" 
           BorderThickness="1"
           Background="#C0C0C0"
           BorderBrush="#404040">
           <ContentPresenter 
             Margin="2"
             HorizontalAlignment="Center"
             VerticalAlignment="Center"
             RecognizesAccessKey="True"/>
         </Border>
         <ControlTemplate.Triggers>
           <Trigger Property="IsKeyboardFocused" Value="true">
             <Setter TargetName="Border" Property="BorderBrush" Value="#202020" />
           </Trigger>
           <Trigger Property="IsDefaulted" Value="true">
             <Setter TargetName="Border" Property="BorderBrush" Value="#202020" />
           </Trigger>
           <Trigger Property="IsMouseOver" Value="true">
             <Setter TargetName="Border" Property="Background" Value="#808080" />
           </Trigger>
           <Trigger Property="IsPressed" Value="true">
             <Setter TargetName="Border" Property="Background" Value="#E0E0E0" />
             <Setter TargetName="Border" Property="BorderBrush" Value="#606060" />
           </Trigger>
           <Trigger Property="IsEnabled" Value="false">
             <Setter TargetName="Border" Property="Background" Value="#EEEEEE" />
             <Setter TargetName="Border" Property="BorderBrush" Value="#AAAAAA" />
             <Setter Property="Foreground" Value="#888888"/>
           </Trigger>
         </ControlTemplate.Triggers>
       </ControlTemplate>
     </Setter.Value>
   </Setter>
 </Style>

Puedes ver que al volver a crear la plantilla del control, puedes cambiar su árbol visual . El árbol visual en esta plantilla no es más que un Border que contiene un ContentPresenter (para que pueda ver el contenido del botón). He eliminado efectivamente el ButtonChrome del árbol visual de esta manera.

Answer 2

La respuesta de Charlie es buena. Simplemente quiero complementar con una explicación de lo que estaba sucediendo, y un comentario no parecía el lugar.

La razón por la que estuvo verde por un instante y luego fue azul es porque el ControlTemplate Button del tema predeterminado ya tenía un Trigger IsMouseOver para cambiar el fondo.

Luego agregaste otro en tu Style . Esto no reemplaza al existente porque podría tener múltiples Trigger en la misma propiedad y valor que tienen Setter s muy diferentes y hacer cosas completamente diferentes.

Así que estaba tratando de hacer ambas cosas, y primero hizo lo verde.