WPF中的平面按钮-触发器不触发

Question

我想重新设置按钮样式以使其更平整，所以我创建了两种样式。 第一个是从ToolBar.ToggleButtonStyleKey派生的ToggleButton ，第二个是从ToolBar.ButtonStyleKey派生的Button 。

效果很好-按钮现在像工具栏一样扁平。 我想要的第二件事是当用户将光标悬停在控件上时， Background属性必须透明。 为此，我定义了一个简单的触发器，该触发器将IsMouseOver事件的Background设置为Transparent 。 它适用于ToggleButton ，但是，相同的触发器不适用于Button （背景完全不受影响）。

有谁知道为什么此触发器适用于ToggleButton而不适用于Button ？ 我确实期望相同的行为，因为两种样式来自同一个家庭。

下面是完整的代码。

<Window x:Class="WpfButtonsTest.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
  <Window.Resources>
<Style x:Key="FlatToggleButton"  TargetType="ToggleButton" 
BasedOn="{StaticResource {x:Static ToolBar.ToggleButtonStyleKey}}">
  <Setter Property="BorderThickness" Value="0"/>
  <Setter Property="Focusable" Value="False"/>
  <Setter Property="Background" Value="Transparent"/>
  <Style.Triggers>
    <Trigger Property="IsMouseOver" Value="True">
      <Setter Property="Background" Value="Transparent"/>
    </Trigger>
  </Style.Triggers>
</Style>

<Style x:Key="FlatButton"  TargetType="Button" 
BasedOn="{StaticResource {x:Static ToolBar.ButtonStyleKey}}">
  <Setter Property="BorderThickness" Value="0"/>
  <Setter Property="Focusable" Value="False"/>
  <Setter Property="Background" Value="Transparent"/>
  <Style.Triggers>
    <Trigger Property="IsMouseOver" Value="True">
      <Setter Property="Background" Value="Transparent"/>
    </Trigger>
  </Style.Triggers>
</Style>
 </Window.Resources>
 <Grid>
<StackPanel>
  <ToggleButton Style="{StaticResource FlatToggleButton}">
    I am Toggle Button
  </ToggleButton>

  <Button Style="{StaticResource FlatButton}">
    I am Button
  </Button>
</StackPanel>
  </Grid>
</Window>

Answer 1

我看过使用Snoop（用于检查WPF的非常方便的程序），它看起来像您用作基础的模板ToolBar.ButtonStyleKey ，具有一个触发器，该触发器为内部的Border元素的背景选择一个实心的Brush Button （在这种情况下，当IsMouseOver为true时）。

您的本地样式触发器已成功将Button元素的背景设置为透明（或者说，使其保持透明），但是Border背景不受影响，因此您仍然会看到突出显示的行为。

边框背景：

按钮背景：

我认为您必须定义一个ControlTemplate才能获得所需的按钮，我已经从Kaxaml（一个不错的XAML编辑器）中包含的一个ToolBar示例中获取了它。 这是Toolbar bas按钮样式的一个合理的传真，删除了一些内容，它的行为可能像您想要的，或者您可能需要根据自己的行为进行调整。

我将IsPressed触发器留在IsPressed处，您可能想要删除它，或添加其他触发器。

<Style x:Key="ToolBarButtonBaseStyle" TargetType="{x:Type ButtonBase}">
    <Setter Property="SnapsToDevicePixels" Value="true"/>
    <Setter Property="OverridesDefaultStyle" Value="true"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ButtonBase}">
                <Border 
                    x:Name="Border"  
                    BorderThickness="1"
                    Background="Transparent"
                    BorderBrush="Transparent">
                    <ContentPresenter 
                        Margin="2"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        RecognizesAccessKey="True"/>
                </Border>
                <ControlTemplate.Triggers>
                    <!-- Additional triggers removed, e.g "IsMouseOver" -->
                    <!-- You may not want any at all -->
                    <Trigger Property="IsPressed" Value="true">
                        <Setter TargetName="Border" Property="Background" Value="#E0E0E0" />
                        <Setter TargetName="Border" Property="BorderBrush" Value="#606060" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 2

我看到FlatToggleButton和FlatButton样式都已经将Background设置为Transparent

<Setter Property="Background" Value="Transparent"/>

当在IsMouseOver上触发触发器并将“ 背景”再次设置为“ 透明”时，您将看不到任何区别

因此，您需要做的是以下选择之一：

• 更改两种样式 ，以使背景不是透明的
• 更改触发器，以便将“ 背景”设置为“ 透明”以外的其他值