如何使用 ReactiveUI 实现倒数计时器？

Question

我是反应式世界的新手，我仍在努力学习。为了练习，我决定编写一个非常简单的 WPF 倒数计时器应用程序。基本上，这就是我想要做的：

• 有一个显示当前剩余时间的 TextBlock。
• 单击按钮启动计时器。
• 当计时器运行时，按钮应该被禁用。

我正在尝试使用 ReactiveUI 来实现这一点。以下是我到目前为止...

XAML：

<Window x:Class="ReactiveTimer.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:ReactiveTimer"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
<Window.DataContext>
    <local:MainViewModel/>
</Window.DataContext>
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <TextBlock FontSize="45" FontWeight="Bold">
        <TextBlock.Text>
            <MultiBinding StringFormat="{}{0:00}:{1:00}">
                <Binding Path="RemainingTime.Minutes"/>
                <Binding Path="RemainingTime.Seconds"/>
            </MultiBinding>
        </TextBlock.Text>
    </TextBlock>

    <Button Command="{Binding StartCommand}" Content="Start" Grid.Row="1"/>
</Grid>

视图模型：

public interface IMainViewModel
{
    TimeSpan RemainingTime { get; }
    ICommand StartCommand { get; }
}

public class MainViewModel : ReactiveObject, IMainViewModel
{
    const double InitialTimeInSeconds = 10;
    private TimeSpan _remainingTime;
    private ReactiveCommand<object> _startCommand;

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

    public ICommand StartCommand => _startCommand;

    public MainViewModel()
    {
        _startCommand = ReactiveCommand.Create();
        _startCommand.Subscribe(_ => Start());
    }

    private void Reset()
    {
        RemainingTime = TimeSpan.FromSeconds(InitialTimeInSeconds);
    }

    private void Start()
    {
        RemainingTime = TimeSpan.FromSeconds(InitialTimeInSeconds);
        var timerStream = Observable.Interval(TimeSpan.FromSeconds(1))
            .TakeWhile(_ => RemainingTime > TimeSpan.Zero)
            .Subscribe(_ => RemainingTime = RemainingTime.Subtract(TimeSpan.FromSeconds(1)));
    }
}

我的问题是：

• 我对timerStream 的实现是否正确？
• 如何在计时器运行时禁用“开始”按钮，并在计时器停止时重新启用它？

Answer 1

这个怎么样：

public class MainViewModel : ReactiveObject, IMainViewModel
{
    static TimeSpan InitialTime = TimeSpan.FromSeconds(5);

    ObservableAsPropertyHelper<TimeSpan> _RemainingTime;
    public TimeSpan RemainingTime {
        get { return _remainingTime.Value; }
    }

    ReactiveCommand<TimeSpan> _startCommand;
    public ReactiveCommand<TimeSpan> StartCommand => this._startCommand;

    ObservableAsPropertyHelper<bool> _IsRunning;
    public bool IsRunning {
        get { return this._IsRunning.Value; }
    }

    public MainViewModel()
    {
        var canStart = this.WhenAny(x => x.IsRunning, propChanged => !propChanged.Value);
        _startCommand = ReactiveCommand.CreateAsyncObservable(_ => {
          var startTime = DateTime.Now;

          return Observable.Interval(TimeSpan.FromMilliseconds(20), RxApp.MainThreadScheduler)
            .Select(__ => DateTime.Now - startTime)
            .TakeWhile((elapsed) => elapsed < InitialTime)
            .Select((elapsed) => InitialTime - elapsed);
        });

        _startCommand.IsExecuting
            .ToProperty(this, x => x.IsRunning, out _IsRunning);
        _startCommand.StartWith(TimeSpan.Zero)
            .ToProperty(this, x => x.RemainingTime, out _RemainingTime);
    }
}