[英]Flat button in WPF - trigger not firing
I wanted to restyle my buttons to be more flat so I have created two styles; 我想重新设置按钮样式以使其更平整,所以我创建了两种样式。 first for
ToggleButton
that derives from ToolBar.ToggleButtonStyleKey
and second for Button
that derives from ToolBar.ButtonStyleKey
. 第一个是从
ToolBar.ToggleButtonStyleKey
派生的ToggleButton
,第二个是从ToolBar.ButtonStyleKey
派生的Button
。
It worked great - the buttons are now toolbar-like and flat. 效果很好-按钮现在像工具栏一样扁平。 Second thing I wanted is to have
Background
property to be transparent when user hovers the cursor over the control. 我想要的第二件事是当用户将光标悬停在控件上时,
Background
属性必须透明。 So to achieve that I defined a simple trigger that sets the Background
to Transparent
on IsMouseOver
event. 为此,我定义了一个简单的触发器,该触发器将
IsMouseOver
事件的Background
设置为Transparent
。 It worked for ToggleButton
, however, the same trigger didn't work for Button
(the background was not affected at all). 它适用于
ToggleButton
,但是,相同的触发器不适用于Button
(背景完全不受影响)。
Does anyone know why this trigger works great for ToggleButton
and does not work for Button
? 有谁知道为什么此触发器适用于
ToggleButton
而不适用于Button
? I did expect the same behavior since both styles are from the same family. 我确实期望相同的行为,因为两种样式来自同一个家庭。
Below is the full code. 下面是完整的代码。
<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>
I had a look using Snoop (a very handy program for inspecting WPF ) and it looks like the template which you're using as a basis, ToolBar.ButtonStyleKey
, has a trigger which selects a solid Brush
for the background of a Border
element within the Button
(in thise case when IsMouseOver
is true). 我看过使用Snoop(用于检查WPF的非常方便的程序),它看起来像您用作基础的模板
ToolBar.ButtonStyleKey
,具有一个触发器,该触发器为内部的Border
元素的背景选择一个实心的Brush
Button
(在这种情况下,当IsMouseOver
为true时)。
Your local style trigger is successfully setting the background of the Button
element to transparent (or rather, keeping it transparent), but the Border
background is unaffected, so you'll still see the highlighting behaviour. 您的本地样式触发器已成功将
Button
元素的背景设置为透明(或者说,使其保持透明),但是Border
背景不受影响,因此您仍然会看到突出显示的行为。
Border Background: 边框背景:
Button Background: 按钮背景:
I think you'll have to define a ControlTemplate
to get the button you're after, I've grabbed this from one of the ToolBar
samples included in Kaxaml (a nice XAML editor). 我认为您必须定义一个
ControlTemplate
才能获得所需的按钮,我已经从Kaxaml(一个不错的XAML编辑器)中包含的一个ToolBar
示例中获取了它。 It's a reasonable facsimile of the Toolbar
bas button style, with a few bits removed, it may behave as you want, or you might need to tweak it depending on your desired behaviour. 这是
Toolbar
bas按钮样式的一个合理的传真,删除了一些内容,它的行为可能像您想要的,或者您可能需要根据自己的行为进行调整。
I've left the IsPressed
trigger in place, you may want to remove it, or add additional triggers. 我将
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>
I see that the both FlatToggleButton and FlatButton styles already have Background as Transparent 我看到FlatToggleButton和FlatButton样式都已经将Background设置为Transparent
<Setter Property="Background" Value="Transparent"/>
When the triggers is fired on IsMouseOver and set the Background again to Transparent you will not see any difference 当在IsMouseOver上触发触发器并将“ 背景”再次设置为“ 透明”时,您将看不到任何区别
So what you need to do is one of these options : 因此,您需要做的是以下选择之一:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.