I have a UserControl which I use for displaying loading animation on DataGrid. When data is found I end
animation by setting Visibility.Collapsed for UserControl.This works.
However I would like to be able to display a "No record found" message too. So I've added a TextBox into UserControl and bind It's Visibility property. When there is no data, this property hides loading animation (rectangles) and shows TextBox instead. When this happens I also added animation for TextBox.
Key part missing is how to set Usercontrol back to Visible.Collapsed once TextBox animation is over, so that I can reuse whole thing on next data searching.
My UserControl:
<UserControl x:Class="MyProject.LoadingControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:MyProject"
mc:Ignorable="d" d:DesignHeight="100" d:DesignWidth="110">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<StackPanel.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard Name="waitingAnimation" RepeatBehavior="Forever">
<DoubleAnimation Storyboard.TargetName="R1" BeginTime="0:0:0.05" Storyboard.TargetProperty="Opacity" From=".1" To="1" AutoReverse="True" Duration="0:0:0.3"/>
<DoubleAnimation Storyboard.TargetName="R2" BeginTime="0:0:0.1" Storyboard.TargetProperty="Opacity" From=".1" To="1" AutoReverse="True" Duration="0:0:0.3"/>
<DoubleAnimation Storyboard.TargetName="R3" BeginTime="0:0:0.15" Storyboard.TargetProperty="Opacity" From=".1" To="1" AutoReverse="True" Duration="0:0:0.3"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</StackPanel.Triggers>
<Rectangle Name="R1" Fill="#FF909595" Opacity=".1" Width="12" Height="8">
<Rectangle.Style>
<Style TargetType="Rectangle">
<Setter Property="Visibility" Value="Visible"></Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding No_records}" Value="true">
<Setter Property="Visibility" Value="Collapsed"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</Rectangle.Style>
</Rectangle>
<Rectangle Name="R2" Fill="#FF909595" Opacity=".1" Width="12" Height="8" Margin="2,0,0,0">
<Rectangle.Style>
<Style TargetType="Rectangle">
<Setter Property="Visibility" Value="Visible"></Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding No_records}" Value="true">
<Setter Property="Visibility" Value="Collapsed"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</Rectangle.Style>
</Rectangle>
<Rectangle Name="R3" Fill="#FF909595" Opacity=".1" Width="12" Height="8" Margin="2,0,0,0">
<Rectangle.Style>
<Style TargetType="Rectangle">
<Setter Property="Visibility" Value="Visible"></Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding No_records}" Value="true">
<Setter Property="Visibility" Value="Collapsed"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</Rectangle.Style>
</Rectangle>
<TextBox Name="txt" Text="No records found" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="16" FontWeight="Bold" FontFamily="Segoe Print" BorderBrush="Black" Padding="3" >
<TextBox.Style>
<Style TargetType="TextBox">
<Setter Property="Visibility" Value="Collapsed"></Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding No_records}" Value="True">
<Setter Property="Visibility" Value="Visible"></Setter>
</DataTrigger>
<Trigger Property="Visibility" Value="Visible">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" From="1" To="0" AutoReverse="True" BeginTime="0:0:0" Duration="0:0:1" RepeatBehavior="0:0:4"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Duration="0:0:1" BeginTime="0:0:4.5" >
<DiscreteObjectKeyFrame Value="{x:Static Visibility.Hidden}" KeyTime="0:0:1"></DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
</TextBox.Style>
</TextBox>
</StackPanel>
</UserControl>
ViewModel code:
private void Get_data()
{
//Visible property for my UserControl
LoadingControl_visible = Visibility.Visible;
//Fetching data - asnyc method
var _data = _procedures.Get_employees().Result;
if(_data == null)
{
return;
}
else
{
//Set ItemsSource property
DataGrid_data = _data;
if (DataGrid_data.Count>0)
{
//Records found - hide UserControl
LoadingControl_visible = Visibility.Collapsed;
}
else
{
//Property for showing Textbox inside UserControl - no records found
No_records = true;
}
}
}
And Usercontrol is set in View like this:
<loading_ctl:LoadingControl Grid.Row="2" HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="{Binding LoadingControl_visible}"/>
How can I set Visible.Collapsed to parent UserControl from child TextBox trigger?
As pointed out, I solved my problem using Completed event of storyboard, in code behind:
public partial class LoadingControl : UserControl
{
public LoadingControl()
{
InitializeComponent();
var story=(Storyboard)this.FindResource("story");
story.Completed += new EventHandler(Story_Completed);
}
private void Story_Completed(object sender, EventArgs e)
{
this.Visibility = Visibility.Collapsed;
}
}
Related
I have a observable collection of 10 objects binded in a itemscontrol canvas .
Each object has a different canvas.right canvas.top value.
The ideea was to click on the object to edit it , the object should move to a certain position , edit it and when its done click on it to go back to its original position.
So i used a checkbox to have a datatriger for the animation , i have two animations one for edit the other for going back.
Problem is that only the first animation fires the second never so the control never moves back to its position.
Here is the code:
<ItemsControl ItemsSource="{Binding SelectedButtonForEdit.Layers}">
<ItemsControl.Template>
<ControlTemplate TargetType="ItemsControl">
<Canvas IsItemsHost="True"/>
</ControlTemplate>
</ItemsControl.Template>
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter">
<Setter Property="Canvas.Right" x:Name="right" Value="{Binding CanvasRight}"/>
<Setter Property="Canvas.Top" x:Name="top" Value="{Binding CanvasTop}"/>
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<CheckBox Width="342" Height="156" IsChecked="{Binding IsEditing}" BorderBrush="Black" BorderThickness="1" Style="{StaticResource MaterialDesignRaisedAccentButton}" Background="{Binding Name,Converter={StaticResource LayerNameToColor}}" >
<Grid VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="3*"/>
<RowDefinition Height="*"/>
</Grid>
</CheckBox>
</DataTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding IsEditing}" Value="False">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(Canvas.Right)" Duration="0:0:0:0.1" ></DoubleAnimation>
<DoubleAnimation Storyboard.TargetProperty="(Canvas.Top)" Duration="0:0:0:0.1" ></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
<DataTrigger Binding="{Binding IsEditing}" Value="True">
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(Canvas.Right)" To="200" Duration="0:0:0:0.1" ></DoubleAnimation>
<DoubleAnimation Storyboard.TargetProperty="(Canvas.Top)" To="150" Duration="0:0:0:0.1" ></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
On your first trigger, you have a EnterActions, and on the second you have ExitActions. But in your case, you only need 1 trigger, with both EnterActions and ExitActions, like so :
<DataTrigger Binding="{Binding IsEditing}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(Canvas.Right)" To="200" Duration="0:0:0:0.1" ></DoubleAnimation>
<DoubleAnimation Storyboard.TargetProperty="(Canvas.Top)" To="150" Duration="0:0:0:0.1" ></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(Canvas.Right)" Duration="0:0:0:0.1"></DoubleAnimation>
<DoubleAnimation Storyboard.TargetProperty="(Canvas.Top)" Duration="0:0:0:0.1"></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
In the code I provided, when IsEditing will turn to True, the animation will move the object to 200,150, and when IsEditing will turn to false, will go back to the original values.
I want to use an image to show state and I want one of those images to be a loading spinner. I'm rotating the image when its a spinner using a trigger. However, this approach seems to throw the error "Cannot animate '(RenderTransform).(RotateTransform.Angle)' on an immutable object instance"
<ItemsControl ItemsSource="{Binding StatefulViewModels}"
HorizontalContentAlignment="Stretch">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<Expander IsEnabled="{Binding IsCompleted}">
<Expander.Header>
<StackPanel Orientation="Horizontal">
<Image Margin="5" Width="18">
<Image.RenderTransform>
<RotateTransform Angle="0" CenterX="9" CenterY="9"/>
</Image.RenderTransform>
<Image.Style>
<Style TargetType="{x:Type Image}">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=CurrentState}" Value="{x:Static enums:State.CompletedWithErrors}">
<Setter Property="Source" Value="../Images/Failed.png" />
</DataTrigger>
<DataTrigger Binding="{Binding Path=CurrentState}" Value="{x:Static enums:State.CompletedSuccessfully}">
<Setter Property="Source" Value="../Images/Success.png"/>
</DataTrigger>
<DataTrigger Binding="{Binding Path=CurrentState}" Value="{x:Static enums:State.Unexecuted}">
<Setter Property="Source" Value="../Images/Waiting.png"/>
</DataTrigger>
<DataTrigger Binding="{Binding Path=CurrentState}" Value="{x:Static enums:State.Running}">
<Setter Property="Source" Value="../Images/Running.png"/>
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(RotateTransform.Angle)"
From="0"
To="360"
Duration="0:0:2"
RepeatBehavior="Forever"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(RotateTransform.Angle)"
To="0"
Duration="0:0:0"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
<TextBlock Margin="5" Text="{Binding Path=Title}" FontSize="16"/>
</StackPanel>
</Expander.Header>
<ContentControl Content="{Binding}" ContentTemplateSelector="{StaticResource ResultTemplateSelector}"/>
</Expander>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
I've read an MSDN article explaining about datatriggers and storyboards but I can't think of a good alternative to this approach.
Whats the correct way to achieve this/fix my approach?
Try to set the RenderTransform property of the Image using a Style setter instead of setting it using a local value:
<Image Margin="5" Width="18">
<Image.Style>
<Style TargetType="{x:Type Image}">
<Setter Property="RenderTransform">
<Setter.Value>
<RotateTransform Angle="0" CenterX="9" CenterY="9"/>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding Path=CurrentState}" Value="{x:Static enums:State.CompletedWithErrors}">
<Setter Property="Source" Value="../Images/Failed.png" />
</DataTrigger>
<DataTrigger Binding="{Binding Path=CurrentState}" Value="{x:Static enums:State.CompletedSuccessfully}">
<Setter Property="Source" Value="../Images/Success.png"/>
</DataTrigger>
<DataTrigger Binding="{Binding Path=CurrentState}" Value="{x:Static enums:State.Unexecuted}">
<Setter Property="Source" Value="../Images/Waiting.png"/>
</DataTrigger>
<DataTrigger Binding="{Binding Path=CurrentState}" Value="{x:Static enums:State.Running}">
<Setter Property="Source" Value="/Images/Running.png"/>
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(RotateTransform.Angle)"
From="0"
To="360"
Duration="0:0:2"
RepeatBehavior="Forever"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(RotateTransform.Angle)"
To="0"
Duration="0:0:0"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
I have a WPF canvas project where I drag and drop objects on the canvas from a toolbox. Based upon certain data, some of those objects should flash or blink. I get an unhandled exception :Cannot animate '(Foreground).(0)' on an immutable object instance.. Following is my code. Somebody suggested using (Foreground).(SolidColorBrush.Color) and I changed that in my markup but it doesn't seem to fix it.
<!-- DataTemplate for DesignerCanvas look and feel -->
<DataTemplate DataType="{x:Type viewModels:SingleValueControlViewModel}">
<Grid>
<Label Name="label" Content="{Binding TagValue}" IsHitTestVisible="False" Height="{Binding ItemHeight}" Width="{Binding ItemWidth}"
Background="{Binding BackColor}"
Foreground="{Binding ForeColor}"
BorderBrush="{Binding BorderColor}"
BorderThickness="{Binding StyleProperties.BorderWidth}"
FontFamily="{Binding StyleProperties.Font.FontFamily}"
FontSize = "{Binding StyleProperties.Font.Size}"
FontStyle="{Binding StyleProperties.Font.Style}"
HorizontalContentAlignment="{Binding TextAlign}" >
<Label.Style>
<Style>
<Style.Triggers>
<DataTrigger Binding="{Binding StyleProperties.FlashEnable}" Value="true">
<Setter Property="Label.Background" Value="Black"></Setter>
<Setter Property="Label.Foreground" Value="Red"></Setter>
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<ColorAnimation
Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)"
Duration="00:00:00:01"
From="Black" To="Red">
</ColorAnimation>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Label.Style>
</Grid>
</DataTemplate>
/* Final answer after examining user's code
*/
Add this to your DiagramControl.xaml
<DataTrigger Binding="{Binding IsSelected}" Value="True">
<Setter Property="Opacity" Value="1"/>
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<DoubleAnimation Storyboard.TargetProperty="Opacity" From="1" To=" 0.1" Duration="00:00:0.3"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
/* Fresh update as user still can't run his animation and reports error said in comment
*/
You must be binding your Background, Foreground properties, and remember Brush objects are immutable. There is a workaround as described in following msdn link :
immutable instance animation error
debugging animations
/* New answer posted after user updated his question with present XAML code */
I have used your code as it is like below with one addition of TargetType="Label" and it is working perfectly. I used my own StyleProperties.FlashEnable binding for your DataTrigger to work.
This is one side. Another side : You are doing all this dynamically as you are dragging items to Canvas. For this you need to apply your style/triggers in code.
<Grid>
<Label Content="Hi ! I am added dynamically" TextBlock.FontSize="45">
<Label.Style>
<Style TargetType="Label">
<Style.Triggers>
<DataTrigger Binding="{Binding StyleProperties.FlashEnable, Mode=OneWay}" Value="true">
<Setter Property="Label.Background" Value="Black"></Setter>
<Setter Property="Label.Foreground" Value="Red"></Setter>
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<ColorAnimation
Storyboard.TargetProperty="(Foreground).(SolidColorBrush.Color)"
Duration="00:00:00:01"
From="Black" To="Red">
</ColorAnimation>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Label.Style>
</Label>
</Grid>
/* Old answer posted before user updated his question */
To show your object flashing, you must be changing their Foreground property. And this Foreground color must be coming from some variable. For binding you have to use a dependency property, or your class containing your property/variable must implement INotifyPropertyChanged, so that your property raise PropertyChanged event.
You should also provide some initial value to Foreground if you are using Animation.
You also might be using DynamicResource instead of StaticResource.
More can be said if you post some XAML.
This works for me:
<Style TargetType="Label">
<Style.Triggers>
<DataTrigger Binding="{Binding FlashEnable}" Value="True">
<Setter Property="Background" Value="Black"/>
<Setter Property="Foreground" Value="Red"/>
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<ColorAnimation
Storyboard.TargetProperty="Foreground.Color"
Duration="0:0:1" From="Black" To="Red">
</ColorAnimation>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
You can also explicitly set a SolidColorBrush in the style setter of the Foreground property:
<Style TargetType="Label">
<Style.Triggers>
<DataTrigger Binding="{Binding FlashEnable}" Value="True">
<Setter Property="Background" Value="Black"/>
<Setter Property="Foreground">
<Setter.Value>
<SolidColorBrush Color="Red"/>
</Setter.Value>
</Setter>
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<ColorAnimation
Storyboard.TargetProperty="Foreground.Color"
Duration="0:0:1" From="Black" To="Red">
</ColorAnimation>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
</Style>
I'm developing a C# WPF application and try to rotate a button or his content to animate a refreshing state.
Therefor I extended my button style with a DataTrigger and bind to a property of my ViewModel.
But when I start the application and change the property, nothing happens. What did I miss?
Here some code snippets of the button:
<Button Style="{StaticResource MenuButtonStyle}"
Command="{Binding RefreshCommand}">
<Viewbox>
<Path Data="M1.1212257,9.3630001L6.5977538,11.580556 4.2506914,12.856734C5.4929478,15.192778 7.9304001,16.795777 10.761055,16.795777 13.75407,16.795777 16.324983,15.014366 17.488389,12.45831L19.643999,12.45831C18.371294,16.144636 14.875176,18.804999 10.761055,18.804999 7.1745365,18.804999 4.0586705,16.782776 2.4753525,13.820294L0,15.164176z M10.760896,0C14.30653,1.3528629E-07,17.389073,1.977851,18.989344,4.8840143L21.333,3.5363943 20.353317,9.3630001 14.824021,7.2771222 17.239375,5.8891636C15.988099,3.5858327 13.567544,2.0091001 10.760896,2.0091001 7.7688711,2.0091001 5.1979985,3.7902967 4.0345705,6.3461806L1.879,6.3461806C3.1517664,2.6600806,6.6478317,1.3528629E-07,10.760896,0z"
Stretch="Uniform" Fill="{StaticResource IconColor}"/>
</Viewbox>
</Button>
and the property of the ViewModel:
private bool _isRefreshing = false;
public bool IsRefreshing
{
get { return _isRefreshing; }
set
{
_isRefreshing = value;
OnPropertyChanged("IsRefreshing");
}
}
My button style looks like:
<Style x:Key="MenuButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Margin" Value="5"/>
<Setter Property="Padding" Value="5"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Width" Value="32"/>
<Setter Property="Height" Value="32"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Path=IsRefreshing}" Value="true">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(LayoutTransform).(RotateTransform.Angle)"
From="0"
To="360"
Duration="0:0:8"
RepeatBehavior="Forever"
/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard FillBehavior="Stop">
<DoubleAnimation Storyboard.TargetProperty="(LayoutTransform).(RotateTransform.Angle)"
To="0"
Duration="0:0:0"
/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
Assuming that DataContext of the Button is set accordingly and it has access to IsRefreshing property and you're not setting LayoutTransfom of the Button to RotateTransform so there's nothing to animate. Add another setter to you Style
<Setter Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="0"/>
</Setter.Value>
</Setter>
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>