Before you read this question, please see this
Now I have the storyboard defined in the user control resources and it gets triggered it on an event that is defined in ViewModel:
<UserControl.Resources>
<Storyboard x:Key="Storyboard2">
<DoubleAnimation Storyboard.TargetName="Btn_Import" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:2"/>
<DoubleAnimation Storyboard.TargetName="Studio" Storyboard.TargetProperty="Opacity" From="0" To="{Binding StudioOpacityValue}" Duration="0:0:2"/>
<DoubleAnimation Storyboard.TargetName="StudioTranslateLeftToRight" Storyboard.TargetProperty="X" By="{Binding StudioStartingPointWidth}" Duration="0:0:2">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseInOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation Storyboard.TargetName="Animation" Storyboard.TargetProperty="Opacity" From="0" To="{Binding AnimationOpacityValue}" Duration="0:0:2"/>
<DoubleAnimation Storyboard.TargetName="Record" Storyboard.TargetProperty="Opacity" From="0" To="{Binding RecordOpacityValue}" Duration="0:0:2"/>
<DoubleAnimation Storyboard.TargetName="Info" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:2"/>
<DoubleAnimation Storyboard.TargetName="textframe_image" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:2"/>
<local:CommandFakeAnimation Command="{Binding Path=MainButtonClickedCommand, Mode=OneWay}" CommandParameter="Hide" Storyboard.TargetProperty="Opacity" Duration="0:0:0"/>
</Storyboard>
</UserControl.Resources>
and then I have an event that trigers the storyboard:
<i:Interaction.Triggers>
<i:EventTrigger EventName="FadeInMainButtonsAfterStudio" SourceObject="{Binding Mode=OneWay}">
<ei:ControlStoryboardAction Storyboard="{StaticResource Storyboard2}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
and the control that I want to apply the animation to is:
<Button x:Name ="Studio" Grid.Row="33" Grid.Column="57" Grid.ColumnSpan="36" Grid.RowSpan="36" IsEnabled="{Binding IsStudioEnabled}" Opacity="{Binding StudioOpacityValue}" Command="{Binding MainButtonClickedCommand}" CommandParameter="Show">
<Button.Template>
<ControlTemplate>
<Grid RenderTransformOrigin="0.5,0.5" x:Name="bg">
<Image x:Name ="studio_image" Source="{Binding StudioBtnBaseImagePath}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="studio_image" Property="Source" Value="{Binding StudioBtnOverImagePath}" />
</Trigger>
<Trigger Property="ButtonBase.IsPressed" Value ="True">
<Setter TargetName="bg" Property="RenderTransform">
<Setter.Value>
<ScaleTransform ScaleX="0.9" ScaleY="0.9"/>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
<Button.RenderTransform>
<TransformGroup>
<TranslateTransform x:Name="StudioTranslateLeftToRight" X="0"/>
</TransformGroup>
</Button.RenderTransform>
</Button>
but I get the following runtime error:
Additional information: No target was specified for
'MainMenu.DummyAnimations.CommandFakeAnimation'
What could be the problem with this?
As clearly described in the error you are getting, you have not provided Storyboard.TargetName for your custom Animation local:CommandFakeAnimation
Related
I have a list view that is being populated with wrap panels through my binding. My code currently will animate the opacity on MouseEnter (opacity up to 1.0) and MouseLeave (opacity down to {Binding PanelOpacity}) just fine. However, when I select a different wrap panel, I need the storyboard for MouseLeave to fire to reduce the opacity.
Snippet:
<ListView.ItemTemplate>
<DataTemplate>
<WrapPanel x:Name="panelObject" Orientation="Horizontal" Margin="5,7">
<WrapPanel.InputBindings>
<MouseBinding MouseAction="LeftClick"
Command="{Binding DataContext.GridClickCmd, RelativeSource={RelativeSource AncestorType=Grid}}"
CommandParameter="{Binding Server}"/>
</WrapPanel.InputBindings>
<WrapPanel.Style>
<Style TargetType="{x:Type WrapPanel}">
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Red" />
</Style.Resources>
<Setter Property="Opacity" Value="{Binding PanelOpacity}" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Opacity" Value="1.0" />
</Trigger>
</Style.Triggers>
</Style>
</WrapPanel.Style>
<WrapPanel.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard x:Name="FadeIn">
<DoubleAnimation
Storyboard.TargetProperty="Opacity"
To="1.0" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard x:Name="FadeOut">
<DoubleAnimation
Storyboard.TargetProperty="Opacity"
To="{Binding PanelOpacity}" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="SourceUpdated">
<BeginStoryboard>
<Storyboard x:Name="ChangeSelection">
<DoubleAnimation
Storyboard.TargetProperty="Opacity"
To="{Binding PanelOpacity}" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</WrapPanel.Triggers>
</WrapPanel>
</DataTemplate>
</ListView.ItemTemplate>
I've tried using a few different Routed Events and none of them seem to fire when a different wrap panel is clicked.
Last thing I tried was this:
<EventTrigger RoutedEvent="SourceUpdated">
<BeginStoryboard>
<Storyboard x:Name="ChangeSelection">
<DoubleAnimation
Storyboard.TargetProperty="Opacity"
To="{Binding PanelOpacity}" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
Edit: I've got this in my C#. It works fine currently, without animation:
_viewModel.MainPanel.ToList().Find(x => x.Server == (string)parameter).PanelOpacity = 1.0;
_viewModel.MainPanel.ToList().FindAll(x => x.Server != (string)parameter).ForEach(x => x.PanelOpacity = 0.5);
Second Edit: Added more tags to show location of code.
Final Edit: full ItemTemplate code added.
In my application I have the following XAML-Code to animate the SearchInputView a bit.
<Grid Grid.Row="1" HorizontalAlignment="Right" Grid.RowSpan="4" Panel.ZIndex="200" VerticalAlignment="Top"
Margin="0,-29,6,0">
<Grid.Resources>
<Duration x:Key="SearchAnimationDuration">0:0:0.4</Duration>
<system:Double x:Key="Hidden">0.0</system:Double>
<system:Double x:Key="Visible">1.0</system:Double>
<system:Double x:Key="Transparent">0.5</system:Double>
<Style TargetType="{x:Type view:SearchInputView}">
<Style.Triggers>
<Trigger Property="Visibility" Value="Visible">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" From="{StaticResource Hidden}" To="{StaticResource Visible}"
Duration="{StaticResource SearchAnimationDuration}"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" From="{StaticResource Transparent}" To="{StaticResource Visible}"
Duration="{StaticResource SearchAnimationDuration}"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" From="{StaticResource Visible}" To="{StaticResource Transparent}"
Duration="{StaticResource SearchAnimationDuration}"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
</Grid.Resources>
<view:SearchInputView Visibility="{Binding DataContext.SearchIsVisible, Mode=TwoWay, Converter={converter:BoolToVisibilityConverter}, RelativeSource={RelativeSource FindAncestor, AncestorType=UserControl}}"/>
</Grid>
The SearchInputView is located in right upper corner of my window. Now I want the control, if the mouse is not over, to fade out of the screen a bit so that only the half of the control is in the visible area. I tried it with the following DoubleAnimation in the ExitActions:
<DoubleAnimation Storyboard.TargetProperty="Margin.Left" To="50" Duration="0:0:0.4"/>
Now when the mouse leaves the control my application crashed immediately.
How can I move my control when the mouse leaves it?
Margin.Left is not DependencyProperty so you cannot animate only left. You can either use ThicknessAnimation to animate whole margin or use TranslateTransform as RenderTransform and animate that
<Style TargetType="{x:Type view:SearchInputView}">
<Setter Property="RenderTransform">
<Setter.Value>
<TranslateTransform X="0" Y="0"/>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" From="{StaticResource Transparent}" To="{StaticResource Visible}" Duration="{StaticResource SearchAnimationDuration}"/>
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.X" To="0" Duration="0:0:0.4"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" From="{StaticResource Visible}" To="{StaticResource Transparent}" Duration="{StaticResource SearchAnimationDuration}"/>
<DoubleAnimation Storyboard.TargetProperty="RenderTransform.X" To="50" Duration="0:0:0.4"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
Can anyone tell me what might be wrong with this template. the expander only animates when expanding, not collapsing.
<ControlTemplate x:Key="ExpanderExTemplate" TargetType="{x:Type Expander}" >
<StackPanel Margin="0">
<Border BorderThickness="1" >
<Expander Name="expanderEx" Header="{TemplateBinding Header}" IsExpanded="{TemplateBinding IsExpanded}" BorderThickness="0">
<Border BorderThickness="0" >
<ContentPresenter x:Name="ExpandSite" Margin="5,5,5,5" >
<ContentPresenter.LayoutTransform>
<ScaleTransform x:Name="scaleTransform" ScaleX="1" ScaleY="1" />
</ContentPresenter.LayoutTransform>
</ContentPresenter>
</Border>
<Expander.Triggers>
<EventTrigger RoutedEvent="Expander.Expanded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard >
<DoubleAnimation From="0" To="1" Duration="0:0:0.25"
Storyboard.TargetName="ExpandSite"
Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(ScaleTransform.ScaleY)" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Expander.Collapsed">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation From="1" To="0" Duration="0:0:0.25"
Storyboard.TargetName="ExpandSite"
Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(ScaleTransform.ScaleY)" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Expander.Triggers>
</Expander>
</Border>
</StackPanel>
</ControlTemplate>
Hi I have wpf xaml code as shown below
<Image Source="/MyProject;component/Resources/Icons/button_cancel_256.png"
DockPanel.Dock="Right"
Margin="0,1,10,1"
RenderTransformOrigin="0.5,0.5"
>
<Image.RenderTransform>
<ScaleTransform x:Name="ImageScaleTransform"
ScaleX="1" ScaleY="1"
/>
</Image.RenderTransform>
<Image.Effect>
<DropShadowEffect x:Name="ImageGlowEffect"
BlurRadius="20"
ShadowDepth="0"
Color="White">
</DropShadowEffect>
</Image.Effect>
<Image.Triggers>
<EventTrigger RoutedEvent="Image.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetName="ImageGlowEffect"
Storyboard.TargetProperty="Color"
From="White"
To="Red"
Duration="0:0:1">
</ColorAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Image.MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetName="ImageGlowEffect"
Storyboard.TargetProperty="Color"
From="Red"
To="White"
Duration="0:0:1">
</ColorAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Image.MouseLeftButtonDown">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="ImageScaleTransform"
Storyboard.TargetProperty="ScaleX"
From="1"
To=".9"
Duration="0:0:0.1">
</DoubleAnimation>
<DoubleAnimation
Storyboard.TargetName="ImageScaleTransform"
Storyboard.TargetProperty="ScaleY"
From="1"
To=".9"
Duration="0:0:0.1">
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Image.MouseLeftButtonUp">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="ImageScaleTransform"
Storyboard.TargetProperty="ScaleX"
From=".9"
To="1"
Duration="0:0:0.1">
</DoubleAnimation>
<DoubleAnimation
Storyboard.TargetName="ImageScaleTransform"
Storyboard.TargetProperty="ScaleY"
From=".9"
To="1"
Duration="0:0:0.1">
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Image.Triggers>
Now i want to create a style or template so that I can apply this to other images where i can specify the color.
Please help i have not been able to do it after various tries.
Adding to what EvAlex posted, you can dynamically change the colors specific to an Image then use DynamicResource and Opacity double animation (in place of ColorAnimation) as below...
<Style TargetType="{x:Type Image}"
x:Key="DropShadowImageStyle">
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform
ScaleX="1"
ScaleY="1" />
</Setter.Value>
</Setter>
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect
BlurRadius="20"
ShadowDepth="0"
Opacity="0"
Color="{DynamicResource MyToColor}">
</DropShadowEffect>
</Setter.Value>
</Setter>
<Style.Triggers>
<EventTrigger RoutedEvent="Image.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="Effect.Opacity"
From="0"
To="1"
Duration="0:0:1">
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Image.MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="Effect.Opacity"
From="1"
To="0"
Duration="0:0:1">
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Image.MouseLeftButtonDown">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="RenderTransform.ScaleX"
From="1"
To=".9"
Duration="0:0:0.1">
</DoubleAnimation>
<DoubleAnimation
Storyboard.TargetProperty="RenderTransform.ScaleY"
From="1"
To=".9"
Duration="0:0:0.1">
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Image.MouseLeftButtonUp">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="RenderTransform.ScaleX"
From=".9"
To="1"
Duration="0:0:0.1">
</DoubleAnimation>
<DoubleAnimation
Storyboard.TargetProperty="RenderTransform.ScaleY"
From=".9"
To="1"
Duration="0:0:0.1">
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
<StackPanel Orientation="Horizontal">
<Image Source="MyImage1.JPG"
Width="50" Height="50" Margin="5"
Style="{StaticResource DropShadowImageStyle}">
<Image.Resources>
<Color x:Key="MyToColor">Red</Color>
</Image.Resources>
</Image>
<Image Source="MyImage2.JPG"
Width="50" Height="50" Margin="5"
Style="{StaticResource DropShadowImageStyle}">
<Image.Resources>
<Color x:Key="MyToColor">Blue</Color>
</Image.Resources>
</Image>
<Image Source="MyImage3.JPG"
Width="50" Height="50" Margin="5"
Style="{StaticResource DropShadowImageStyle}">
<Image.Resources>
<Color x:Key="MyToColor">Orange</Color>
</Image.Resources>
</Image>
</StackPanel>
Here's the style - works well. The problem was with Storyboard.TargetName property. I just removed it and modified Storyboard.TargetProperty. That's why I asked you in a comment what was your problem. It would be much easier for me if you specified additional information from the beginning.
<Style TargetType="Image">
<Setter Property="Margin" Value="0,1,10,1"/>
<Setter Property="DockPanel.Dock" Value="Right"/>
<Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform ScaleX="1" ScaleY="1" />
</Setter.Value>
</Setter>
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect BlurRadius="20" ShadowDepth="0" Color="White"/>
</Setter.Value>
</Setter>
<Style.Triggers>
<EventTrigger RoutedEvent="Image.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetProperty="Effect.Color"
From="White"
To="Red"
Duration="0:0:1">
</ColorAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Image.MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetProperty="Effect.Color"
From="Red"
To="White"
Duration="0:0:1">
</ColorAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Image.MouseLeftButtonDown">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="RenderTransform.ScaleX"
From="1"
To=".9"
Duration="0:0:0.1">
</DoubleAnimation>
<DoubleAnimation
Storyboard.TargetProperty="RenderTransform.ScaleY"
From="1"
To=".9"
Duration="0:0:0.1">
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Image.MouseLeftButtonUp">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="RenderTransform.ScaleX"
From=".9"
To="1"
Duration="0:0:0.1">
</DoubleAnimation>
<DoubleAnimation
Storyboard.TargetProperty="RenderTransform.ScaleY"
From=".9"
To="1"
Duration="0:0:0.1">
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
I have a style for a ListViewItem control:
<EventTrigger RoutedEvent="ListViewItem.MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="BitmapEffect.Opacity"
From="0.0" To="1.0" Duration="0:0:0.5" AutoReverse="False" SpeedRatio="2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="ListViewItem.MouseLeave">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="BitmapEffect.Opacity"
From="1.0" To="0.0" Duration="0:0:0.5" AutoReverse="False" SpeedRatio="2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
I want to when mouse is over a ListViewItem, border of item appearing slowly and when mouse leave it, border effect disappear,
But i get this error when mouse goes to leave item:
Cannot resolve all property references in the property path 'BitmapEffect.Opacity'. Verify
that applicable objects support the properties.
Note that when i use only first EventTrigger which routed to ListViewItem.MouseEnter, program works correct! but it has not a good view!
I'm using OuterGlowBitmapEffect!
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="BitmapEffect">
<Setter.Value>
<OuterGlowBitmapEffect GlowColor="SkyBlue" GlowSize="20" />
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="Black" />
</Trigger>
I was trying with BitmapEffect, it is working fine as your above code.
<Style x:Key="ListBoxItemStyle1" TargetType="{x:Type ListBoxItem}">
<Setter Property="BitmapEffect">
<Setter.Value>
<OuterGlowBitmapEffect GlowColor="Blue" GlowSize="5" />
</Setter.Value>
</Setter>
<Style.Triggers>
<EventTrigger RoutedEvent="ListViewItem.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="BitmapEffect.Opacity"
From="0.0" To="1.0" Duration="0:0:0.5" AutoReverse="False" SpeedRatio="2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="ListViewItem.MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="BitmapEffect.Opacity"
From="1.0" To="0.0" Duration="0:0:0.5" AutoReverse="False" SpeedRatio="2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
Added Whole sample.
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Custom="http://schemas.microsoft.com/wpf/2008/toolkit"
xmlns:uc="clr-namespace:WpfApplication10"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
x:Class="WpfApplication10.Window1"
x:Name="Window"
Title="Window1" mc:Ignorable="d">
<Window.Resources>
<DataTemplate x:Key="ItemTemplate1">
<StackPanel>
<TextBlock Text="{Binding Property1}"/>
<Image Source="{Binding Property2}" HorizontalAlignment="Left" Height="64" Width="64"/>
</StackPanel>
</DataTemplate>
<Style x:Key="ListBoxItemStyle1" TargetType="{x:Type ListBoxItem}">
<Setter Property="BitmapEffect">
<Setter.Value>
<OuterGlowBitmapEffect GlowColor="Blue" GlowSize="5" />
</Setter.Value>
</Setter>
<Style.Triggers>
<EventTrigger RoutedEvent="ListViewItem.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="BitmapEffect.Opacity"
From="0.0" To="1.0" Duration="0:0:0.5" AutoReverse="False" SpeedRatio="2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="ListViewItem.MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="BitmapEffect.Opacity"
From="1.0" To="0.0" Duration="0:0:0.5" AutoReverse="False" SpeedRatio="2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid DataContext="{Binding Source={StaticResource SampleDataSource1}}">
<ListBox DataContext="{Binding Source={StaticResource SampleDataSource3}}"
ItemTemplate="{DynamicResource ItemTemplate1}" ItemsSource="{Binding Collection}"
ItemContainerStyle="{DynamicResource ListBoxItemStyle1}" >
</ListBox>
</Grid>