I have a WPF app that uses Buttons (surprise)
I have styled it so that when the User clicks on the button the background image is changed to a red color.
What I want to happen is that after a few seconds the background reverts back to its original background.
I am not sure how to do this.
This is my code so far:
<Style x:Key="RoundButtonTemplate" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border CornerRadius="5" Background="{TemplateBinding Background}"
BorderThickness="1">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center">
</ContentPresenter>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="true">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="{StaticResource RedButtonBackGround}"/>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Width" Value="74"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Height" Value="27"></Setter>
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="{StaticResource ButtonBackGround}"/>
</Setter.Value>
</Setter>
</Style>
here is a solution to how animate the background image based on DoubleAnimationUsingKeyFrames and opacity.
Update - 2 Button style code (put to your resource section)
<ImageBrush x:Key="KoalaImageBrushKey" ImageSource="Images/Koala.jpg"/>
<ImageBrush x:Key="RedButtonBackGround" ImageSource="Images/RedButtonBackGround.jpg"/>
<Style x:Key="RoundButtonTemplate" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Border x:Name="MyBorder" CornerRadius="5" Background="{TemplateBinding Background}" BorderThickness="1">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center">
</ContentPresenter>
</Border>
<Border x:Name="RectangleVisibleOnCklick" Opacity="0" CornerRadius="5" Background="{StaticResource RedButtonBackGround}" BorderThickness="1">
</Border>
</Grid>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="RectangleVisibleOnCklick"
Storyboard.TargetProperty="(FrameworkElement.Opacity)">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1" />
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.5" />
<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="0.25" />
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="0.0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="MyBorder"
Storyboard.TargetProperty="(FrameworkElement.Opacity)">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.25" />
<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="0.5" />
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="1.0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Width" Value="50"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Height" Value="50"></Setter>
<Setter Property="Background" Value="{StaticResource KoalaImageBrushKey}"/>
</Style>
First DoubleAnimationUsingKeyFrames section changes the RectangleVisibleOnCklick's opacity from 1 to 0. in 2 sec.
Second DoubleAnimationUsingKeyFrames section changes the MyBorder's opacity from 0 to 1. in 2 sec.
To make the animation to be faster change the KeyTime parameters of both DoubleAnimationUsingKeyFrames sections:
Options
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="RectangleVisibleOnCklick"
Storyboard.TargetProperty="(FrameworkElement.Opacity)">
<EasingDoubleKeyFrame KeyTime="0:0:0.25" Value="1" />
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.5" />
<EasingDoubleKeyFrame KeyTime="0:0:0.75" Value="0.25" />
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="MyBorder"
Storyboard.TargetProperty="(FrameworkElement.Opacity)">
<EasingDoubleKeyFrame KeyTime="0:0:0.25" Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.25" />
<EasingDoubleKeyFrame KeyTime="0:0:0.75" Value="0.5" />
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1.0" />
</DoubleAnimationUsingKeyFrames>
or
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="RectangleVisibleOnCklick"
Storyboard.TargetProperty="(FrameworkElement.Opacity)">
<EasingDoubleKeyFrame KeyTime="0:0:0" Value="1" />
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="MyBorder"
Storyboard.TargetProperty="(FrameworkElement.Opacity)">
<EasingDoubleKeyFrame KeyTime="0:0:0" Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1.0" />
</DoubleAnimationUsingKeyFrames>
Elliptic button with a Elliptic content
<ImageBrush x:Key="KoalaImageBrushKey" ImageSource="Images/Koala.jpg"/>
<ImageBrush x:Key="PinguinsImageBrushKey" ImageSource="Images/Penguins.jpg"/>
<Style x:Key="RoundButtonTemplate" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse x:Name="MyBorder" Fill="{TemplateBinding Background}"></Ellipse>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center">
<ContentPresenter.OpacityMask>
<VisualBrush Visual="{Binding ElementName=MyBorder}"></VisualBrush>
</ContentPresenter.OpacityMask>
</ContentPresenter>
<Ellipse x:Name="RectangleVisibleOnCklick" Fill="{StaticResource PinguinsImageBrushKey}" Opacity="0"></Ellipse>
</Grid>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="RectangleVisibleOnCklick"
Storyboard.TargetProperty="(FrameworkElement.Opacity)">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1" />
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.5" />
<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="0.25" />
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="0.0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Width" Value="50"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Height" Value="50"></Setter>
<Setter Property="Background" Value="{StaticResource KoalaImageBrushKey}"/>
</Style>
Rectangle button with elliptic content (is elliptic when clicked due to KeyFrames animation using)
<ImageBrush x:Key="KoalaImageBrushKey" ImageSource="Images/Koala.jpg"/>
<ImageBrush x:Key="PinguinsImageBrushKey" ImageSource="Images/Penguins.jpg"/>
<Style x:Key="RoundButtonTemplate" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Rectangle x:Name="MyBorder" Fill="{TemplateBinding Background}"></Rectangle>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center">
<ContentPresenter.OpacityMask>
<VisualBrush Visual="{Binding ElementName=MyBorder}"></VisualBrush>
</ContentPresenter.OpacityMask>
</ContentPresenter>
<Ellipse x:Name="RectangleVisibleOnCklick" Fill="{StaticResource PinguinsImageBrushKey}" Opacity="0"></Ellipse>
</Grid>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="RectangleVisibleOnCklick"
Storyboard.TargetProperty="(FrameworkElement.Opacity)">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1" />
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.5" />
<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="0.25" />
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="0.0" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="MyBorder"
Storyboard.TargetProperty="(FrameworkElement.Opacity)">
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0" />
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.25" />
<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="0.5" />
<EasingDoubleKeyFrame KeyTime="0:0:2" Value="1.0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Width" Value="50"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Height" Value="50"></Setter>
<Setter Property="Background" Value="{StaticResource KoalaImageBrushKey}"/>
</Style>
Regards.
<Style x:Key="AnimatedButton" TargetType="Button">
<Setter Property="Background" Value="Red" />
<Style.Triggers>
<Trigger Property="IsPressed" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard Storyboard.TargetProperty="Background.Color">
<ColorAnimation To="Blue" Duration="0:0:4" />
<ColorAnimation To="Red" BeginTime="0:1:52" Duration="0:0:4" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
Copied from here (by sa_ddam213)
Related
I have a two text box's one purely for animation and another to use. The animation works fine apart from when the text box is not focused i would like it to reverse the animation, which is possible if you use exit actions, but this then does not allow me to use the text box underneath as it sees that as an exit action. So i wondered if it was possible to only reverse the animation when the grid is pressed? or even exclude the other text box?
how can i achieve this? Here is my code.
<TextBlock Margin="250.449,182.112,374.044,0" Text="Hint Text" Foreground="{StaticResource brushWatermarkForeground}"
Visibility="{Binding ElementName=txtUserEntry, Path=Text.IsEmpty, Converter={StaticResource BooleanToVisibilityConverter}}" Height="19.725" VerticalAlignment="Top" />
<TextBox Name="txtUserEntry" Background="Transparent" BorderBrush="{x:Null}" Margin="250.449,182.112,352.952,0" Height="25.689" VerticalAlignment="Top" BorderThickness="0" />
<TextBox x:Name="textBox" Text="Floating Label Text" Height="25.689" VerticalAlignment="Top" Margin="250.449,182.112,352.952,0" Style="{DynamicResource TextBoxStyle1}" BorderThickness="1" Foreground="#FF8B8B8B" Background="White"/>
<Style x:Key="TextBoxStyle1" TargetType="{x:Type TextBox}">
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
<Setter Property="BorderBrush" Value="{StaticResource TextBox.Static.Border}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="FontFamily" Value="15"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="AllowDrop" Value="true"/>
<Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/>
<Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<ControlTemplate.Resources>
<Storyboard x:Key="Storyboard1">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="border">
<EasingColorKeyFrame KeyTime="0" Value="#FFABADB3"/>
<EasingColorKeyFrame KeyTime="0:0:0.6" Value="#FF018CFF"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="StoryboardTextAnimation">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="TextBox">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="-29.961"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="TextBox">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="-21.265"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="TextBox">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.715"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="TextBox">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.715"/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="TextBox">
<EasingColorKeyFrame KeyTime="0" Value="#FF8B8B8B"/>
<EasingColorKeyFrame KeyTime="0:0:0.3" Value="#FF00A2FF"/>
</ColorAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.FontWeight)" Storyboard.TargetName="TextBox">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<FontWeight>Normal</FontWeight>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:0.3">
<DiscreteObjectKeyFrame.Value>
<FontWeight>Bold</FontWeight>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="StoryboardTextAnimation_Copy1">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="TextBox">
<SplineDoubleKeyFrame KeyTime="0" Value="-29.961"/>
<SplineDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="TextBox">
<SplineDoubleKeyFrame KeyTime="0" Value="-21.265"/>
<SplineDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="TextBox">
<SplineDoubleKeyFrame KeyTime="0" Value="0.715"/>
<SplineDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="TextBox">
<SplineDoubleKeyFrame KeyTime="0" Value="0.715"/>
<SplineDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="TextBox">
<SplineColorKeyFrame KeyTime="0" Value="#FF00A2FF"/>
<SplineColorKeyFrame KeyTime="0:0:0.3" Value="#FF8B8B8B"/>
</ColorAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.FontWeight)" Storyboard.TargetName="TextBox">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<FontWeight>Bold</FontWeight>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="0:0:0.3">
<DiscreteObjectKeyFrame.Value>
<FontWeight>Normal</FontWeight>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<Border x:Name="border" SnapsToDevicePixels="True" BorderThickness="0,0,0,2" BorderBrush="#FFABADB3">
<ScrollViewer x:Name="TextBox" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" RenderTransformOrigin="0.5,0.5" Content="Floating Label Text" Background="White">
<ScrollViewer.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</ScrollViewer.RenderTransform>
</ScrollViewer>
</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.EnterActions>
<BeginStoryboard Storyboard="{StaticResource Storyboard1}" />
<BeginStoryboard Storyboard="{StaticResource StoryboardTextAnimation}" />
</Trigger.EnterActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsInactiveSelectionHighlightEnabled" Value="true"/>
<Condition Property="IsSelectionActive" Value="false"/>
</MultiTrigger.Conditions>
<Setter Property="SelectionBrush" Value="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightBrushKey}}"/>
</MultiTrigger>
</Style.Triggers>
</Style>
<SolidColorBrush x:Key="brushWatermarkForeground" Color="LightGray" />
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
<local:TextInputToVisibilityConverter x:Key="TextInputToVisibilityConverter" />
<SolidColorBrush x:Key="TextBox.MouseOver.Border2" Color="#FF7EB4EA"/>
<Style x:Key="TextBoxStyleNew" TargetType="{x:Type TextBox}">
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
<Setter Property="BorderBrush" Value="{StaticResource TextBox.Static.Border}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="AllowDrop" Value="true"/>
<Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/>
<Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<ControlTemplate.Resources>
<Storyboard x:Key="StoryboardAnimateText"/>
</ControlTemplate.Resources>
<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True" BorderThickness="0,0,0,2" Margin="0,-5,0,0">
<ScrollViewer x:Name="PART_ContentHost" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>
</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.Border2}"/>
<Setter Property="BorderThickness" TargetName="border" Value="0"/>
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.Focus.Border}"/>
<Setter Property="BorderThickness" TargetName="border" Value="0"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsInactiveSelectionHighlightEnabled" Value="true"/>
<Condition Property="IsSelectionActive" Value="false"/>
</MultiTrigger.Conditions>
<Setter Property="SelectionBrush" Value="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightBrushKey}}"/>
</MultiTrigger>
</Style.Triggers>
</Style>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void MainWindow_MouseDown(object sender, MouseButtonEventArgs e)
{
grid1.Focus();
}
}
public class TextInputToVisibilityConverter : IMultiValueConverter
{
public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
// Always test MultiValueConverter inputs for non-null
// (to avoid crash bugs for views in the designer)
if (values[0] is bool && values[1] is bool)
{
bool hasText = !(bool)values[0];
bool hasFocus = (bool)values[1];
if (hasFocus || hasText)
return Visibility.Collapsed;
}
return Visibility.Visible;
}
public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
} }
Wrap both TextBoxes in a container (a Grid will suffice):
<Grid x:Name="TextBoxes">
<TextBox Name="txtUserEntry" Background="Transparent" BorderBrush="{x:Null}" Margin="250.449,182.112,352.952,0" Height="25.689" VerticalAlignment="Top" BorderThickness="0" />
<TextBox x:Name="textBox" Text="Floating Label Text" Height="25.689" VerticalAlignment="Top" Margin="250.449,182.112,352.952,0" Style="{DynamicResource TextBoxStyle1}" BorderThickness="1" Foreground="#FF8B8B8B" Background="White"/>
</Grid>
That way you can use the IsKeyboardFocusWithin property of the containing Grid, which would be True no matter which one of your TextBoxes is focused.
In order to change as less as possible of your existing code, you could simply change your Trigger and make it a DataTrigger, and bind it to the IsKeyboardFocusWithin property of the Grid ancestor.
<Trigger Property="IsKeyboardFocused" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.Focus.Border}"/>
</Trigger>
<DataTrigger Binding="{Binding IsKeyboardFocusWithin, RelativeSource={RelativeSource AncestorType={x:Type Grid}}"
Value="True">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource Storyboard1}" />
<BeginStoryboard Storyboard="{StaticResource StoryboardTextAnimation}" />
</Trigger.EnterActions>
</DataTrigger>
Add the ExitActions that you need, and they should only execute when both TextBoxes are not focused.
I'm styling a listbox to have some effects like MouseLeave and UnSelect fadeout.
It works when no item selected. But once some items are selected one by one, effects not working for them anymore! even if they're not selected.
Ideal behavior is when, items behave constantly in response to events and property changes.
I want to have List Box items that respond to MouseOver and MouseLeave events when they're not selected, and respond to Unselect property change.
Resourse Dictionary:
<ResourceDictionary>
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Color x:Key="DisabledControlLightColor-LS1">#FFE8EDF9</Color>
<Color x:Key="SelectedBackgroundColor-LS1">#FFC5CBF9</Color>
<Color x:Key="MouseOverBackgroundColor-LS1">#FFE5E9F7</Color>
<Color x:Key="SelectedUnfocusedColor-LS1">#FFDDDDDD</Color>
<Color x:Key="UnSelectedBackgroundColor-LS1">#00C5CBF9</Color>
<Color x:Key="ControlLightColor-LS1">White</Color>
<Color x:Key="ControlMediumColor-LS1">#FF7381F9</Color>
<Color x:Key="BorderMediumColor-LS1">#FF888888</Color>
<Color x:Key="DisabledBorderLightColor-LS1">#FFAAAAAA</Color>
<SolidColorBrush x:Key="ListBorder" Color="#828790"/>
<Style x:Key="LS1-MS" TargetType="ListBox">
<Setter Property="ItemContainerStyle" Value="{DynamicResource LSItem-LS1}"/>
<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="MinWidth" Value="120" />
<Setter Property="MinHeight" Value="95" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBox">
<Border Name="Border" BorderThickness="1" CornerRadius="2">
<Border.Background>
<SolidColorBrush Color="{StaticResource ControlLightColor-LS1}" />
</Border.Background>
<Border.BorderBrush>
<SolidColorBrush Color="{StaticResource BorderMediumColor-LS1}" />
</Border.BorderBrush>
<ScrollViewer Margin="0" Focusable="false">
<StackPanel Margin="2" IsItemsHost="True" />
</ScrollViewer>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="Border" Property="Background">
<Setter.Value>
<SolidColorBrush Color="{StaticResource DisabledControlLightColor-LS1}" />
</Setter.Value>
</Setter>
<Setter TargetName="Border" Property="BorderBrush">
<Setter.Value>
<SolidColorBrush Color="{DynamicResource DisabledBorderLightColor-LS1}" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="LSItem-LS1" TargetType="ListBoxItem">
<Setter Property="SnapsToDevicePixels"
Value="true" />
<Setter Property="OverridesDefaultStyle"
Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<ControlTemplate.Resources>
<Storyboard x:Key="MouseEnterBC">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource MouseOverBackgroundColor-LS1}"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource UnSelectedBackgroundColor-LS1}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="MouseLeaveFadeOut">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0:0:0.3" Value="{StaticResource UnSelectedBackgroundColor-LS1}"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0:0:0.3" Value="{StaticResource UnSelectedBackgroundColor-LS1}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="SelectBC">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource SelectedBackgroundColor-LS1}"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource UnSelectedBackgroundColor-LS1}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="unSelectBcFadeOut">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0:0:0.3" Value="{StaticResource UnSelectedBackgroundColor-LS1}"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0:0:0.3" Value="{StaticResource UnSelectedBackgroundColor-LS1}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<Border x:Name="Border" Padding="1" SnapsToDevicePixels="true" BorderThickness="1">
<Border.Background>
<SolidColorBrush Color="{DynamicResource UnSelectedBackgroundColor-LS1}"/>
</Border.Background>
<Border.BorderBrush>
<SolidColorBrush Color="{DynamicResource UnSelectedBackgroundColor-LS1}"/>
</Border.BorderBrush>
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.ExitActions>
<BeginStoryboard x:Name="MouseLeaveFadeOut_BeginStoryboard3" Storyboard="{StaticResource MouseLeaveFadeOut}"/>
</Trigger.ExitActions>
<Trigger.EnterActions>
<BeginStoryboard x:Name="MouseLeaveFadeOut_BeginStoryboard" Storyboard="{StaticResource MouseEnterBC}"/>
</Trigger.EnterActions>
</Trigger>
<EventTrigger RoutedEvent="Selector.Selected">
<BeginStoryboard x:Name="SelectBC_BeginStoryboard2" Storyboard="{StaticResource SelectBC}"/>
</EventTrigger>
<EventTrigger RoutedEvent="Selector.Unselected">
<BeginStoryboard x:Name="MouseLeaveFadeOut_BeginStoryboard1" Storyboard="{StaticResource MouseLeaveFadeOut}"/>
<StopStoryboard BeginStoryboardName="SelectBC_BeginStoryboard2"/>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
MainWindow.Xaml
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<ListBox Style="{DynamicResource LS1-MS}" Margin="42,10,72,10">
<ListBoxItem FlowDirection="RightToLeft" Content="Test List Box Items"/>
<ListBoxItem Content="Test List Box Items"/>
<ListBoxItem FlowDirection="RightToLeft" Content="Test List Box Items"/>
<ListBoxItem FlowDirection="RightToLeft" Content="Test List Box Items"/>
<ListBoxItem FlowDirection="RightToLeft" Content="Test List Box Items"/>
<ListBoxItem FlowDirection="RightToLeft" Content="Test List Box Items"/>
<ListBoxItem Content="Test List Box Items"/>
<ListBoxItem Content="Test List Box Items"/>
<ListBoxItem Content="Test List Box Items"/>
</ListBox>
</Grid>
You are never stopping the storyboards, so eventually they are all running.I have added file FillBehavior="Stop" in storyboard.You can set the FillBehavior of the Storyboards to Stop so that the Storyboard will stop setting the value after it completes.
<Style x:Key="LSItem-LS1" TargetType="ListBoxItem">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<ControlTemplate.Resources>
<Storyboard x:Key="MouseEnterBC">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource MouseOverBackgroundColor-LS1}"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource UnSelectedBackgroundColor-LS1}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="MouseLeaveFadeOut" FillBehavior="Stop">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0:0:0.3" Value="{StaticResource UnSelectedBackgroundColor-LS1}"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0:0:0.3" Value="{StaticResource UnSelectedBackgroundColor-LS1}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="SelectBC">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource SelectedBackgroundColor-LS1}"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource UnSelectedBackgroundColor-LS1}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="unSelectBcFadeOut" FillBehavior="Stop">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0:0:0.3" Value="{StaticResource UnSelectedBackgroundColor-LS1}"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0:0:0.3" Value="{StaticResource UnSelectedBackgroundColor-LS1}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<Border x:Name="Border" Padding="1" SnapsToDevicePixels="true" BorderThickness="1">
<Border.Background>
<SolidColorBrush Color="{DynamicResource UnSelectedBackgroundColor-LS1}"/>
</Border.Background>
<Border.BorderBrush>
<SolidColorBrush Color="{DynamicResource UnSelectedBackgroundColor-LS1}"/>
</Border.BorderBrush>
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True" />
<Condition Property="IsSelected" Value="False" />
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard x:Name="MouseLeaveFadeOut_BeginStoryboard" Storyboard="{StaticResource MouseEnterBC}"/>
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<BeginStoryboard x:Name="MouseLeaveFadeOut_BeginStoryboard3" Storyboard="{StaticResource MouseLeaveFadeOut}"/>
</MultiTrigger.ExitActions>
</MultiTrigger>
<Trigger Property="IsSelected" Value="True">
<Trigger.EnterActions>
<BeginStoryboard x:Name="SelectBC_BeginStoryboard2" Storyboard="{StaticResource SelectBC}"/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource MouseLeaveFadeOut}"></BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I want to make my button (I define a ControlTemplate for a Button) to trigger my animation when mouse-up (clicked on the button and and left the mouse button). That's because Button doesn't have VisualState like MouseUp but only Pressed when it comes to clicking.
I want my animation to be executed without me holding the button, I just want to click and release.
Here is my code (you can see that I put but it didn't make any impact:
<Window.Resources>
<Style x:Key="ButtonStyle1" TargetType="Button">
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Stretch" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border x:Name="BorderOfTemplate" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" RenderTransformOrigin=".5,.5">
<Border.Triggers>
<EventTrigger RoutedEvent="Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="AnimatedScaleTransform" Storyboard.TargetProperty="ScaleX" Duration="0:0:3" RepeatBehavior="1x">
<LinearDoubleKeyFrame KeyTime="0:0:3" Value=".1" />
<SplineDoubleKeyFrame Value="1" KeyTime="0:0:3" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="AnimatedScaleTransform" Storyboard.TargetProperty="ScaleY" Duration="0:0:3" RepeatBehavior="1x">
<LinearDoubleKeyFrame KeyTime="0:0:3" Value=".1" />
<SplineDoubleKeyFrame Value="1" KeyTime="0:0:3" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="AnimatedTranslateTransform" Storyboard.TargetProperty="Y" Duration="0:0:3" RepeatBehavior="1x">
<LinearDoubleKeyFrame Value="-170" KeyTime="0:0:2" />
<SplineDoubleKeyFrame Value="1" KeyTime="0:0:3" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Border.Triggers>
<Border.RenderTransform>
<TransformGroup>
<RotateTransform x:Name="AnimatedRotateTransform" />
<ScaleTransform x:Name="AnimatedScaleTransform" />
<TranslateTransform x:Name="AnimatedTranslateTransform" />
</TransformGroup>
</Border.RenderTransform>
<here some VisualStateManager>
</here some VisualStateManager>
enter code here
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
Thanks!
According to this article, Silverlight's ordinary EventTrigger only supports the Loaded event.
However, using the EventTrigger from System.Windows.Interactivity, it seems you can use other events, for example Click or MouseLeftButtonUp. See this article for an example: codeproject.com
I need help with an custom "Image-Button" that i have used for a while. It works great, but i can't figure out how to animate the button with these three states (normal, mouseover, pressed):
Normal to MouseOver
MouseOver to Pressed
Im not that skilled with XAML so I couldn't figure it out. Anyway here's the code i've been using:
<Button Height="40" HorizontalAlignment="Left" IsEnabled="True" IsHitTestVisible="True" Margin="262,219,0,0" Name="home_btn" VerticalAlignment="Top" Width="89">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Image Name="Normal" Source="normal.png" />
<Image Name="Hover" Source="hover.png" Visibility="Hidden" />
<Image Name="Pressed" Source="pressed.png" Visibility="Hidden" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="ButtonBase.IsPressed" Value="True">
<Setter Property="UIElement.Visibility" TargetName="Normal" Value="Hidden" />
<Setter Property="UIElement.Visibility" TargetName="Pressed" Value="Visible" />
</Trigger>
<Trigger Property="UIElement.IsMouseOver" Value="True">
<Setter Property="UIElement.Visibility" TargetName="Normal" Value="Hidden" />
<Setter Property="UIElement.Visibility" TargetName="Hover" Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
Any answer is appreciated.
An other way to accomplish animation is to use triggers like you did in combination with Storyboards
Here is some sample code (integrated in your posted code):
<Button Height="40" HorizontalAlignment="Left" IsEnabled="True" IsHitTestVisible="True" Margin="262,219,0,0" Name="home_btn" VerticalAlignment="Top" Width="89">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Image Name="Normal" Source="normal.png" />
<Image Name="Hover" Source="hover.png" Opacity="0"/>
<Image Name="Pressed" Source="pressed.png" Opacity="0" />
</Grid>
<ControlTemplate.Resources>
<Storyboard x:Key="MouseDownTimeLine">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Pressed" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="00:00:00.05" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="MouseUpTimeLine">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Pressed" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="MouseEnterTimeLine">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Hover" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="MouseExitTimeLine">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Hover" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<ControlTemplate.Triggers>
<Trigger Property="ButtonBase.IsPressed" Value="True">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource MouseDownTimeLine}"/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource MouseUpTimeLine}"/>
</Trigger.ExitActions>
</Trigger>
<Trigger Property="UIElement.IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource MouseEnterTimeLine}"/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource MouseExitTimeLine}"/>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
You should probably use the VisualStateManager for that sort of thing, see its documentation for a usage example.
I have a WPF project with a border using the following style. The plan is to get the glow effect to fade in when the mouse moves over the border, and fade out when it leaves.
<Style x:Key="BorderGlow" TargetType="Border">
<Style.Resources>
<Storyboard x:Key="GlowOn">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(DropShadowEffect.Opacity)">
<SplineDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="GlowOff">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(DropShadowEffect.Opacity)">
<SplineDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Style.Resources>
<Setter Property="CornerRadius" Value="6,1,6,1" />
<Setter Property="BorderBrush" Value="{StaticResource SelectedBorder}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Background" Value="{StaticResource DeselectedBackground}" />
<Setter Property="RenderTransformOrigin" Value="0.5,0.5" />
<Setter Property="TextBlock.Foreground" Value="{StaticResource SelectedForeground}" />
<Setter Property="RenderTransform">
<Setter.Value>
<RotateTransform Angle="90"/>
</Setter.Value>
</Setter>
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect ShadowDepth="0" BlurRadius="8" Color="#FFB0E9EF"/>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource GlowOn}"/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource GlowOff}"/>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
The problem is, nothing happens! The animation works if I change the "DropShadowEffect" to "UIElement" in the Storyboard TargetProperty, but this fades the entire control.
How do I fade just the DropShadowEffect?
A couple of points to note
1) You need to be targeting an actual property of Border - You are in effect trying to target the value (DropShadowEffect) of the Effect property, not the property itself.
2) You need to sort the syntax of the PropertyPath.
Change your Storyboard.Target property to the following and you should be fine:
Storyboard.TargetProperty="(Effect).Opacity"
EDIT Working code as noted in comment:
<Border BorderThickness="10" Height="100" Width="100">
<Border.BorderBrush>
<SolidColorBrush Color="Red"></SolidColorBrush>
</Border.BorderBrush>
<Border.Style>
<Style TargetType="Border">
<Style.Resources>
<Storyboard x:Key="GlowOn">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetProperty="(Effect).Opacity">
<SplineDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="GlowOff">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetProperty="(Effect).Opacity">
<SplineDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Style.Resources>
<Setter Property="CornerRadius" Value="6,1,6,1" />
<!--<Setter Property="BorderBrush"
Value="{StaticResource SelectedBorder}" />-->
<Setter Property="BorderThickness" Value="1" />
<!--<Setter Property="Background"
Value="{StaticResource DeselectedBackground}" />-->
<Setter Property="RenderTransformOrigin" Value="0.5,0.5" />
<!--<Setter Property="TextBlock.Foreground"
Value="{StaticResource SelectedForeground}" />-->
<Setter Property="RenderTransform">
<Setter.Value>
<RotateTransform Angle="90"/>
</Setter.Value>
</Setter>
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect ShadowDepth="20"
BlurRadius="8"
Color="#FFB0E9EF"/>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard
Storyboard="{StaticResource GlowOn}"/>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard
Storyboard="{StaticResource GlowOff}"/>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>
This is a followup to Simon's answer where I have a ListView where the Template item of the ListViewItem had a DropShadow on a Grid. Long story short, because one is overriding the ListViewItem, the selected item and the hover no longer work. To get those to work I had to modify the Opacity and there are two ways to access the Effect depending on where one is; which I show below...here are Full example of the two snippets:
Set during Selection
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Cursor" Value="Hand"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="true" />
<Condition Property="Selector.IsSelectionActive" Value="true" />
</MultiTrigger.Conditions>
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect Opacity="1"/>
</Setter.Value>
</Setter>
</MultiTrigger>
</Style.Triggers>
Set for Grid.Triggers
<Grid Background="GhostWhite">
<Grid.Effect>
<DropShadowEffect Opacity="0" />
</Grid.Effect>
<GridViewRowPresenter Content="{TemplateBinding Content}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
<Grid.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames
BeginTime="00:00:00"
Storyboard.TargetProperty="(Effect).Opacity">
<SplineDoubleKeyFrame KeyTime="0:0:0.1" Value=".2"/>
<SplineDoubleKeyFrame KeyTime="0:0:0.4" Value=".6"/>
<SplineDoubleKeyFrame KeyTime="0:0:0.6" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>