How to initiate a textblock text animation on a condition?

Question

How to initiate a textblock text animation on a condition?

don bradman 621

I have a WPF app, where there is a textblock like below:

<TextBlock
	Name="pendingBillsLabel"
	FontFamily="Segoe UI Historic"
	FontSize="20">
	<Run Text="Upcoming Bills to be Processed : " Foreground="#29B6F6"/>
	<Run Text="{Binding PendingBills.Count, Mode=OneWay}"

Currently I have added a blinking animation to it as below:

	<TextBlock.Style>
		<Style TargetType="{x:Type TextBlock}">
			<Style.Triggers>
				<Trigger Property="Visibility" Value="Visible">
					<Trigger.EnterActions>
						<BeginStoryboard>
							<Storyboard>
								<DoubleAnimation Storyboard.TargetProperty="Opacity"
								                 From="1.5" To="0.0" Duration="0:0:0.8"
								                 AutoReverse="True" RepeatBehavior="Forever"/>
							</Storyboard>
						</BeginStoryboard>
					</Trigger.EnterActions>
				</Trigger>
			</Style.Triggers>
		</Style>
	</TextBlock.Style>

But this animation runs all the time.

I want this animation to run only when PendingBills.Count is 0 where PendingBills is a property of type ICollectionView declared in my VM.

How can I do this?

Accepted answer

0 additional answers

Your answer

Answer 1

Hi,@don bradman. You could refer to the following codes according to your needs.
It is recommended that you set RepeatBehavior to 3 times. If it is Forever, it will still flash when the Count is not 0.

<Window.Resources>
        <CollectionViewSource x:Key="PendingBills" Source="{Binding Users}" />
   
    </Window.Resources>
    <Window.DataContext>
        <local:ViewModel/>
    </Window.DataContext>
    <StackPanel>


        <DataGrid ItemsSource="{Binding Source={StaticResource PendingBills}}"  Height="180">
            <DataGrid.Columns>
                <DataGridTextColumn Header="name" Binding="{Binding Name}"/>
            </DataGrid.Columns>
        </DataGrid>
        <TextBox Text="{Binding FilterText,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" Width="200"/>

        <TextBlock	Name="pendingBillsLabel"	FontFamily="Segoe UI Historic"	FontSize="20"
                   >
	      <Run Text="Upcoming Bills to be Processed : " Foreground="#29B6F6" />
	      <Run Text="{Binding PendingBills.Count, Mode=OneWay}"/>

            <TextBlock.Style>
                <Style TargetType="{x:Type TextBlock}">
              
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding PendingBills.Count}" Value="0">
                            <DataTrigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                             From="1.5" To="0.0" Duration="0:0:0.8"
                                             AutoReverse="True" RepeatBehavior="Forever" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.EnterActions>
                        </DataTrigger>
                        
                    </Style.Triggers>
                </Style>
            </TextBlock.Style>

        </TextBlock>
      
    </StackPanel>

Codebedhind:

   public class ViewModel : INotifyPropertyChanged
    {
       
        private ICollectionView icv;

        public ICollectionView PendingBills
        {
            get { return icv; }
            set
            {
                icv = value;
                OnPropertyChanged("PendingBills ");
            }
        }
        private ObservableCollection<User> users = new ObservableCollection<User>();
        public ObservableCollection<User> Users
        {
            get { return users; }
            set
            {
                if (users != value)
                {
                    users = value;
                    OnPropertyChanged("Users");
                }
            }
        }
        public ICommand ApplyFilterCommand { get; set; }
        public ViewModel()
        {
            Users.Add(new User() { Id = 1, Name = "user1" });
            Users.Add(new User() { Id = 2, Name = "user2" });
            Users.Add(new User() { Id = 3, Name = "user3" });
            Users.Add(new User() { Id = 5, Name = "user4" });
            Users.Add(new User() { Id = 6, Name = "user5" });
            PendingBills = CollectionViewSource.GetDefaultView(Users);

        }
        private string _filterText;
        public string FilterText
        {
            get { return _filterText; }
            set
            {
                _filterText = value;
                ApplyFilter();
                OnPropertyChanged(nameof(FilterText));
            }
        }
   
        public void ApplyFilter()
        {
            if (string.IsNullOrEmpty(FilterText))
            {
                PendingBills.Filter = null;
            }
            else
            {
                PendingBills.Filter = item => ((User)item).Name.Contains(FilterText);
            }
         
        }
        
        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged([CallerMemberName] string name = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
        }
    }

    public class User
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }
    public class RelayCommand : ICommand
    {
        private Action<object> execute;
        private Func<object, bool> canExecute;

        public RelayCommand(Action<object> executeAction, Func<object, bool> canExecuteFunc = null)
        {
            execute = executeAction ?? throw new ArgumentNullException(nameof(executeAction));
            canExecute = canExecuteFunc;
        }

        public event EventHandler CanExecuteChanged
        {
            add => CommandManager.RequerySuggested += value;
            remove => CommandManager.RequerySuggested -= value;
        }

        public bool CanExecute(object parameter)
        {
            return canExecute == null || canExecute(parameter);
        }

        public void Execute(object parameter)
        {
            execute(parameter);
        }
    }

