如何制作wpf倒计时器？

Question

我想创建 wpf 倒数计时器，将结果显示为 hh:mm:ss 到文本框中，我将感谢任何人的帮助。

Answer 1

您可以使用

DispatcherTimer

类 (msdn)。

您可以保持在

TimeSpan

结构中的持续时间 (msdn)。

如果您想将

TimeSpan

格式化为

hh:mm:ss

，您应该使用“c”参数调用

ToString

方法 (msdn)。

示例：

XAML：

<Window x:Class="CountdownTimer.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <TextBlock Name="tbTime" />
    </Grid>
</Window>

后台代码：

using System;
using System.Windows;
using System.Windows.Threading;

namespace CountdownTimer
{
    public partial class MainWindow : Window
    {
        DispatcherTimer _timer;
        TimeSpan _time;

        public MainWindow()
        {
            InitializeComponent();

            _time = TimeSpan.FromSeconds(10);

            _timer = new DispatcherTimer(new TimeSpan(0, 0, 1), DispatcherPriority.Normal, delegate
                {
                    tbTime.Text = _time.ToString("c");
                    if (_time == TimeSpan.Zero) _timer.Stop();
                    _time = _time.Add(TimeSpan.FromSeconds(-1));                    
                }, Application.Current.Dispatcher);

            _timer.Start();            
        }
    }
}

Answer 2

为此目的使用

DispatcherTimer

没有任何问题。然而，恕我直言，较新的基于 TPL 的

async

/

await

范式使得代码更容易编写和阅读。最好始终对 WPF 程序使用良好的 MVVM 实践，而不是直接从代码隐藏设置 UI 元素值。

这是一个实现问题中描述的倒计时器的程序示例，但使用了这些更现代的实践......

视图模型当然是大量有趣代码所在的地方，即使在那里，主要的还是单个方法

_StartCountdown()

，它实现了实际的倒计时：

ViewModel.cs：

class ViewModel
{
    private async void _StartCountdown()
    {
        Running = true;

        // NOTE: UTC times used internally to ensure proper operation
        // across Daylight Saving Time changes. An IValueConverter can
        // be used to present the user a local time.

        // NOTE: RemainingTime is the raw data. It may be desirable to
        // use an IValueConverter to always round up to the nearest integer
        // value for whatever is the least-significant component displayed
        // (e.g. minutes, seconds, milliseconds), so that the displayed
        // value doesn't reach the zero value until the timer has completed.

        DateTime startTime = DateTime.UtcNow, endTime = startTime + Duration;
        TimeSpan remainingTime, interval = TimeSpan.FromMilliseconds(100);

        StartTime = startTime;
        remainingTime = endTime - startTime;

        while (remainingTime > TimeSpan.Zero)
        {
            RemainingTime = remainingTime;
            if (RemainingTime < interval)
            {
                interval = RemainingTime;
            }

            // NOTE: arbitrary update rate of 100 ms (initialized above). This
            // should be a value at least somewhat less than the minimum precision
            // displayed (e.g. here it's 1/10th the displayed precision of one
            // second), to avoid potentially distracting/annoying "stutters" in
            // the countdown.

            await Task.Delay(interval);
            remainingTime = endTime - DateTime.UtcNow;
        }

        RemainingTime = TimeSpan.Zero;
        StartTime = null;
        Running = false;
    }

    private TimeSpan _duration;
    public TimeSpan Duration
    {
        get { return _duration; }
        set { _UpdateField(ref _duration, value); }
    }

    private DateTime? _startTime;
    public DateTime? StartTime
    {
        get { return _startTime; }
        private set { _UpdateField(ref _startTime, value); }
    }

    private TimeSpan _remainingTime;
    public TimeSpan RemainingTime
    {
        get { return _remainingTime; }
        private set { _UpdateField(ref _remainingTime, value); }
    }

    private bool _running;
    public bool Running
    {
        get { return _running; }
        private set { _UpdateField(ref _running, value, _OnRunningChanged); }
    }

    private void _OnRunningChanged(bool obj)
    {
        _startCountdownCommand.RaiseCanExecuteChanged();
    }

    private readonly DelegateCommand _startCountdownCommand;
    public ICommand StartCountdownCommand { get { return _startCountdownCommand; } }

    public ViewModel()
    {
        _startCountdownCommand = new DelegateCommand(_StartCountdown, () => !Running);
    }

    public event PropertyChangedEventHandler PropertyChanged;

