WPF MouseUp EventTrigger on Button doesn't set BorderBrush & BorderThickness

Question

I have a reset button - the desired behaviour is to increase in size on mouseover and, once clicked, have a border around it.

The IsMouseOver trigger works, but I can't get the MouseUp event trigger to work (once pressed the button does not display a border).

I have tried the following:

1) Adding an event trigger to the control template triggers

2) Adding an event trigger to the style triggers

3) Adding an event trigger to the button triggers

Am I writing the event trigger incorrectly? I've added the code for the three attempts below - hoping I've just missed something obvious and is a quick fix. Thanks!

1 - Adding an event trigger to the control template triggers

    <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 - Adding an event trigger to the style triggers

      <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 - Adding an event trigger to the button triggers

    <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>

Answer 1

1. To animate Thickness, you have to use ThicknessAnimation
2. Button does not fire MouseLeftButtonUp routed event. Workaround is to use PreviewMouseLeftButtonUp event. Source
3. You have to bind your "Border" element properties BorderBrush and BorderThickness to your template.

For your first case:

        <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>

NOTE that MouseUp is firing only for Right mouse button up

Hope, it helps

Answer 2

The reason why these methods don't work is because the MouseUp event is consumed by the button, and never gets to your handler. This can be demonstrated by a right click (which isn't consumed) instead of a left click, and your above code will work (I only tested the first sample).

To solve this you can use use the PreviewMouseUp event instead. This worked for me in your first sample.