为什么Button的背景会改变？

Question

我是WPF的初学者,我甚至不知道在哪里寻找这个问题的答案.这个XAML对我来说非常简单:

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

当我将鼠标悬停在按钮上时,IsMouseOver更改为True触发器会使背景变为绿色.一瞬间.然后它变成蓝色.

更好的是:如果我将相同的setter附加到IsFocused属性,一旦我专注于按钮,背景颜色会在绿色和蓝色之间徘徊.

Button中有一些东西(我猜它是在Vista下使用的默认主题),这使得它以这种方式运行.我怀疑触发器需要设置另一个属性.但是什么？

Answer 1

您需要更改Button的Template,而不是它的Style.内置于模板中的是一种名为ButtonChrome的东西,这就是造成刺激性蓝色焦点效果的原因.这是一个非常简单的Button控件重新模板,取自提供的简单样式:

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

您可以通过重新模板化控件来查看,您可以更改其可视树.此模板中的可视树只不过是一个Border包含a的ContentPresenter(因此您可以看到按钮的内容).我已经通过这种方式从可视树中有效地删除了ButtonChrome.

Answer 2

查理的回答很好.我只是想补充说明发生了什么,并且评论似乎不是那个地方.

为什么它是绿色的瞬间,然后是蓝色的原因是因为默认主题的ControlTemplate用于Button已经有了一个IsMouseOver Trigger改变的背景.

然后你又添加了另一个Style.这不会取代现有的,因为你可以Trigger在同一属性和值上有多个s,它们具有非常不同的Setters并且完全不同.

所以它试图做到这两点,并首先做绿色的.