    private void _UpdateField<T>(ref T field, T newValue,
        Action<T> onChangedCallback = null,
        [CallerMemberName] string propertyName = null)
    {
        if (EqualityComparer<T>.Default.Equals(field, newValue))
        {
            return;
        }

        T oldValue = field;

        field = newValue;
        onChangedCallback?.Invoke(oldValue);
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

如评论中所述，上面的内容将按原样工作，但如果您想要特定的输出，那么使用

IValueConverter

实现来调整输出以满足用户特定的需求会很有用。以下是其中的一些示例：

UtcToLocalConverter.cs：

class UtcToLocalConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value == null) return null;

        if (value is DateTime)
        {
            DateTime dateTime = (DateTime)value;

            return dateTime.ToLocalTime();
        }

        return Binding.DoNothing;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value == null) return null;

        if (value is DateTime)
        {
            DateTime dateTime = (DateTime)value;

            return dateTime.ToUniversalTime();
        }

        return Binding.DoNothing;
    }
}

TimeSpanRoundUpConverter.cs：

class TimeSpanRoundUpConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (!(value is TimeSpan && parameter is TimeSpan))
        {
            return Binding.DoNothing;
        }

        return RoundUpTimeSpan((TimeSpan)value, (TimeSpan)parameter);
    }

    private static TimeSpan RoundUpTimeSpan(TimeSpan value, TimeSpan roundTo)
    {
        if (value < TimeSpan.Zero) return RoundUpTimeSpan(-value, roundTo);

        double quantization = roundTo.TotalMilliseconds, input = value.TotalMilliseconds;
        double normalized = input / quantization;
        int wholeMultiple = (int)normalized;
        double fraction = normalized - wholeMultiple;

        return TimeSpan.FromMilliseconds((fraction == 0 ? wholeMultiple : wholeMultiple + 1) * quantization);
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

当然，还需要一些 XAML 来定义 UI（其中所有 UI 元素都没有名称，隐藏代码也不需要显式访问其中任何元素）：

MainWindow.xaml：

<Window x:Class="TestSO16748371CountdownTimer.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:l="clr-namespace:TestSO16748371CountdownTimer"
        xmlns:s="clr-namespace:System;assembly=mscorlib"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
  <Window.DataContext>
    <l:ViewModel/>
  </Window.DataContext>

  <Window.Resources>
    <l:UtcToLocalConverter x:Key="utcToLocalConverter1"/>
    <l:TimeSpanRoundUpConverter x:Key="timeSpanRoundUpConverter1"/>
    <s:TimeSpan x:Key="timeSpanRoundTo1">00:00:01</s:TimeSpan>
  </Window.Resources>

  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="Auto"/>
      <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="Auto"/>
      <RowDefinition/>
    </Grid.RowDefinitions>

    <TextBlock Text="Duration: "/>
    <TextBox Text="{Binding Duration}" Grid.Column="1"/>

    <TextBlock Text="Start time:" Grid.Row="1"/>
    <TextBlock Text="{Binding StartTime, Converter={StaticResource utcToLocalConverter1}}" Grid.Row="1" Grid.Column="1"/>

    <TextBlock Text="Remaining time:" Grid.Row="2"/>
    <TextBlock Text="{Binding RemainingTime,
      StringFormat=hh\\:mm\\:ss,
      Converter={StaticResource timeSpanRoundUpConverter1},
      ConverterParameter={StaticResource timeSpanRoundTo1}}" Grid.Row="2" Grid.Column="1"/>

    <Button Content="Start Countdown" Command="{Binding StartCountdownCommand}" Grid.Row="3" VerticalAlignment="Top"/>

  </Grid>
</Window>

Answer 3

原始响应没有显示任何毫秒，所以我添加了这个答案，这不会给 CPU 带来压力，因为它仅在空闲时调用：

var endTime = DateTime.Now + TimeSpan.FromMinutes(5);
Thread countdownThread = new Thread(() =>
{
    var remaining = (endTime - DateTime.Now);
    while (remaining.TotalMilliseconds > 0)
    {
        remaining = (endTime - DateTime.Now);

        Application.Current.Dispatcher.Invoke(System.Windows.Threading.DispatcherPriority.SystemIdle, new Action(() =>//this needs to happen on the gui thread so we dispatch it
        {
            if (remaining.TotalMilliseconds > 0)
            {
                tbTimer.Text = remaining.ToString();
            }
            else
            {
                tbTimer.Text = TimeSpan.FromSeconds(0).ToString(); //this could be a MVVM depency property as well
            }
        }));
    }

});
countdownThread.IsBackground = true;
countdownThread.Start();