The result:

Update:

<Window.Resources>
        <CollectionViewSource x:Key="PendingBills" Source="{Binding Users}" />
       
    </Window.Resources>
    <Window.DataContext>
        <local:ViewModel/>
    </Window.DataContext>
    <StackPanel>


        <DataGrid ItemsSource="{Binding Source={StaticResource PendingBills}}"  Height="180">
            <DataGrid.Columns>
                <DataGridTextColumn Header="name" Binding="{Binding Name}"/>
            </DataGrid.Columns>
        </DataGrid>
        <TextBox Text="{Binding FilterText,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" Width="200"/>

        <TextBlock	Name="pendingBillsLabel"	FontFamily="Segoe UI Historic"	FontSize="20"
                   >
	      <Run Text="Upcoming Bills to be Processed : " Foreground="#29B6F6" />
	      <Run Text="{Binding PendingBills.Count, Mode=OneWay}"/>

            <TextBlock.Style>
                <Style TargetType="{x:Type TextBlock}">
              
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding PendingBills.Count}" Value="0">
                            <DataTrigger.EnterActions>
                                <BeginStoryboard  x:Name="AnimationStoryboard">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                     From="1.5" To="0.0" Duration="0:0:0.8"
                                     AutoReverse="True" RepeatBehavior="Forever" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.EnterActions>
                            <DataTrigger.ExitActions>
                                <RemoveStoryboard BeginStoryboardName="AnimationStoryboard" />
                            </DataTrigger.ExitActions>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </TextBlock.Style>

        </TextBlock>
      
    </StackPanel>

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

don bradman 621 Reputation points

2023-06-08T09:33:16.3166667+00:00

@Hui Liu-MSFT , Thanks for your answer and suggestion to set RepeatBehavior to 3 times. But even setting the RepeatBehavior value to 3, once the value of PendingBills.Count changes from 0 to non zero, the blinking effect stays.
Hui Liu-MSFT 48,681 Reputation points Microsoft External Staff

2023-06-08T09:39:24.0633333+00:00

Hi,@don bradman. I tested it works successfully. You could use the code below to set the blinking to repeat three times.

<DoubleAnimation Storyboard.TargetProperty="Opacity" From="1.5" To="0.0" Duration="0:0:0.8" AutoReverse="True" RepeatBehavior="3x" />
don bradman 621 Reputation points

2023-06-08T10:17:00.5566667+00:00

Hi @Hui Liu-MSFT , But if I set RepeatBehavior="3x" the blinking effect stops after 3 times and I want a continuous blinking effect when the value is 0 and the moment it becomes non-zero the blinking stops.

If it is not possible then the opposite may also do, i.e. when the PendingBills.Count=0 then the blinking is stopped and when it is non-zero it continues to blink till the value changes to 0.

Either one of the two would do.
Hui Liu-MSFT 48,681 Reputation points Microsoft External Staff

2023-06-09T02:29:11.02+00:00

Hi,@don bradman. I updated my answer, you could check it out. You can use the updated xaml code from the answer.
don bradman 621 Reputation points

2023-06-09T05:12:44.1066667+00:00

Thanks @Hui Liu-MSFT , just out of curiosity if I try to do the opposite i.e. start animation when value is non-zero and stop it when it becomes 0 do I need to utilize some sort of IValueConverter or is there another way?
Hui Liu-MSFT 48,681 Reputation points Microsoft External Staff

2023-06-09T06:55:58.44+00:00

Hi,@don bradman. You could use the following code to set start animation when value is non-zero and stop it when it becomes 0.

Resources:

<Window.Resources> <local:CountToVisibilityConverter x:Key="CountToVisibilityConverter" /> </Window.Resources>

Style:

<TextBlock.Style> <Style TargetType="{x:Type TextBlock}"> <Style.Triggers>  <DataTrigger Binding="{Binding PendingBills.Count, Converter={StaticResource CountToVisibilityConverter}}" Value="Visible"> <DataTrigger.EnterActions> <BeginStoryboard x:Name="AnimationStoryboard"> <Storyboard> <DoubleAnimation Storyboard.TargetProperty="Opacity" From="1.5" To="0.0" Duration="0:0:0.8" AutoReverse="True" RepeatBehavior="Forever" /> </Storyboard> </BeginStoryboard> </DataTrigger.EnterActions> <DataTrigger.ExitActions> <StopStoryboard BeginStoryboardName="AnimationStoryboard" /> </DataTrigger.ExitActions> </DataTrigger> </Style.Triggers> </Style> </TextBlock.Style>

Converter:

public class CountToVisibilityConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { if (value is int count) { return count > 0 ? Visibility.Visible : Visibility.Collapsed; } return Visibility.Collapsed; // Default value if the value is not an integer } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { throw new NotImplementedException(); } }

The result:

Share via

How to initiate a textblock text animation on a condition?

0 additional answers

Your answer