为什么Button的背景会改变?

时间:2009-08-19 21:35:54

标签: wpf button triggers styles

我是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下使用的任何默认主题),这使得它以这种方式运行。我怀疑触发器需要设置另一个属性。但是什么?

2 个答案:

答案 0 :(得分:22)

您需要更改Button的{​​{1}}而不是Template。内置于模板中的是ButtonChrome,这就是造成刺激性蓝色焦点效果的原因。以下是Style控件的一个非常简单的重新模板,取自提供的简单样式:

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> 的{​​{1}}(因此您可以看到按钮的内容)。我已经通过这种方式有效地从可视树中删除了ButtonChrome。

答案 1 :(得分:6)

查理的回答很好。我只是想补充说明发生了什么,而评论似乎并不合适。

为什么它瞬间为绿色然后是蓝色的原因是因为ControlTemplate的默认主题Button已经有IsMouseOver Trigger来更改背景。

然后您在Style中添加了另一个。这不会取代现有的,因为您可以在同一属性和值上具有多个Trigger,这些Setter具有非常不同的{{1}}并执行完全不同的操作。

所以它试图做到这两点,然后先做绿色的。