How do I implement a Countdown Timer Using ReactiveUI?

Question

I'm new to the world of reactive and I'm still trying to learn. To practice, I decided to write a very simple WPF countdown timer application. Basically, this is what I'm trying to do:

• Have a TextBlock that displays the current remaining time.
• Clicking a Button starts the timer.
• While the timer is running, the Button should be disabled.

I'm trying to implement this using ReactiveUI. Below is what I have so far...

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>

ViewModel:

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)));
    }
}

My questions are:

• Is my implementation of the timerStream correct?
• How do I disable the Start button when the timer is running, and re-enable it when the timer stops?

Answer 1

How about this:

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);
    }
}