Button上的WPF MouseUp EventTrigger没有设置BorderBrush&了borderThickness

时间:2015-07-23 08:48:56

标签: wpf triggers mouseup wpf-animation coloranimation

我有一个重置按钮 - 所需的行为是在鼠标悬停时增加尺寸,一旦点击,就会有一个边框。

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="..\Resources\Delete_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="..\Resources\Delete_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="..\Resources\Delete_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>

2 个答案:

答案 0 :(得分:0)

  1. 要为厚度设置动画,您必须使用ThicknessAnimation
  2. 按钮不会触发 MouseLeftButtonUp 路由事件。解决方法是使用 PreviewMouseLeftButtonUp 事件。 Source
  3. 您必须将“Border”元素属性BorderBrush和BorderThickness绑定到模板。
  4. 对于你的第一个案例:

            <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仅针对鼠标右键启动

    希望,这有帮助

答案 1 :(得分:0)

这些方法不起作用的原因是因为MouseUp事件被按钮占用,而且永远不会到达您的处理程序。这可以通过右键单击(没有消耗)而不是左键单击来证明,上面的代码将起作用(我只测试了第一个样本)。

要解决此问题,您可以使用PreviewMouseUp事件代替。这在你的第一个样本中对我有用。