WPF: Hiding object causes brief flash before disappearing - wpf

Question

I have a simple button style which has data trigger which binds to a bool property and if property is false it hides the button using simple fade out animation and vice-versa.
But for some unknown reason, for the first time when I perform some task which sets the bool value to false. It gives a brief flash before fading out. Upon setting it to true everything is as expected.
My style is
<Style x:Key="CustomButtonStyle" TargetType="{x:Type Button}" >
<Style.Triggers>
<DataTrigger Binding="{Binding IsButtonVisible}" Value="true">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard Storyboard.TargetProperty="Opacity" >
<DoubleAnimation Duration="0:0:0.2" To="1"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard Storyboard.TargetProperty="Opacity" >
<DoubleAnimation Duration="0:0:0.2" To="0"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
<Trigger Property="Opacity" Value="0">
<Setter Property="Visibility" Value="Collapsed"></Setter>
</Trigger>
<Trigger Property="Opacity" Value="1" >
<Setter Property="Visibility" Value="Visible"></Setter>
</Trigger>
</Style.Triggers>
<Style.Setters>
<Setter Property="Height" Value="93"/>
<Setter Property="Width" Value="93"/>
<Setter Property="Opacity" Value="0"/>
</Style.Setters>
</Style>
Note:-
Default value of IsButtonVisible is true

Answer 1

Why do you have two DataTrigger? Try this solution, maybe it solves your problem.
<Style x:Key="DefaultButtonStyle" TargetType="{x:Type Button}">
<Style.Triggers>
<DataTrigger Binding="{Binding IsVisible}" Value="true">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard FillBehavior="HoldEnd" Storyboard.TargetProperty="Opacity">
<DoubleAnimation Duration="0:0:0.2" To="1"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard Storyboard.TargetProperty="Opacity" >
<DoubleAnimation Duration="0:0:0.2" To="0" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
<Trigger Property="Opacity" Value="0">
<Setter Property="Visibility" Value="Collapsed"></Setter>
</Trigger>
<Trigger Property="Opacity" Value="1">
<Setter Property="Visibility" Value="Visible"></Setter>
</Trigger>
</Style.Triggers>
<Style.Setters>
<Setter Property="Height" Value="93"/>
<Setter Property="Width" Value="93"/>
<Setter Property="Opacity" Value="0"/>
</Style.Setters>
</Style>
Edit:
XAML
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApplication1"
mc:Ignorable="d"
Title="MainWindow" Height="279.716" Width="279.784"
DataContext="{Binding RelativeSource={RelativeSource Self}}">
<Window.Resources>
<Style x:Key="ButtonStyleTrue" TargetType="{x:Type Button}">
<Style.Triggers>
<DataTrigger Binding="{Binding VisibleTrue}" Value="true">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard FillBehavior="HoldEnd" Storyboard.TargetProperty="Opacity">
<DoubleAnimation Duration="0:0:0.2" To="1"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard Storyboard.TargetProperty="Opacity" >
<DoubleAnimation Duration="0:0:0.2" To="0" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
<Trigger Property="Opacity" Value="0">
<Setter Property="Visibility" Value="Collapsed"></Setter>
</Trigger>
<Trigger Property="Opacity" Value="1">
<Setter Property="Visibility" Value="Visible"></Setter>
</Trigger>
</Style.Triggers>
<Style.Setters>
<Setter Property="Height" Value="93"/>
<Setter Property="Width" Value="93"/>
<Setter Property="Opacity" Value="0"/>
</Style.Setters>
</Style>
<Style x:Key="ButtonStyleFalse" TargetType="{x:Type Button}">
<Style.Triggers>
<DataTrigger Binding="{Binding VisibleFalse}" Value="true">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard FillBehavior="HoldEnd" Storyboard.TargetProperty="Opacity">
<DoubleAnimation Duration="0:0:0.2" To="1"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard Storyboard.TargetProperty="Opacity" >
<DoubleAnimation Duration="0:0:0.2" To="0" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
<Trigger Property="Opacity" Value="0">
<Setter Property="Visibility" Value="Collapsed"></Setter>
</Trigger>
<Trigger Property="Opacity" Value="1">
<Setter Property="Visibility" Value="Visible"></Setter>
</Trigger>
</Style.Triggers>
<Style.Setters>
<Setter Property="Height" Value="93"/>
<Setter Property="Width" Value="93"/>
<Setter Property="Opacity" Value="0"/>
</Style.Setters>
</Style>
</Window.Resources>
<Grid>
<Button Content="Button" HorizontalAlignment="Left" Margin="187,11,0,0" VerticalAlignment="Top" Width="75" Click="Button_OnClick"/>
<Button Style="{StaticResource ButtonStyleFalse}" Content="Button" HorizontalAlignment="Left" Margin="47,66,0,0" VerticalAlignment="Top" Width="75"/>
<TextBlock x:Name="textBlock_true" HorizontalAlignment="Left" Margin="193,68,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>
<Button Style="{StaticResource ButtonStyleTrue}" Content="Button" HorizontalAlignment="Left" Margin="47,143,0,0" VerticalAlignment="Top" Width="75"/>
<TextBlock x:Name="textBlock_false" HorizontalAlignment="Left" Margin="193,145,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>
</Grid>
Code Behind
using System.ComponentModel;
using System.Windows;
namespace WpfApplication1
{
public partial class MainWindow : Window, INotifyPropertyChanged
{
/// <summary>
/// Initalvalue is true;
/// </summary>
public bool VisibleTrue
{
get { return _VisibleTrue; }
set
{
if (_VisibleTrue == value) return;
_VisibleTrue = value;
textBlock_true.Text = value ? "True" : "False";
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("VisibleTrue"));
}
}
private bool _VisibleTrue = true;
/// <summary>
/// Initialvalue is false
/// </summary>
public bool VisibleFalse
{
get { return _VisibleFalse; }
set
{
if (_VisibleFalse == value) return;
_VisibleFalse = value;
textBlock_false.Text = value ? "True" : "False";
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("VisibleFalse"));
}
}
private bool _VisibleFalse;
public MainWindow()
{
InitializeComponent();
textBlock_true.Text = "Application started";
textBlock_false.Text = "Application started";
}
public event PropertyChangedEventHandler PropertyChanged;
private void Button_OnClick(object sender, RoutedEventArgs e)
{
VisibleTrue = !VisibleTrue;
VisibleFalse = !VisibleTrue;
}
}
}
Preview

