All geek questions in one place

WPF: hiding an object causes a brief flash before disappearing

I have a simple button style that has a data trigger that binds to the bool property, and if the property is false, it hides the button using simple fade out animation and vice versa.

But for some unknown reason, the first time I do some kind of task that sets the bool value to false. It gives a short flash before disappearing. By setting it to true, everything will be as expected.

My style

 <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: - The default value of IsButtonVisible is true.

+4
source share
2

DataTrigger? , , .

        <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>


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

0

IsButtonVisible , 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;
                                          }
                                      };

    }
}

-, Trigger:

<Trigger Property="Opacity" Value="1" >
    <Setter Property="Visibility" Value="Visible"></Setter>
</Trigger>

, Visibility Collapsed Opacity == 0 Visibility Visible Opacity =! 0 :

    ...
        <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>
0

Source: https://habr.com/ru/post/1657544/

More articles:


All Articles