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>
Related
I have a button that has two triggers.
One is on IsMouseOver and the other one on mouseClick.
If I comment the IsMouseOver one out the other one works perfectly fine but if I use both then the mouseClick one is ignored.
This are my Triggers:
<ControlTemplate.Triggers>
<Trigger Property="local:MouseDownHelper.IsMouseLeftButtonDown"
Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="00:00:00.100"
Storyboard.TargetName="SendReportsButtonMainGrid"
Storyboard.TargetProperty="Background.Color"
To="{StaticResource ClickGray}" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="00:00:00.100"
Storyboard.TargetName="SendReportsButtonMainGrid"
Storyboard.TargetProperty="Background.Color"
To="{StaticResource HoverGray}" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<Trigger Property="IsMouseOver"
Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="00:00:00.400"
Storyboard.TargetName="SendReportsButtonMainGrid"
Storyboard.TargetProperty="Background.Color"
To="{StaticResource HoverGray}" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="00:00:00.800"
Storyboard.TargetName="SendReportsButtonMainGrid"
Storyboard.TargetProperty="Background.Color"
To="{StaticResource HeaderGray}" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
The MouseDownHelper is from there as said it works wihout the other trigger.
How can I have the OnHover effect and another one if the button is clicked?
EDIT:
You can also use IsPressed that doesn't work either.
I have found a solution using StopStoryboard.
I also added a second animation when clicking and I'm using onEnter and onLeave instead of onHover.
<ControlTemplate.Triggers>
<Trigger Property="local:MouseDownHelper.IsMouseLeftButtonDown"
Value="True">
<Trigger.EnterActions>
<StopStoryboard BeginStoryboardName="StoryboardEnter"/>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="00:00:00.000"
Storyboard.TargetName="SendReportsButtonMainGrid"
Storyboard.TargetProperty="Background.Color"
To="{StaticResource HoverGray}" />
<ColorAnimation Duration="00:00:00.100"
Storyboard.TargetName="SendReportsButtonMainGrid"
Storyboard.TargetProperty="Background.Color"
To="{StaticResource ClickGray}" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="00:00:00.100"
Storyboard.TargetName="SendReportsButtonMainGrid"
Storyboard.TargetProperty="Background.Color"
To="{StaticResource HoverGray}" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard Name="StoryboardEnter">
<Storyboard>
<ColorAnimation Duration="00:00:00.200"
Storyboard.TargetName="SendReportsButtonMainGrid"
Storyboard.TargetProperty="Background.Color"
To="{StaticResource HoverGray}" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="00:00:00.400"
Storyboard.TargetName="SendReportsButtonMainGrid"
Storyboard.TargetProperty="Background.Color"
To="{StaticResource HeaderGray}" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
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>
Hey all I am pretty new at creating a WPF in VS 2013. I am wanting this box to bounce & ease in/out.
The current code i have:
<BeginStoryboard x:Name="FadeInStoryBoard">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="ZWindow" From="0.01" To="0.85" Storyboard.TargetProperty="Opacity" Duration="0:0:0.8">
<DoubleAnimation.EasingFunction>
<ElasticEase Oscillations="5" Springiness="5" EasingMode="EaseInOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation Storyboard.TargetName="ZWindow" From="0.85" To="0" Storyboard.TargetProperty="Opacity" Duration="0:0:0.8" BeginTime="0:0:20" Name="boxFader">
<DoubleAnimation.EasingFunction>
<ElasticEase Oscillations="3" Springiness="5" EasingMode="EaseInOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
It currently looks very odd when showing due to it fading in/out. How can i take off the fading and just have it fade in when bouncing in/out?
Please try this,
<Rectangle Width="100"
Height="100"
VerticalAlignment="Bottom"
Fill="Red">
<Rectangle.RenderTransform>
<TranslateTransform />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)">
<EasingDoubleKeyFrame KeyTime="0:0:1"
Value="-200">
<EasingDoubleKeyFrame.EasingFunction>
<ElasticEase />
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
I like to use this ColorAnimationUsingKeyFrames
<Color x:Key="HighlightedColor">Yellow</Color>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00.0000000"
Duration="00:00:00.1000000"
Storyboard.TargetName="HighlightAnimatedColorBrush"
Storyboard.TargetProperty="Color"
FillBehavior="HoldEnd">
<ColorAnimationUsingKeyFrames.KeyFrames>
<LinearColorKeyFrame Value="{StaticResource HighlightedColor}" KeyTime="00:00:00.5000000"/>
</ColorAnimationUsingKeyFrames.KeyFrames>
</ColorAnimationUsingKeyFrames>
multiple times.
At the moment I had this workaround
<shapes:MirrorTile InnerXRadius="5.0"
InnerYRadius="5.0"
OuterXRadius="57.0"
OuterYRadius="57.0"
MirrorTileAngle="45.0"
Fill="Green"
StrokeThickness="2"
CentrePoint="181.0, 181.0">
<shapes:MirrorTile.Stroke>
<SolidColorBrush x:Name="HighlightAnimatedColorBrush" Color="{StaticResource DefaultColor}"/>
</shapes:MirrorTile.Stroke>
<shapes:MirrorTile.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00.0000000"
Duration="00:00:00.1000000"
Storyboard.TargetName="HighlightAnimatedColorBrush"
Storyboard.TargetProperty="Color"
FillBehavior="HoldEnd">
<ColorAnimationUsingKeyFrames.KeyFrames>
<LinearColorKeyFrame Value="{StaticResource HighlightedColor}" KeyTime="00:00:00.5000000"/>
</ColorAnimationUsingKeyFrames.KeyFrames>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</shapes:MirrorTile.Triggers>
</shapes:MirrorTile>
<shapes:MirrorTile InnerXRadius="5.0"
InnerYRadius="5.0"
OuterXRadius="57.0"
OuterYRadius="57.0"
MirrorTileAngle="45.0"
StrokeThickness="2"
Fill="Green"
CentrePoint="181.0, 181.0"
OffsetAngle="45.0">
<shapes:MirrorTile.Stroke>
<SolidColorBrush x:Name="HighlightAnimatedColorBrush2" Color="{StaticResource DefaultColor}"/>
</shapes:MirrorTile.Stroke>
<shapes:MirrorTile.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00.0000000"
Duration="00:00:00.1000000"
Storyboard.TargetName="HighlightAnimatedColorBrush2"
Storyboard.TargetProperty="Color"
FillBehavior="HoldEnd">
<ColorAnimationUsingKeyFrames.KeyFrames>
<LinearColorKeyFrame Value="{StaticResource HighlightedColor}" KeyTime="00:00:00.5000000"/>
</ColorAnimationUsingKeyFrames.KeyFrames>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</shapes:MirrorTile.Triggers>
</shapes:MirrorTile>
I like to move the animation into the resources and just want to bind it to any object (at the end there will be 40 MirrorTile's).
I'm not sure which ResourceDictionary you mean, but you should be able to write something like this. Note that there is no Storyboard.TargetName any more.
<!-- somewhere in Resources -->
<Storyboard x:Key="HighlightedColorStoryboard">
<ColorAnimationUsingKeyFrames Duration="0:0:0.1"
Storyboard.TargetProperty="Stroke.Color">
<ColorAnimationUsingKeyFrames.KeyFrames>
<LinearColorKeyFrame Value="{StaticResource HighlightedColor}"
KeyTime="0:0:0.5"/>
</ColorAnimationUsingKeyFrames.KeyFrames>
</ColorAnimationUsingKeyFrames>
</Storyboard>
and then use it like this (without binding):
<shapes:MirrorTile.Stroke>
<SolidColorBrush Color="{StaticResource DefaultColor}"/>
</shapes:MirrorTile.Stroke>
<shapes:MirrorTile.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard
Storyboard="{StaticResource HighlightedColorStoryboard}"/>
</EventTrigger>
...
</shapes:MirrorTile.Triggers>
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>