WPF 有时会忽略 PropertyChanged 事件

Question

I have a desktop application with a stopwatch-like functionality. I want to show the time elapsed since I start tracking time, and update the UI with the elapsed time. I have a background timer that will periodically raise PropertyChanged for the elapsed time, and the UI will update.

The problem is the majority of the time the UI does not update. I have the timer on 100ms interval, occasionally it will update several times a second, usually it will update once every 3-5 seconds. Sometimes it will be ~25 seconds before the UI updates. If I drag the window the UI always updates correctly while it is being dragged (I don't have any event handlers for dragging or clicking).

This is dotnet core 3.1 on windows. Here is the stripped down project.

.csproj:

<Project Sdk="Microsoft.NET.Sdk.WindowsDesktop">

  <PropertyGroup>
    <OutputType>WinExe</OutputType>
    <TargetFramework>netcoreapp3.1</TargetFramework>
    <UseWPF>true</UseWPF>
  </PropertyGroup>

  <PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Debug|AnyCPU'">
    <DocumentationFile></DocumentationFile>
  </PropertyGroup>

</Project>

MainWindow.xaml

<Window x:Class="SkillTracker.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:i="http://schemas.microsoft.com/xaml/behaviors"
        mc:Ignorable="d"
        Name="TheWindow"
        Title="Skill Tracker" Height="200" Width="350">
    <Window.Resources>
    </Window.Resources>

    <Grid>
        <StackPanel>
            <TextBlock >Total time:</TextBlock>
            <TextBlock FontFamily="Lucida Console" Text="{Binding TotalTimeElapsed, UpdateSourceTrigger=Explicit}"></TextBlock>
            <TextBlock >Session time:</TextBlock>
            <TextBlock FontFamily="Lucida Console" Text="{Binding CurrentSessionTimeElapsed}"></TextBlock>
            <Button Command="{Binding StartStopArtCommand}" Content="button" ></Button>
        </StackPanel>
    </Grid>
</Window>

MainWindow.xaml.cs

using System;
using System.ComponentModel;
using System.Timers;
using System.Windows;
using System.Windows.Input;

namespace SkillTracker
{
    public abstract class ViewModelBase : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        public void OnPropertyChanged(string propertyName) => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
    public class CommandHandler : ICommand
    {
        private Action _action;
        public event EventHandler CanExecuteChanged;
        public CommandHandler(Action action)
        {
            _action = action;
        }
        public bool CanExecute(object parameter) => true;
        public void Execute(object parameter) => _action();
    }

    public class MainViewModel : ViewModelBase
    {
        private System.Timers.Timer _uiUpdateTimer;
        private DateTime? _sessionStart;
        private int _totalDurationSeconds;

        public MainViewModel()
        {
            _totalDurationSeconds = 3;

            StartStopArtCommand = new CommandHandler(StartStopArtCommandAction);

            _uiUpdateTimer = new System.Timers.Timer();
            _uiUpdateTimer.Interval = 100;
            _uiUpdateTimer.AutoReset = true;
            _uiUpdateTimer.Elapsed += UiUpdateTimer_Elapsed;
        }

        public ICommand StartStopArtCommand { get; private set; }

        public string CurrentSessionTimeElapsed
        {
            get
            {
                if (_uiUpdateTimer.Enabled && _sessionStart.HasValue)
                {
                    var ts = DateTime.Now - _sessionStart.Value;
                    var hours = (ts.Days * 24) + ts.Hours;
                    return $"{hours:000}:{ts.Minutes:00}:{ts.Seconds:00}.{ts.Milliseconds:000}";
                }
                else
                {
                    return string.Empty;
                }
            }
        }

        public string TotalTimeElapsed
        {
            get
            {
                if (_sessionStart.HasValue)
                {
                    var ts = DateTime.Now.AddSeconds(_totalDurationSeconds) - _sessionStart.Value;
                    var hours = (ts.Days * 24) + ts.Hours;
                    return $"{hours:000}:{ts.Minutes:00}:{ts.Seconds:00}.{ts.Milliseconds:000}";
                }
                else
                {
                    return string.Empty;
                }
            }
        }

        private void StartStopArtCommandAction()
        {
            _sessionStart = DateTime.Now;
            _uiUpdateTimer.Start();

            // trigger initial update.
            OnPropertyChanged(nameof(TotalTimeElapsed));
            OnPropertyChanged(nameof(CurrentSessionTimeElapsed));
        }

        private void UiUpdateTimer_Elapsed(object sender, ElapsedEventArgs e)
        {
            System.Diagnostics.Debug.WriteLine(DateTime.Now.ToString("HH:mm:ss.ffff"));
            OnPropertyChanged(nameof(CurrentSessionTimeElapsed));
            OnPropertyChanged(nameof(TotalTimeElapsed));
        }
    }

    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            DataContext = new MainViewModel();
        }
    }
}

Here's an animated gif of what not-updating looks like. You can see the UiUpdateTimer_Elapsed method being called, it's printing the current DateTime in the debug window on the right.

Answer 1

Like the comments mentioned switching to a DispatcherTimer will give you better results as it's Tick event fires on the UI thread. A System.Timer runs in a different thread pool and can cause issues.

Regardless, your sample will run a little more roughly in debug mode, because you are writing to the Output window on each tick.

To implement the DispatcherTimer update your code with these changes:

private DispatcherTimer _uiUpdateTimer;

...

_uiUpdateTimer = new DispatcherTimer { Interval = TimeSpan.FromMilliseconds(100) };
_uiUpdateTimer.Tick += OnTick;

...

if(_uiUpdateTimer.IsEnabled && _sessionState.HasValue)
{
    ... Your code goes here
}

...

private void OnTick(object sender, EventArgs e)
{
    ... Your code goes here
}

I hope this helps.

Answer 2

Using a System.Windows.Threading.DispatcherTimer by itself wasn't enough, I also had to specify a high priority (in the constructor) for the UI to update like it should.

_uiUpdateTimer = new DispatcherTimer(DispatcherPriority.Normal);
_uiUpdateTimer.Interval = new TimeSpan(0, 0, 0, 0, 100);
_uiUpdateTimer.Tick += UiUpdateTimer_Elapsed;