Answer 2

To prevent setting your bound property IsButtonVisible while animation performs you could add the following to your ViewModel:
private bool _animationInProgress = false;
private readonly object _animationLock = new object();
private bool _isButtonVisible = true;
public bool IsButtonVisible {
get { return _isButtonVisible; }
set {
lock (_animationLock) {
if (value == _isButtonVisible || _animationInProgress) return;
_animationInProgress = true;
}
_isButtonVisible = value;
OnPropertyChanged();
Timer animationDoneTimer = new Timer {Interval = 200, Enabled = true, AutoReset = false};
animationDoneTimer.Elapsed += (sender, args) => {
lock (_animationLock) {
_animationInProgress = false;
}
};
}
}
As second thing I would remove the Trigger:
<Trigger Property="Opacity" Value="1" >
<Setter Property="Visibility" Value="Visible"></Setter>
</Trigger>
For the behaviour, that you'd like to set Visibility to Collapsed on Opacity == 0 and Visibility to Visible on Opacity =! 0 you should do it this way:
...
<Trigger Property="Opacity" Value="0">
<Setter Property="Visibility" Value="Collapsed" />
</Trigger>
<!-- Trigger removed -->
</Style.Triggers>
<Style.Setters>
<!-- Visibilities value if Trigger Opacity == 0 does not fire -->
<Setter Property="Visibility" Value="Visible" />
<Setter Property="Height" Value="93"/>
<Setter Property="Width" Value="93"/>
<Setter Property="Opacity" Value="0"/>
</Style.Setters>
</Style>