We Keep Coding

MultiTriggers using the same property in XAML

I'm actually overriding the default ControlTemplate of the TextBox and in order to do what I want, I need to trigger two animations when the TextBox loose the focus and it's text is empty. In order to do that I'm using a MultiTrigger with two conditions like this:
(I'll use an animation on the FontSize for the example)
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsFocused" Value="False"/>
<Condition Property="Text" Value="{x:Static sys:String.Empty}"/>
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Title" Storyboard.TargetProperty="FontSize" From="9" To="120" Duration="0:0:2">
<DoubleAnimation.EasingFunction>
<QuinticEase EasingMode="EaseInOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</MultiTrigger.EnterActions>
</MultiTrigger>
The thing is that, the animation is triggered at the TextBox instantiation because the TextBox is not focused and the Text is empty.
So we can say that the animation and the MultiTrigger are working, but when I focus the TextBox once (the GotFocus resets the FontSize), on the LostFocus the animation is not triggered anymore.
BUT if I replace the whole MultiTrigger.EnterActions by this:
<MultiTrigger.Setters>
<Setter Property="Background" Value="Red"/>
</MultiTrigger.Setters>
Everything is working like a charm. I mean that the background is red at the begining, white on the GotFocus and red again on the LostFocus.
I might by misunderstanding the way we have to use the EnterActions but there's not that much documentation on MultiTriggers out there. Do you know why the animation isn't triggered anymore after the first time?
And by the way, is there a better way than Value="{x:Static sys:String.Empty}"to check if the Text property is empty?
EDIT :
In my ControlTemplate.Triggers I'm already using two EventTriggers, one is routed to the GotFocus event and the other one to the LostFocus event.
I saw on the MSDN that EnterActions does not apply to the EventTrigger, so I tried to get rid of both of my EventTriggers and now it works.
The thing is that I used a MultiTrigger because I needed to check if the Text was empty on the LostFocus but may be there is a way to put that condition in an EventTrigger?
EDIT #2:
AS #Satish Pai asked, here is the full ControlTemplate in which I replaced the EventTriggers by a MutliTrigger because, as I said, they seems to be incompatible.
<ControlTemplate TargetType="{x:Type TextBox}">
<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="14"/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock x:Name="Title" Text="{TemplateBinding ToolTip}" Margin="8,14,0,0" Grid.Row="0" Grid.RowSpan="2" Foreground="{StaticResource TextBox.Static.Border}"></TextBlock>
<ScrollViewer x:Name="PART_ContentHost" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" Grid.Row="1"/>
<Rectangle x:Name="UnfocusedUnderLine" Fill="{StaticResource TextBox.Static.Border}" Height="6" Margin="0,1,0,0" Grid.Row="2"/>
<Rectangle x:Name="UnderLine" Fill="{StaticResource TextBox.Focus.Border}" Height="6" Margin="0,1,0,0" Grid.Row="2" Width="0"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Opacity" TargetName="border" Value="0.56"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.MouseOver.Border}"/>
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.Focus.Border}"/>
</Trigger>
<MultiTrigger x:Name="FocusChanged">
<MultiTrigger.Conditions>
<Condition Property="IsFocused" Value="True"/>
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions> <!--GotFocus-->
<BeginStoryboard>
<Storyboard>
<!--Change UnderLine Color-->
<DoubleAnimation Storyboard.TargetName="UnderLine" Storyboard.TargetProperty="Width" From="0" To="500" Duration="0:0:0.25">
<DoubleAnimation.EasingFunction>
<QuinticEase EasingMode="EaseInOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<!--Move Title Up-->
<ThicknessAnimation From="8,14,0,0" To="0,0,0,0" Duration="0:0:0.25" Storyboard.TargetName="Title" Storyboard.TargetProperty="Margin" AutoReverse="False" >
<ThicknessAnimation.EasingFunction>
<QuinticEase EasingMode="EaseInOut"/>
</ThicknessAnimation.EasingFunction>
</ThicknessAnimation>
<!--Decrease Title Size-->
<DoubleAnimation Storyboard.TargetName="Title"
Storyboard.TargetProperty="FontSize"
From="12"
To="9"
Duration="0:0:0.25">
<DoubleAnimation.EasingFunction>
<QuinticEase EasingMode="EaseInOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions> <!--LostFocus-->
<BeginStoryboard>
<Storyboard>
<!--Change UnderLine Color-->
<DoubleAnimation Storyboard.TargetName="UnderLine"
Storyboard.TargetProperty="Width"
From="500"
To="0"
Duration="0:0:0.2">
<DoubleAnimation.EasingFunction>
<QuinticEase EasingMode="EaseInOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</MultiTrigger.ExitActions>
</MultiTrigger>
<MultiTrigger x:Name="LostFocusAndEmptyText">
<MultiTrigger.Conditions>
<Condition Property="Text" Value="{x:Static sys:String.Empty}"/>
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<!--Move Title Down-->
<ThicknessAnimation From="0,0,0,0" To="8,14,0,0" Duration="0:0:0.2" Storyboard.TargetName="Title" Storyboard.TargetProperty="Margin" AutoReverse="False" >
<ThicknessAnimation.EasingFunction>
<QuinticEase EasingMode="EaseInOut"/>
</ThicknessAnimation.EasingFunction>
</ThicknessAnimation>
<!--Increase Title Size-->
<DoubleAnimation Storyboard.TargetName="Title"
Storyboard.TargetProperty="FontSize"
From="9"
To="12"
Duration="0:0:0.2">
<DoubleAnimation.EasingFunction>
<QuinticEase EasingMode="EaseInOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</MultiTrigger.EnterActions>
</MultiTrigger>
<!--LostFocusWithEmptyText-->
</ControlTemplate.Triggers>
</ControlTemplate>
The thing is that both of the MultiTiggers are referring to the same IsFocused property and they don't wanna work together. If I delete the LostFocusAndEmptyText trigger it works, but I really need to differentiate the case where I loose the focus with an empty text and without.
Any suggestion on how to achieve that?

