I'm animating text in StatusBarItem (from right to left and then Opacity two times).
When this animation finishes It would like to show a button which is in a different StatusBarItem and is set to Visibility.Hidden by default.
How can I do this in XAML?
My XAML - error is "A storyboard tree in a Style cannot specify a TargetName":
<StatusBarItem x:Name="Stat_info" DockPanel.Dock="Right" FontStyle="Italic" Height="23" Foreground="#FFB41414" FontWeight="Bold" Visibility="Hidden">
<StatusBarItem.Style>
<Style TargetType="{x:Type StatusBarItem}">
<Style.Resources>
<Storyboard x:Key="flashAnimate">
<StringAnimationUsingKeyFrames Storyboard.TargetProperty="Content" >
<DiscreteStringKeyFrame Value="T" KeyTime="0:0:0.3" />
<DiscreteStringKeyFrame Value="Te" KeyTime="0:0:0.6" />
<DiscreteStringKeyFrame Value="Tes" KeyTime="0:0:0.9" />
<DiscreteStringKeyFrame Value="Test" KeyTime="0:0:1.2" />
</StringAnimationUsingKeyFrames>
<DoubleAnimation Storyboard.TargetProperty="Opacity" From="1" To="0" AutoReverse="True" BeginTime="0:0:1.4" Duration="0:0:2.0" RepeatBehavior="0:0:5.4" />
<!--This is a button that should be set to visible-->
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Btn_info" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:5.5" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</Style.Resources>
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName= Stat_info, Path= IsVisible}" Value="True">
<Setter Property="Visibility" Value="Visible" />
<DataTrigger.EnterActions>
<BeginStoryboard Name="flash" Storyboard="{StaticResource flashAnimate}" />
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<StopStoryboard BeginStoryboardName="flash"/>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
</StatusBarItem.Style>
</StatusBarItem>
EDIT:
I've tried provided answer from link, but I can't get It to work. I tried with & without TargetName and just for first animation. Result is no error & no animation :
<Window.Resources>
<ControlTemplate x:Key="StatusBarItemControlTemplate1" TargetType="{x:Type StatusBarItem}">
<ControlTemplate.Resources>
<Storyboard x:Key="myAnimation" Storyboard.TargetName="Stat_info">
<StringAnimationUsingKeyFrames Storyboard.TargetProperty="Content" >
<DiscreteStringKeyFrame Value="T" KeyTime="0:0:0.3" />
<DiscreteStringKeyFrame Value="Te" KeyTime="0:0:0.6" />
<DiscreteStringKeyFrame Value="Tes" KeyTime="0:0:0.9" />
<DiscreteStringKeyFrame Value="Test" KeyTime="0:0:1.2" />
</StringAnimationUsingKeyFrames>
<DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Stat_info" From="1" To="0" AutoReverse="True" BeginTime="0:0:1.4" Duration="0:0:2.0" RepeatBehavior="0:0:5.4" />
</Storyboard>
</ControlTemplate.Resources>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding ElementName= Stat_info, Path= IsVisible}" Value="True">
<Setter Property="Visibility" Value="Visible" />
<DataTrigger.EnterActions>
<BeginStoryboard x:Name="beginAnimation" Storyboard="{StaticResource myAnimation}" />
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<StopStoryboard BeginStoryboardName="beginAnimation" />
</DataTrigger.ExitActions>
</DataTrigger>
</ControlTemplate.Triggers>
<!-- Content to be animated goes here -->
</ControlTemplate>
</Window.Resources>
<StatusBarItem x:Name="Stat_info" Visibility="Hidden" Template="{StaticResource StatusBarItemControlTemplate1}" >
Related
I'm trying to create a hover and select effect on a radio button within a group So far it works but if I hover on a button that has once been selected the hover effect doesn't work> Hovering on a button that hasn't previously been selected works and also the isChecked state seems to work. Also how do I deselect a radio button on click so that no button is selected within the group. Thanks for any help or pointers.
<Color x:Key="Hover" R="135" G="0" B="0" A="255" />
<Color x:Key="Default" R="40" G="40" B="40" A="255" />
<Color x:Key="Selected" R="0" G="255" B="0" A="255" />
<!-- // CustomRadioButton // -->
<Style TargetType="{x:Type RadioButton}" x:Key="CustomRadioButton">
<Style.Setters>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<Border x:Name="tabRadBtn" Margin="10"
Width="60" BorderThickness="0">
<TextBlock Background="Transparent" x:Name="ToggleData"
Text="{TemplateBinding Property=Content}"
HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock.Foreground>
<SolidColorBrush x:Name="ToggleColor" Color="{StaticResource Default}"/>
</TextBlock.Foreground>
</TextBlock>
</Border>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsEnabled" Value="True"/>
<Condition Property="IsChecked" Value="False"/>
<Condition Property="IsMouseOver" Value="True"/>
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard>
<Storyboard x:Name="EnterRadioButtonHover">
<ColorAnimation Storyboard.TargetName="ToggleColor"
Storyboard.TargetProperty="Color"
To="{StaticResource Hover}" Duration="0:0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<BeginStoryboard>
<Storyboard x:Name="ExitRadioButtonHover">
<ColorAnimation Storyboard.TargetName="ToggleColor"
Storyboard.TargetProperty="Color"
To="{StaticResource Default}" Duration="0:0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</MultiTrigger.ExitActions>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsChecked" Value="True"/>
<Condition Property="IsEnabled" Value="True"/>
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard>
<Storyboard x:Name="EnterRadioButtonSelect">
<ColorAnimation Storyboard.TargetName="ToggleColor"
Storyboard.TargetProperty="Color"
To="{StaticResource Selected}" Duration="0:0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<BeginStoryboard>
<Storyboard x:Name="ExitRadioButtonSelect">
<ColorAnimation Storyboard.TargetName="ToggleColor"
Storyboard.TargetProperty="Color"
To="{StaticResource Default}" Duration="0:0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</MultiTrigger.ExitActions>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
Set ExitActions ColorAnimation Property - FillBehavior="Stop" -
<MultiTrigger.ExitActions>
<BeginStoryboard>
<Storyboard x:Name="ExitRadioButtonHover">
<ColorAnimation Storyboard.TargetName="ToggleColor"
Storyboard.TargetProperty="Color"
To="{StaticResource Default}" Duration="0:0:0:0.2" FillBehavior="Stop"/>
</Storyboard>
</BeginStoryboard>
</MultiTrigger.ExitActions>
...
<MultiTrigger.ExitActions>
<BeginStoryboard>
<Storyboard x:Name="ExitRadioButtonSelect">
<ColorAnimation Storyboard.TargetName="ToggleColor"
Storyboard.TargetProperty="Color"
To="{StaticResource Default}" Duration="0:0:0:0.2" FillBehavior="Stop"/>
</Storyboard>
</BeginStoryboard>
</MultiTrigger.ExitActions>
I need define simple animation in the XAML (without code behind), that must rotate the background image of button by changing the bounded boolean property. I have a button in the XAML:
<Button Style="{StaticResource btnStyle}" />
In the Resources section of the Window I create following:
<RotateTransform Angle="180" x:Key="rotAt180" />
<Style TargetType="Button" x:Key="btnStyle">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Image Source="Images\pic.png" />
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding MyBoolProp}" Value="False">
<Setter Property="RenderTransform" Value="{StaticResource rotAt180}" />
<!-- This animation works good -->
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation From="0" To="180" Duration="0:0:0.2" Storyboard.TargetProperty="RenderTransform.Angle" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<!-- This animation causes exception -->
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation From="180" To="0" Duration="0:0:0.2" Storyboard.TargetProperty="RenderTransform.Angle" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
MyBoolProp is initialized by True.
The first animation is works perfect. But the second animation causes System.InvalidOperationException in PresentationFramework.dll ("Unable to resolve all property references in the "RenderTransform.Angle" property path. Check that the corresponding objects support such properties").
I tried to move the second animation into the trigger, where MyBoolProp is True:
<DataTrigger Binding="{Binding MyBoolProp}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation From="180" To="0" Duration="0:0:0.2" Storyboard.TargetProperty="RenderTransform.Angle" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
But the result is the same. What is wrong in such realization?
The RenderTransform must be set in the Style, not in the DataTrigger:
<Style TargetType="Button" x:Key="btnStyle">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Image Source="Images\pic.png" />
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="RenderTransform" Value="{StaticResource rotAt180}"/>
<Setter Property="RenderTransformOrigin" Value="0.5,0.5" />
<Style.Triggers>
<DataTrigger Binding="{Binding MyBoolProp}" Value="False">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation To="0" Duration="0:0:0.2"
Storyboard.TargetProperty="RenderTransform.Angle" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation To="180" Duration="0:0:0.2"
Storyboard.TargetProperty="RenderTransform.Angle" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
I have custom template for ToggleButton with triggers targeted for providing clear visual difference between Checked and Unchecked state.
Main concept:
Trigger 1. When Togglebuton is Unchecked and MouseOver = false: FontSize should be 13, FontWeight - Normal.
Trigger 2. When Togglebuton is Unchecked and MouseOver = true: FontSize should be 14, FontWeight - Normal.
Trigger 3. When Togglebuton is Checked: FontSize should be 15, FontWeight - Bold.
Everything is working fine, but after first toggleButton check/uncheck sequence
trigger 2 stops to fire and ToggleButton does not change appearence on MouseOver = true any more.
Here is my actual XAML.
<Style TargetType="{x:Type ToggleButton}" x:Key="DefaultToggleButtonStyle">
<Style.Resources>
<Style x:Key="ButtonFocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="2"
SnapsToDevicePixels="true"
Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"
StrokeThickness="1"
StrokeDashArray="1 2" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Style.Resources>
<Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}" />
<Setter Property="Background" Value="{DynamicResource ButtonColor}" />
<Setter Property="Foreground" Value="{DynamicResource EditAreaColor}" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Padding" Value="1" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="UseLayoutRounding" Value="True" />
<Setter Property="FontSize" Value="13" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<ControlTemplate.Resources>
<Style TargetType="Border" x:Key="MainBorderStyle">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="CornerRadius" Value="1" />
<Setter Property="UseLayoutRounding" Value="True" />
</Style>
</ControlTemplate.Resources>
<Grid>
<Border Background="Black" Opacity="0.5">
<Border.Effect>
<BlurEffect Radius="7" />
</Border.Effect>
</Border>
<Border x:Name="upperSurfaceBorder" Background="{TemplateBinding Background}" Style="{StaticResource MainBorderStyle}">
<Border x:Name="mouserOverHl" Background="Transparent"
Style="{StaticResource MainBorderStyle}"
BorderThickness="0.5" BorderBrush="{StaticResource MainNormal}">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
RecognizesAccessKey="True"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Border>
</Border>
<Border Background="Transparent" Style="{StaticResource MainBorderStyle}" x:Name="disabledOverlay" />
</Grid>
<ControlTemplate.Triggers>
<!--MouseOver-->
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True"/>
<Condition Property="IsChecked" Value="False"/>
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard>
<Storyboard TargetProperty="FontSize">
<DoubleAnimation To="14" Duration="0:0:.3">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<BeginStoryboard>
<Storyboard TargetProperty="FontSize">
<DoubleAnimation To="13" Duration="0:0:.3">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</MultiTrigger.ExitActions>
</MultiTrigger>
<!--IsChecked-->
<Trigger Property="ToggleButton.IsChecked" Value="true">
<Trigger.Setters>
<Setter Property="Background" Value="{StaticResource MainVeryDark}"/>
</Trigger.Setters>
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="FontWeight">
<DiscreteObjectKeyFrame KeyTime="0:0:0">
<DiscreteObjectKeyFrame.Value>
<FontWeight>Bold</FontWeight>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
<BeginStoryboard>
<Storyboard TargetProperty="(ToggleButton.Background).(SolidColorBrush.Color)">
<ColorAnimation Duration="0:0:0.1" To="#002f67">
<ColorAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut" />
</ColorAnimation.EasingFunction>
</ColorAnimation>
</Storyboard>
</BeginStoryboard>
<BeginStoryboard>
<Storyboard TargetProperty="FontSize">
<DoubleAnimation To="15" Duration="0:0:0">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="FontWeight">
<DiscreteObjectKeyFrame KeyTime="0:0:0">
<DiscreteObjectKeyFrame.Value>
<FontWeight>Normal</FontWeight>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
<BeginStoryboard>
<Storyboard TargetProperty="FontSize">
<DoubleAnimation To="13" Duration="0:0:0">
<DoubleAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<!--Pressed-->
<Trigger Property="IsPressed" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard TargetName="upperSurfaceBorder" TargetProperty="Margin">
<ThicknessAnimation Duration="0:0:0.1" To="2 2 -2 -2">
<ThicknessAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut" />
</ThicknessAnimation.EasingFunction>
</ThicknessAnimation>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard TargetName="upperSurfaceBorder"
TargetProperty="Margin">
<ThicknessAnimation Duration="0:0:0.1"
To="0 0 0 0">
<ThicknessAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut" />
</ThicknessAnimation.EasingFunction>
</ThicknessAnimation>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<!--Disabled-->
<Trigger Property="IsEnabled" Value="False">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.3" Storyboard.TargetName="disabledOverlay"
Storyboard.TargetProperty="Background.Color" To="#55FFFFFF">
<ColorAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut" />
</ColorAnimation.EasingFunction>
</ColorAnimation>
<DoubleAnimation Duration="0:0:0.3" Storyboard.TargetProperty="Foreground.Opacity" To="0.6" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.3" To="Transparent" Storyboard.TargetName="disabledOverlay" Storyboard.TargetProperty="Background.Color">
<ColorAnimation.EasingFunction>
<CubicEase EasingMode="EaseOut" />
</ColorAnimation.EasingFunction>
</ColorAnimation>
<DoubleAnimation Duration="0:0:0.3" Storyboard.TargetProperty="Foreground.Opacity" To="1" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
<Setter Property="Visibility" Value="Visible" TargetName="disabledOverlay" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Any suggestions what's wrong?
Thanks in advance!
Your Main problem is in Trigger 3. I think EnterActions and ExitActions have not feeling good with IsChecked Property. I don't know why.
you must take another way to writing this trigger.
Well, as RezaNoei suggested, the problem was in ExitActions of Trigger 3. I solved this issue by removing of "To" property of font's size animation. This decision was inspired by this topic.
I started a new little WPF application which has something like an entry form that is placed over a picture. That picture has the placeholders for the data that should be entered and where TextBoxes are placed so the user is actually entering the data into a form as she would do by hand or in a typewriter.
I wanted to add an effect, partiali hiding the textbox when the user leaves the field so placed some event handlers in one of the fields adding this code:
<TextBox Height="23" VerticalAlignment="Top" Width="237"
HorizontalAlignment="Left" Margin="641,25,0,0"
Name="txtAmount" LostFocus="txtAmount_LostFocus" />
private void txtAmount_LostFocus(object sender, RoutedEventArgs e)
{
Opacity = .5;
}
That worked so I continued adding code to set the same behavior in all textBoxes, so I changed the code above with the code below:
<Window.Resources>
<Storyboard x:Key="FadeOut">
<DoubleAnimation From="1.0" To="0.5"
Duration="0:0:0.2"
Storyboard.TargetProperty="Opacity">
</DoubleAnimation>
</Storyboard>
<Storyboard x:Key="FadeIn">
<DoubleAnimation From="0.5" To="1.0"
Duration="0:0:0.2"
Storyboard.TargetProperty="Opacity"/>
</Storyboard>
<Style x:Key="InTheShadow" >
<Style.Setters>
<Setter Property="TextBox.Opacity" Value="0.5" />
</Style.Setters>
</Style.Setters>
<Style.Triggers>
<EventTrigger RoutedEvent="TextBox.GotFocus">
<BeginStoryboard Storyboard="{StaticResource FadeIn}"/>
</EventTrigger>
<EventTrigger RoutedEvent="TextBox.LostFocus">
<BeginStoryboard Storyboard="{StaticResource FadeOut}"/>
</EventTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
The first code, also had GotFocus event handled but it's almost the same code, so the second code implemented that, and that was placed on all textBoxes setting the style.
Now, this worked too but, I wanted to add the same effect for MouseEnter/MouseLeave
<EventTrigger RoutedEvent="TextBox.MouseEnter">
<BeginStoryboard Storyboard="{StaticResource FadeIn}"/>
</EventTrigger>
<EventTrigger RoutedEvent="TextBox.MouseLeave">
<BeginStoryboard Storyboard="{StaticResource FadeOut}"/>
</EventTrigger>
but, here my question comes, those events obviously changed the Opacity always, and that was not my intention. I didn't want to change the Opacity for the TextBox that had the Focus, I wanted to keep that Opacity in 100%.
MultiTriggers to the rescue!
Care also had to be taken to stop the old storyboards. Hopefully this works as you expected:
<Style x:Key="InTheShadow" TargetType="TextBox">
<Setter Property="TextBox.Opacity" Value="0.5" />
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsFocused" Value="False" />
<Condition Property="IsMouseOver" Value="True" />
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<StopStoryboard BeginStoryboardName="fadeOut1" />
<StopStoryboard BeginStoryboardName="fadeOut2" />
<BeginStoryboard x:Name="fadeIn1" Storyboard="{StaticResource FadeIn}"/>
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<StopStoryboard BeginStoryboardName="fadeIn1" />
<StopStoryboard BeginStoryboardName="fadeIn2" />
<BeginStoryboard x:Name="fadeOut1" Storyboard="{StaticResource FadeOut}"/>
</MultiTrigger.ExitActions>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsFocused" Value="True" />
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<StopStoryboard BeginStoryboardName="fadeOut1" />
<StopStoryboard BeginStoryboardName="fadeOut2" />
<BeginStoryboard x:Name="fadeIn2" Storyboard="{StaticResource FadeIn}"/>
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<StopStoryboard BeginStoryboardName="fadeIn1" />
<StopStoryboard BeginStoryboardName="fadeIn2" />
<BeginStoryboard x:Name="fadeOut2" Storyboard="{StaticResource FadeOut}"/>
</MultiTrigger.ExitActions>
</MultiTrigger>
</Style.Triggers>
</Style>
Usage:
<StackPanel Margin="7">
<TextBox Margin="7" Style="{StaticResource InTheShadow}" />
<TextBox Margin="7" Style="{StaticResource InTheShadow}" />
<TextBox Margin="7" Style="{StaticResource InTheShadow}" />
<TextBox Margin="7" Style="{StaticResource InTheShadow}" />
<TextBox Margin="7" Style="{StaticResource InTheShadow}" />
</StackPanel>
Edit: Also, you should remove the "from" in your storyboards, that way if the text box already had mouse over and you focus, it won't re-animate:
<Storyboard x:Key="FadeOut">
<DoubleAnimation
To="0.5"
Duration="0:0:0.2"
Storyboard.TargetProperty="Opacity" FillBehavior="HoldEnd"
/>
</Storyboard>
<Storyboard x:Key="FadeIn">
<DoubleAnimation
To="1.0"
Duration="0:0:0.2"
Storyboard.TargetProperty="Opacity" FillBehavior="HoldEnd"
/>
</Storyboard>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid x:Name="grid">
<Grid.Background>
<SolidColorBrush x:Name="backgroundBrush" Color="Transparent" Opacity="0.1"/>
</Grid.Background>
</Grid>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding IsExpanded}" Value="True">
<Setter TargetName="backgroundBrush" Property="Color" Value="Green" />
</DataTrigger>
<Trigger SourceName="grid" Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="backgroundBrush"
Storyboard.TargetProperty="Color"
To="White" Duration="0:0:1.5"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="backgroundBrush"
Storyboard.TargetProperty="Color"
AccelerationRatio="1" Duration="0:0:1.5" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
</ListBox.ItemTemplate>
Doesn't compile with error 'Cannot find the trigger target 'backgroundBrush'.'
If I remove the DataTrigger it will compile and work. If I change the DataTrigger to use TargetName="grid" Property="Background" it will compile and work (but without the desired opacity).
Where am I going wrong?
While I'm not sure why the brush isn't in the namescope, you can do this by swapping out the brush, and "dotting-down" to the Color property of the background brush in the animations like so:
<ListBox.ItemTemplate>
<DataTemplate>
<Grid x:Name="grid">
<Grid.Background>
<SolidColorBrush Color="Transparent" Opacity="0.1"/>
</Grid.Background>
</Grid>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding IsExpanded}" Value="True">
<Setter TargetName="grid" Property="Background">
<Setter.Value>
<SolidColorBrush Color="Green" Opacity="0.1"/>
</Setter.Value>
</Setter>
</DataTrigger>
<Trigger SourceName="grid" Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="grid"
Storyboard.TargetProperty="Background.Color"
To="White" Duration="0:0:1.5"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="grid"
Storyboard.TargetProperty="Background.Color"
AccelerationRatio="1" Duration="0:0:1.5" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
</ListBox.ItemTemplate>