为什么按钮的背景会改变? [英] Why is the Button's Background changing?

问题描述

我是 WPF 的初学者，我什至不知道去哪里寻找这个问题的答案.这个 XAML 对我来说似乎很简单:

I'm a rank beginner with WPF and I don't even know where to look to find the answer to this question. This XAML seems very straightforward to me:

<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 并且触发器使背景变为绿色.一瞬间.然后它变成蓝色.

When I mouse over the button, IsMouseOver changes to True and the trigger makes background turns green. For an instant. Then it turns blue.

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

Even better: if I attach the same setter to the IsFocused property, once I focus on the button the background color throbs between green and blue.

按钮中的某处(我猜它是在 Vista 下使用的任何默认主题中)的某些东西使其行为如此.我怀疑触发器需要设置另一个属性.但是什么?

There's something, somewhere in the Button (I'm guessing it's in whatever default theme is being used under Vista) that is making it behave this way. I suspect that there's another property that the trigger needs to set. But what?

推荐答案

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

You need to change the Button's Template rather than its Style. Built into the template is something called ButtonChrome, and that is what is causing the irritating blue focus effect. Here is a very simple re-templating of the Button control, taken from the provided Simple Styles:

<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，其中包含一个 ContentPresenter(因此您可以看到按钮的内容).我已经通过这种方式有效地从可视化树中删除了 ButtonChrome.

You can see that by re-templating the control, you can change its visual tree. The visual tree in this template is nothing more than a Border that contains a ContentPresenter (so you can see the content of the button). I have effectively removed the ButtonChrome from the visual tree this way.

这篇关于为什么按钮的背景会改变?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！