Chage your TiTle TextBlock init state. Marging="0,0,0,0" FontSize = "9"
<TextBlock x:Name="Title" Text="{TemplateBinding ToolTip}" FontSize="9" Margin="0,0,0,0" Grid.Row="0" Grid.RowSpan="2"
use Animation's property 'FillBehavior' set to "Stop". and
remove animation's property 'From' in EventTrigger.
good luck!
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Opacity" TargetName="border" Value="0.56"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.MouseOver.Border}"/>
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.Focus.Border}"/>
</Trigger>
<EventTrigger RoutedEvent="GotFocus">
<BeginStoryboard>
<Storyboard>
<ThicknessAnimation To="0,0,0,0" Duration="0:0:0.25"
Storyboard.TargetName="Title" FillBehavior="Stop"
Storyboard.TargetProperty="Margin" AutoReverse="False" >
<ThicknessAnimation.EasingFunction>
<QuinticEase EasingMode="EaseInOut"/>
</ThicknessAnimation.EasingFunction>
</ThicknessAnimation>
<DoubleAnimation Storyboard.TargetName="Title"
Storyboard.TargetProperty="FontSize" FillBehavior="Stop"
To="9"
Duration="0:0:0.25">
<DoubleAnimation.EasingFunction>
<QuinticEase EasingMode="EaseInOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<MultiTrigger x:Name="LostFocusAndEmptyText">
<MultiTrigger.Conditions>
<Condition Property="Text" Value="{x:Static sys:String.Empty}"/>
<Condition Property="IsFocused" Value="False"/>
</MultiTrigger.Conditions>
<Setter TargetName="Title" Property="FontSize" Value="12"/>
<Setter TargetName="Title" Property="Margin" Value="8,14,0,0"/>
<MultiTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ThicknessAnimation From="0,0,0,0" To="8,14,0,0" Duration="0:0:0.25"
FillBehavior="Stop"
Storyboard.TargetName="Title" Storyboard.TargetProperty="Margin"
AutoReverse="False" >
<ThicknessAnimation.EasingFunction>
<QuinticEase EasingMode="EaseInOut"/>
</ThicknessAnimation.EasingFunction>
</ThicknessAnimation>
<DoubleAnimation Storyboard.TargetName="Title"
Storyboard.TargetProperty="FontSize"
FillBehavior="Stop"
To="12" From="9"
Duration="0:0:0.2">
<DoubleAnimation.EasingFunction>
<QuinticEase EasingMode="EaseInOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</MultiTrigger.EnterActions>
</MultiTrigger>
</ControlTemplate.Triggers>

The IsFocused property does not work for ListView in WPF? How can i change the border color of ListView when i press tab or click on the ListView?

