我有一个重置按钮-期望的行为是在鼠标悬停时增加大小,一旦点击,它周围有一个边框。
IsMouseOver触发器工作,但我不能让MouseUp事件触发器工作(一旦按下按钮不显示边框)。
我已经试过了:
1)添加事件触发器到控件模板触发器
2)添加事件触发器到样式触发器
3)为按钮触发器添加事件触发器
我是否错误地编写了事件触发器?我已经为下面的三次尝试添加了代码-希望我只是错过了一些明显的东西,并且是一个快速修复。谢谢!
1 -添加事件触发器到控件模板触发器
<Button x:Name="ResetButton"
Margin="0,0,20,0"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Command="{Binding Path=DoClearCmd}"
ToolTip="Reset all search criteria.">
<StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="16"
Foreground="White"
Text=" Reset" />
<Image Width="16"
Height="16"
Margin="2,0,0,0"
HorizontalAlignment="Center"
VerticalAlignment="Center" Source="..ResourcesDelete_16x16.png" />
</StackPanel>
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="dx:ThemeManager.ThemeName" Value="None" />
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="MinHeight" Value="25" />
<Setter Property="MinWidth" Value="25" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform ScaleX="1" ScaleY="1" />
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border x:Name="Border">
<ContentPresenter Margin="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RecognizesAccessKey="True" />
</Border>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="MouseUp">
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<ColorAnimation Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" To="Tomato" />
<DoubleAnimation Storyboard.TargetProperty="BorderThickness" To="2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetProperty="RenderTransform.ScaleX"
To="1.05" />
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetProperty="RenderTransform.ScaleY"
To="1.05" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetProperty="RenderTransform.ScaleX"
To="1" />
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetProperty="RenderTransform.ScaleY"
To="1" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>
2 -添加一个事件触发器到样式触发器
<Button x:Name="ResetButton"
Margin="0,0,20,0"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Command="{Binding Path=DoClearCmd}"
ToolTip="Reset all search criteria.">
<StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="16"
Foreground="White"
Text=" Reset" />
<Image Width="16"
Height="16"
Margin="2,0,0,0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Source="..ResourcesDelete_16x16.png" />
</StackPanel>
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="dx:ThemeManager.ThemeName" Value="None" />
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="MinHeight" Value="25" />
<Setter Property="MinWidth" Value="25" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform ScaleX="1" ScaleY="1" />
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border x:Name="Border">
<ContentPresenter Margin="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RecognizesAccessKey="True" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetProperty="RenderTransform.ScaleX"
To="1.05" />
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetProperty="RenderTransform.ScaleY"
To="1.05" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetProperty="RenderTransform.ScaleX"
To="1" />
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetProperty="RenderTransform.ScaleY"
To="1" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<EventTrigger RoutedEvent="MouseUp">
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<ColorAnimation Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" To="Tomato" />
<DoubleAnimation Storyboard.TargetProperty="BorderThickness" To="2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
3 -为按钮触发器添加事件触发器
<Button x:Name="ResetButton"
Margin="0,0,20,0"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Command="{Binding Path=DoClearCmd}"
ToolTip="Reset all search criteria.">
<StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="16"
Foreground="White"
Text=" Reset" />
<Image Width="16"
Height="16"
Margin="2,0,0,0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Source="..ResourcesDelete_16x16.png" />
</StackPanel>
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="dx:ThemeManager.ThemeName" Value="None" />
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="MinHeight" Value="25" />
<Setter Property="MinWidth" Value="25" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform ScaleX="1" ScaleY="1" />
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border x:Name="Border">
<ContentPresenter Margin="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RecognizesAccessKey="True" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetProperty="RenderTransform.ScaleX"
To="1.05" />
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetProperty="RenderTransform.ScaleY"
To="1.05" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetProperty="RenderTransform.ScaleX"
To="1" />
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetProperty="RenderTransform.ScaleY"
To="1" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.MouseUp">
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<ColorAnimation Storyboard.TargetName="ResetButton" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" To="Tomato" />
<DoubleAnimation Storyboard.TargetName="ResetButton" Storyboard.TargetProperty="BorderThickness" To="2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
- 动画厚度,你必须使用ThicknessAnimation
- Button不触发MouseLeftButtonUp路由事件。解决方法是使用PreviewMouseLeftButtonUp事件。源 你必须绑定你的"Border"元素属性BorderBrush和BorderThickness到你的模板。
对于您的第一个案例:
<Button>
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="dx:ThemeManager.ThemeName" Value="None" />
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="MinHeight" Value="25" />
<Setter Property="MinWidth" Value="25" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform ScaleX="1" ScaleY="1" />
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border x:Name="Border"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}">
<ContentPresenter Margin="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RecognizesAccessKey="True" />
</Border>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="MouseUp">
<BeginStoryboard>
<Storyboard Duration="0:0:2" AutoReverse="True" RepeatBehavior="Forever">
<ColorAnimation Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" To="Tomato" />
<ThicknessAnimation Storyboard.TargetProperty="BorderThickness" To="4" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetProperty="RenderTransform.ScaleX"
To="1.05" />
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetProperty="RenderTransform.ScaleY"
To="1.05" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetProperty="RenderTransform.ScaleX"
To="1" />
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetProperty="RenderTransform.ScaleY"
To="1" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>
注意 MouseUp只在鼠标右键向上时触发
希望能有所帮助
这些方法不起作用的原因是MouseUp事件由按钮使用,而永远不会到达处理程序。这可以通过右击而不是左击来演示,并且上面的代码可以工作(我只测试了第一个示例)。
要解决这个问题,您可以使用使用PreviewMouseUp
事件代替。