1

我想将我的按钮重新设计为更扁平，所以我创建了两种样式；首先是ToggleButton那个派生自ToolBar.ToggleButtonStyleKey，第二个是Button那个派生自ToolBar.ButtonStyleKey。

效果很好 - 按钮现在类似于工具栏且扁平。我想要的第二件事是Background当用户将光标悬停在控件上时属性是透明的。因此，为了实现这一点，我定义了一个简单的触发器来设置BackgroundonTransparent事件IsMouseOver。它适用于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>
4

2 回答 2

1

我使用 Snoop （用于检查 WPF 的非常方便的程序）进行了查看，它看起来像您用作基础的模板ToolBar.ButtonStyleKey，有一个触发器，它为（在这种情况下）中的元素Brush的背景选择一个实体什么时候是真的）。BorderButtonIsMouseOver

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

边框背景： 边框背景

按钮背景： 按钮背景

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

我已将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>
于 2013-09-05T21:53:22.720 回答
0

我看到FlatToggleButton和FlatButton样式已经将背景设置为透明 

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

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

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

  • 更改两种样式，使背景不是 透明的
  • 更改触发器，使其将背景设置为透明以外的其他内容
于 2013-09-04T22:19:36.300 回答