I am designing a ListView and I want to change its border color when it is focused, IsFocused property dosen't seem to work for ListView. Is there any property similar to IsFocused for Listview?
<Style x:Key="{x:Type ListView}" TargetType="ListView">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.CanContentScroll" Value="True" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="BorderBrush" Value="{StaticResource EnabledListViewBorder}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListView}">
<Border x:Name="Border"
Background="Transparent"
Padding="{TemplateBinding Padding}"
BorderBrush="{StaticResource EnabledListViewBorder}"
BorderThickness="1">
<ScrollViewer Style="{DynamicResource ListViewColumnHeaderScrollViewer}">
<ItemsPresenter />
</ScrollViewer>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsGrouping" Value="True">
<Setter Property="ScrollViewer.CanContentScroll" Value="False" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DiabledListViewBorder}" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DiabledListViewBorder}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<EventTrigger RoutedEvent="GotFocus">
<BeginStoryboard>
<Storyboard Duration="0:0:0:1" AutoReverse="False">
<ColorAnimation
Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"
FillBehavior="HoldEnd" From="Red" To="Red"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="LostFocus">
<BeginStoryboard>
<Storyboard AutoReverse="False" Duration="0:0:0:1">
<ColorAnimation
Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"
FillBehavior="HoldEnd" From="Green" To="Green"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
I have updated the question with my Sourcecode with the solution provided but the Border Color isn't changing. What am i missing here.

You can use Style.Triggers to handle GotFocus and LostFocus events.
<ListView.Style>
<Style TargetType="ListView">
<Style.Triggers>
<EventTrigger RoutedEvent="GotFocus">
<BeginStoryboard>
<Storyboard Duration="0:0:0:1" AutoReverse="False">
<ColorAnimation
Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"
FillBehavior="HoldEnd" From="Red" To="Red"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="LostFocus">
<BeginStoryboard>
<Storyboard AutoReverse="False" Duration="0:0:0:1">
<ColorAnimation
Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"
FillBehavior="HoldEnd" From="Green" To="Green" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</ListView.Style>
Update:
If you have rewritten the ControlTemplate, then delete Style.Triggers part and move EventTriggers from it to the ControlTemplate.Triggers. Additionally you have to set Storyboard.TargetName="Border".
<EventTrigger RoutedEvent="LostFocus">
<BeginStoryboard>
<Storyboard AutoReverse="False" Duration="0:0:0:1" Storyboard.TargetName="Border" >
<ColorAnimation
Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"
FillBehavior="HoldEnd" From="Green" To="Green" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>

For ListBox IsFocused not working because focus goes to ItemsPresenter that contains ListBoxItems. So focus go to ItemsPresenter that is inside the ListBox. I got workaround that you subscribe event MouseDown and inside it do Focus for ListView, then the trigger starts working.
Let me know if it works for you

Animatint BlurEffect in a style works but animating DropShadowEffect causes error?

I am trying to animate a DropShadowEffect I have applied to one grid and a BlurEffect that I have applied to another grid.
The blur animation seems to work fine and this is the code.
<Style x:Key="BluredGridStyle" TargetType="{x:Type Grid}">
<Style.Triggers>
<Trigger Property="extentions:GridExtention.IsBlured" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(Effect).Radius" From="0" To="10" Duration="0:0:0.2"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(Effect).Radius" From="10" To="0" Duration="0:0:0.2"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
<Grid Background="{DynamicResource BrHostBackground}">
<Grid extentions:GridExtention.IsBlured="{Binding BackgroundIsBlured}" Style="{StaticResource BluredGridStyle}">
<Grid.Effect>
<BlurEffect x:Name="BlurEffect" Radius="0"/>
</Grid.Effect>
</Grid>
</Grid>
But when I try with the drop shadow I get errors. Here is my initial code.
<Style x:Key="DropShaodowGridStyle" TargetType="{x:Type Grid}">
<Style.Triggers>
<Trigger Property="Visibility" Value="Visible">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(Effect).BlurRadius" From="0" To="80" Duration="0:0:0.2"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(Effect).BlurRadius" From="80" To="0" Duration="0:0:0.2"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
<Grid Visibility="{Binding HardwareLoadingVisibility}">
<Grid x:Name="grid" HorizontalAlignment="Center" VerticalAlignment="Center" Background="White" Width="550" Height="250" Style="{DynamicResource DropShaodowGridStyle}">
<Grid.Effect>
<DropShadowEffect ShadowDepth="0" Opacity="0.8"/>
</Grid.Effect>
</Grid>
</Grid>
This generates the following error
InvalidOperationException: Cannot resolve all property references in the property path '(Effect).BlurRadius'. Verify that applicable objects support the properties.
If I change the property to (Effect).Radius I get the same error.
I also tried changing the property to (UIElement.Effect).(DropShadowEffect.BlurRadius) which generated this error
InvalidOperationException: 'Effect' property does not point to a DependencyObject in path '(0).(1)'.

