移除ToggleButton烦人的背景鼠标悬停样式

Question

我有一个简单的 ToggleButton，当 IsChecked 时，我只想更改文本。我希望所有其他属性，如 border 和 background 都将是 Transparent，但似乎仍然有这个 background style：

<ToggleButton x:Name="changeButBorderedBlinky" Content="EDIT" Width="40" Height="40" Background="Transparent">
      <ToggleButton.Style>
           <Style TargetType="{x:Type ToggleButton}">
               <Style.Triggers>
                   <Trigger Property="IsMouseOver" Value="true">
                         <Setter Property="Content" Value="Done"/>
                         <Setter Property="FontWeight" Value="Bold"/>
                    </Trigger>
                </Style.Triggers>
           </Style>
       </ToggleButton.Style>
</ToggleButton>

- falukky

Answer 1

有一件经常令人烦恼的事是默认WPF控件的某些视觉方面是以不可配置的方式编码的。MouseOver背景是一个例子（滚动条大小是另一个... grrr!!!）。不过，您可以通过为ToggleButton定义自己的模板并消除该MouseOver触发器来解决这个问题。以下是一个简单的示例：

<ToggleButton x:Name="changeButBorderedBlinky" Width="40" Height="40" Background="Transparent">
    <ToggleButton.Style>
        <Style TargetType="{x:Type ToggleButton}">
            <Setter Property="Content" Value="EDIT"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ToggleButton">
                        <Border x:Name="border"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Background="{TemplateBinding Background}"
                            SnapsToDevicePixels="True">
                                <ContentPresenter x:Name="contentPresenter"
                                                  ContentTemplate="{TemplateBinding ContentTemplate}"
                                                  Content="{TemplateBinding Content}"
                                                  ContentStringFormat="{TemplateBinding ContentStringFormat}"
                                                  Focusable="False"
                                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                  Margin="{TemplateBinding Padding}"
                                                  RecognizesAccessKey="True"
                                                  SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="true">
                    <Setter Property="Content" Value="Done"/>
                    <Setter Property="FontWeight" Value="Bold"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </ToggleButton.Style>
</ToggleButton>

此外，为了更改触发器中的属性，必须在样式中设置，而不是直接设置。这就是为什么您的鼠标悬停触发器中的内容不会更改的原因。如果您删除它的属性设置，并将其添加到带有Setter的样式中，则可以允许触发器更改它。

所有这些的一个缺点是，它会覆盖所有默认模板触发器，因此除非您为“IsChecked”添加触发器，否则您将看不到ToggleButton是否被选中。（如果您需要在触发器中更改Background，请像我为Content所做的那样将Background属性移动到Setter中）

希望这可以帮助...

- Jeff R.

---

从答案中需要注意的关键点是属性必须在样式中设置，并且在边框背景上使用 {TemplateBinding Background}。 - Rafael Ventura

Answer 2

抱歉打扰了一个旧的线程，但是（对于一些困难的人）以下内容对我有用。这可以在App.xaml文件中的Application.Resources标签下或直接在Window.Resources中进行。我最初需要它用于UWP应用程序，然后不得不为另一个项目适应WPF：

<Style TargetType="ToggleButton" x:Key="TransparentToggleButtonStyle">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ToggleButton">
                <Grid x:Name="RootGrid" Background="Transparent">
                    <ContentPresenter x:Name="ContentPresenter" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

然后只需为您的ToggleButton设置样式：

<ToggleButton Style="{StaticResource TransparentToggleButtonStyle}">
    (whatever content you want to present)
</ToggleButton>

希望这能帮助到某个人，

- nurchi

---

谢谢，这对我帮助很大！ - JPWilson

谢谢，这对我帮助很大！ - undefined