WPF Fade In / Out only works once
I have a style with storyboard and triggers. The animation works beautifully, but only once.
I have 2 storyboards FadeIn and FadeOut. In EnterActions I run the FadeIn animation and the ExitActions FadeOut animation. I run all animation in code with
TextBlock.StartFade = true;
When I debug the above code every hit of StartFade is False (that's correct).
So what am I doing wrong?
Here is the style in XAML. FadingTextBlock is a normal custom TextBlock with a StartFade dependency property.
<Style TargetType="{x:Type Controls:FadingTextBlock}">
<Setter Property="Visibility" Value="Collapsed" />
<Setter Property="StartFade" Value="False" />
<Setter Property="Opacity" Value="1.0" />
<Style.Resources>
<Storyboard x:Key="FadeIn">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Controls:FadingTextBlock.Opacity)" Storyboard.TargetName="{x:Null}">
<EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="0.0" />
<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="1.0" />
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Controls:FadingTextBlock.Visibility)" Storyboard.TargetName="{x:Null}">
<DiscreteObjectKeyFrame KeyTime="0:0:0.0" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>
<BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="(Controls:FadingTextBlock.StartFade)" Storyboard.TargetName="{x:Null}">
<DiscreteBooleanKeyFrame KeyTime="0:0:1.5" Value="False" />
</BooleanAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="FadeOut">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Controls:FadingTextBlock.Opacity)" Storyboard.TargetName="{x:Null}">
<EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="1.0" />
<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="0.0" />
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Controls:FadingTextBlock.Visibility)" Storyboard.TargetName="{x:Null}">
<DiscreteObjectKeyFrame KeyTime="0:0:1.5" Value="{x:Static Visibility.Collapsed}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</Style.Resources>
<Style.Triggers>
<Trigger Property="StartFade" Value="True">
<Trigger.EnterActions>
<BeginStoryboard x:Name="In" Storyboard="{StaticResource FadeIn}" />
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard x:Name="Out" Storyboard="{StaticResource FadeOut}" />
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
+3
source to share
3 answers
I ended up using local animation in the code.
Set the opacity of the text block to 0 in Xaml.
// Fading animation for the textblock to show that the settings are updated.
DoubleAnimation fadingAnimation = new DoubleAnimation();
fadingAnimation.From = 0;
fadingAnimation.To = 1;
fadingAnimation.Duration = new Duration(TimeSpan.FromSeconds(1.5));
fadingAnimation.AutoReverse = true;
UpdateMessage.BeginAnimation(TextBlock.OpacityProperty, fadingAnimation);
+1
source to share
You have to stop the started storyboard from playing in the exit action with the action <StopStoryboard>
.
<Trigger Property="StartFade" Value="True">
<Trigger.EnterActions>
<StopStoryBoard BeginStoryboardName="Out"/>
<BeginStoryboard x:Name="In" Storyboard="{StaticResource FadeIn}" />
</Trigger.EnterActions>
<Trigger.ExitActions>
<StopStoryBoard BeginStoryboardName="In"/>
<BeginStoryboard x:Name="Out" Storyboard="{StaticResource FadeOut}" />
</Trigger.ExitActions>
</Trigger>
+3
source to share
I implemented my own C # solution based on @MystyxMac Extract it to Blend Mode which showed the problem.
Trying to show the same notification twice on a line will not work because the dependency property changed the callback will not be called ..
I overcame this by getting the binding, clearing it and setting it again.
public class ShowFadingTextBehavior : System.Windows.Interactivity.Behavior<TextBlock>
{
public static readonly DependencyProperty DurationProperty = DependencyProperty.Register(
"Duration", typeof(TimeSpan), typeof(ShowFadingTextBehavior), new PropertyMetadata(TimeSpan.FromSeconds(5)));
public TimeSpan Duration
{
get { return (TimeSpan)GetValue(DurationProperty); }
set { SetValue(DurationProperty, value); }
}
public static readonly DependencyProperty TextProperty = DependencyProperty.Register(
"Text", typeof (string), typeof (ShowFadingTextBehavior), new PropertyMetadata("",OnTextChanged));
private static void OnTextChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var b = (ShowFadingTextBehavior) d;
var text = (string) e.NewValue;
if(string.IsNullOrEmpty(text))
return;
b.Show(text);
}
private void Show(string text)
{
var textBlock = AssociatedObject;
if(textBlock==null)
return;
textBlock.Text = text;
if(textBlock.Visibility==Visibility.Visible)
return;
textBlock.Visibility = Visibility.Visible;
var a = new DoubleAnimation
{
From = 1.0,
To = 0.0,
FillBehavior = FillBehavior.Stop,
BeginTime = TimeSpan.FromSeconds(1),
Duration = new Duration(Duration)
};
var storyboard = new Storyboard();
storyboard.Children.Add(a);
Storyboard.SetTarget(a, textBlock);
Storyboard.SetTargetProperty(a, new PropertyPath(UIElement.OpacityProperty));
storyboard.Completed += delegate
{
textBlock.Visibility = Visibility.Collapsed;
textBlock.Opacity = 1.0;
var binding = BindingOperations.GetBinding(this, TextProperty);
if(binding==null)
return;
ClearValue(TextProperty);
BindingOperations.SetBinding(this, TextProperty, binding);
};
storyboard.Begin();
}
public string Text
{
get { return (string) GetValue(TextProperty); }
set { SetValue(TextProperty, value); }
}
}
0
source to share