Looks like I found the answer.
I had to assign a default value to the property in the style.
<Style x:Key="DropShaodowBorderStyle" TargetType="{x:Type Border}">
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect ShadowDepth="0" BlurRadius="0"></DropShadowEffect>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="Visibility" Value="Visible">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(UIElement.Effect).BlurRadius" From="0" To="80" Duration="0:0:2"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(UIElement.Effect).BlurRadius" From="80" To="0" Duration="0:0:2"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>

Button Background Animation: Cannot resolve all property references in the property path 'Background'

I am trying to add animation on mouse hover to my control template set up for buttons in my wpf application
Here is my code:
<Style x:Key="scanButtonActive" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border CornerRadius="3,3,0,0" BorderBrush="#575757" BorderThickness="0,6,0,0" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" Cursor="{TemplateBinding Cursor}">
<ContentPresenter x:Name="ScanButton">
</ContentPresenter>
</Border>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<ColorAnimation From="#6d6e6e" To="#b2b2b2" Duration="0:0:1" Storyboard.TargetName="ScanButton" Storyboard.TargetProperty="Background"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard>
<ColorAnimation From="#b2b2b2" To="#6d6e6e" Duration="0:0:1" Storyboard.TargetName="ScanButton" Storyboard.TargetProperty="Background"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Padding" Value="7, 3, 7, 3" />
<Setter Property="Margin" Value="0, 0, 0, 10" />
<Setter Property="Background" Value="#6d6e6e" />
<Setter Property="Foreground" Value="#ffffff" />
<Setter Property="Height" Value="100"/>
<Setter Property="Width" Value="250"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Cursor" Value="Hand"/>
</Style>
However I get the following error when hovering over a button:
Cannot resolve all property references in the property path Background.
How do I fix this?

There are a few things wrong.
First ContentPresenter does not have a Background property. You might set the Background of the Border control instead.
Second, Background is of type Brush, but a ColorAnmation animates a Color, so you should change the property path to Background.Color.
Third (for completeness), you should explicitly assign a SolidColorBrush to the Background property, which is guaranteed to be modifiable.
<Style TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border x:Name="border" ...>
...
</Border>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<ColorAnimation
To="#b2b2b2" Duration="0:0:1"
Storyboard.TargetName="border"
Storyboard.TargetProperty="Background.Color"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard>
<ColorAnimation
To="#6d6e6e" Duration="0:0:1"
Storyboard.TargetName="border"
Storyboard.TargetProperty="Background.Color"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
...
<Setter Property="Background">
<Setter.Value>
<SolidColorBrush Color="#6d6e6e"/>
</Setter.Value>
</Setter>
</Style>
Please note also that you do not have to set the animation's From values explicitly.

Try using the following code instead:
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<ColorAnimation From="#6d6e6e" To="#b2b2b2" Duration="0:0:1"
Storyboard.TargetName="ScanButton"
Storyboard.TargetProperty="Control.Background"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard>
<ColorAnimation From="#b2b2b2" To="#6d6e6e" Duration="0:0:1"
Storyboard.TargetName="ScanButton"
Storyboard.TargetProperty="Control.Background"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>

Load all the effect of storyboard until it's finish

I have an image which when pressed by user, the opacity will fade until value 0. But the effect only continues if user press and hold the image. Is there a possible way to change the code to: When user press, and without holding the press, the opacity fading effect will stay? I wish to do it in XAML.
<EventTrigger RoutedEvent="Button.Click" SourceName="press">
<EventTrigger.Actions>
<BeginStoryboard Storyboard="{StaticResource showA}"/>
</EventTrigger.Actions>
</EventTrigger>
<Button Grid.Column="5" Command="{Binding Path=PressC}" CommandParameter="dot" Style="{StaticResource TransparentButton}">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Image Name="image5" Source="/W;component/Images/t.png" Height="100" />
<Image Name="pressed5" Source="/W;component/Images/T.png" Height="100" Width="200" Margin="-23,-136,-21,0" Visibility="Hidden" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="pressed5" Storyboard.TargetProperty="Opacity" Duration="0:0:1.5" From="1" To="0"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Setter Property="Panel.ZIndex" Value="999"/>
<Setter TargetName="pressed5" Property="Visibility" Value="Visible"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>

Can you show your full xaml? Because Image does not have IsPressed property and it is not clear how it works for you.
Similar code for button works as expected:
<Button Background="Aquamarine">
<Button.Style>
<Style TargetType="Button">
<Style.Triggers>
<Trigger Property="IsPressed" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" Duration="0:0:1.5" From="1" To="0"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
And for Image it works too with EventTrigger:
<Image Source="d:\123.png">
<Image.Style>
<Style TargetType="Image">
<Style.Triggers>
<EventTrigger RoutedEvent="MouseDown">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" Duration="0:0:1.5" From="1" To="0"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Image.Style>