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，它有一个触发器，它选择了一个实心 Brush 作为背景Button 中的 Border 元素的数量（在这种情况下，IsMouseOver 为真）。

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

边框背景：

按钮背景：

我认为您必须定义一个 ControlTemplate 才能获得您想要的按钮，我从 Kaxaml（一个不错的 XAML 编辑器）中包含的 ToolBar 示例之一中获取了这个。这是Toolbar bas 按钮样式的合理复制品，删除了一些位，它可能会按照您的意愿运行，或者您可能需要根据您想要的行为对其进行调整。

我已将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 上触发并将 Background 再次设置为 Transparent 时，您将看不到任何区别

所以您需要做的是以下选项之一：

• 更改两种样式，使 背景 不同于 透明
• 更改触发器，以便将背景设置为透明以外的其他内容