如何使用Reactive UI在单击按钮后按下(按住)按钮触发不同的操作

时间:2017-09-29 15:54:35

标签: c# system.reactive reactiveui

我正在尝试实现一个UI控件,用户可以单击一个按钮使某个东西移动一点,或者按住该按钮并在按住按钮时移动该东西。

假设我有Task<Unit> StartMove()Task<Unit> StopMove()Task<Unit> MoveStep()。单击按钮应执行MoveStep() 并且按钮保持应该开始移动,然后在释放按钮时立即停止移动。移动发生时应忽略快速点击(双击),每秒发送的MoveStep命令不应超过2次。还需要有一些故障安全措施,可以在错误时停止移动,或者在5分钟之后长时间超时。

按钮按下由Button对象上的属性表示,当用户按下按钮时会触发true值,释放时会触发false,此值称为IsPressed on the常规WPF按钮。一个真值后跟一个小于一秒的假值代表一个点击,一个真值后跟一个假值,一个多秒后代表一个保持(这个秒值也可以调到半秒)。

问题归结为采取一系列随机间隔到达的真/假值(想想:猴子随机按下按钮)并从此流中确定按钮是否被点击或按下。在此基础上,应触发操作:点击MoveStep,按住StartMove然后StopMove按钮。

工作代码段

我终于得到了一些有用的东西。

到目前为止,我有MainWindow

public partial class MainWindow : Window, IViewFor<AppViewModel>
{
    public AppViewModel ViewModel { get; set; }
    object IViewFor.ViewModel { get => ViewModel; set => ViewModel = value as AppViewModel; }

    public MainWindow()
    {
        ViewModel = new AppViewModel();
        DataContext = ViewModel;
        InitializeComponent();

        this.WhenAnyValue(x => x.MoveLeftButton.IsPressed).InvokeCommand(this, x => x.ViewModel.MoveLeftCommand);

    }

    protected override void OnClosing(CancelEventArgs e)
    {
        ViewModel.Dispose();
        base.OnClosing(e);
    }
}

AppViewModel

public class AppViewModel : ReactiveObject, IDisposable
{
    public ReactiveCommand<bool, bool> MoveLeftCommand { get; protected set; }

    public AppViewModel()
    {
        MoveLeftCommand = ReactiveCommand.CreateFromTask<bool, bool>(isPressed => _MoveLeft(isPressed));

        MoveLeftCommand.Buffer(TimeSpan.FromMilliseconds(500))
            .Do(x => _InterpretCommand(x))
            .Subscribe(x => Console.WriteLine($"{TimeStamp} {string.Join(",", x)}"))

    }

    private Task<bool> _MoveLeft(bool isPressed)
    {
        return Task.Run(() => isPressed); // Just to set a breakpoint here really
    }

    private static void _InterpretCommand(IList<bool> listOfBools)
    {
        if (listOfBools == null || listOfBools.Count == 0)
        {
            return;
        }

        if (listOfBools.First() == false)
        {
            Console.WriteLine("Stop move");
            return;
        }

        if (listOfBools.Count == 1 && listOfBools.First() == true)
        {
            Console.WriteLine("Start move");
            return;
        }

        if (listOfBools.Count >= 2)
        {
            Console.WriteLine("Click move");
            return;
        }
    }
}

我的MainWindow.xaml真的只是

        <Button x:Name="MoveLeftButton" Content="Left"/>

随机序列示例

        var rands = new Random();
        rands.Next();


        var better = Observable.Generate(
            true,
            _ => true,
            x => !x,
            x => x,
            _ => TimeSpan.FromMilliseconds(rands.Next(1000)))
            .Take(20);

        better.Buffer(TimeSpan.FromMilliseconds(500))
            .Do(x => _InterpretCommand(x))
            .Subscribe(x => Console.WriteLine($"{TimeStamp} {string.Join(",", x)}"));

    static string TimeStamp => DateTime.UtcNow.ToString("yyyy-MM-dd HH:mm:ss.fff", CultureInfo.InvariantCulture);

这会产生输出

2017-10-06 19:11:54.231 
Start move
2017-10-06 19:11:54.720 True
2017-10-06 19:11:55.220 
Stop move
2017-10-06 19:11:55.719 False,True
Stop move
2017-10-06 19:11:56.221 False
Start move
2017-10-06 19:11:56.719 True
Stop move
2017-10-06 19:11:57.222 False
2017-10-06 19:11:57.719 
Start move
2017-10-06 19:11:58.220 True
Stop move
2017-10-06 19:11:58.720 False
2017-10-06 19:11:59.219 
Click move
2017-10-06 19:11:59.719 True,False
2017-10-06 19:12:00.217 
Start move
2017-10-06 19:12:00.719 True
Stop move
2017-10-06 19:12:01.221 False
Click move
2017-10-06 19:12:01.722 True,False
Start move
2017-10-06 19:12:02.217 True
2017-10-06 19:12:02.722 
Stop move
2017-10-06 19:12:03.220 False
2017-10-06 19:12:03.720 
Start move
2017-10-06 19:12:04.217 True
Stop move
2017-10-06 19:12:04.722 False
Start move
2017-10-06 19:12:05.220 True
Stop move
2017-10-06 19:12:05.516 False

2 个答案:

答案 0 :(得分:1)

通过这个答案的见解:https://stackoverflow.com/a/46629909/377562 我把一些非常好的东西串在一起!

来自链接答案的

BufferWithClosingValue

public static IObservable<IList<TSource>> BufferWithClosingValue<TSource>(
    this IObservable<TSource> source, 
    TimeSpan maxTime, 
    TSource closingValue)
{
    return source.GroupByUntil(_ => true,
                               g => g.Where(i => i.Equals(closingValue)).Select(_ => Unit.Default)
                                     .Merge(Observable.Timer(maxTime).Select(_ => Unit.Default)))
                 .SelectMany(i => i.ToList());
}

随机序列示例:

var alternatingTrueFalse = Observable.Generate(
    true,
    _ => true,
    x => !x,
    x => x,
    _ => TimeSpan.FromMilliseconds(new Random().Next(1000)))
    .Take(40).Publish().RefCount();

var bufferedWithTime = alternatingTrueFalse.BufferWithClosingValue(TimeSpan.FromMilliseconds(500), false);

var clicks = bufferedWithTime.Where(x => x.Count() == 2).ThrottleFirst(TimeSpan.FromMilliseconds(500));
var holdStarts = bufferedWithTime.Where(x => x.Count() == 1 && x.First() == true);
var holdStops = bufferedWithTime.Where(x => x.Count() == 1 && x.First() == false);

clicks.Select(_ => "Click").DumpTimes("Clicks");
holdStarts.Select(_ => "Hold Start").DumpTimes("Hold Start");
holdStops.Select(_ => "Hold Stop").DumpTimes("Hold stop");

使用此答案中的ThrottleFirst / SampleFirst实施:https://stackoverflow.com/a/27160392/377562

示例输出

2017-10-08 16:58:14.549 - Hold Start-->Hold Start :: 6
2017-10-08 16:58:15.032 - Hold stop-->Hold Stop :: 7
2017-10-08 16:58:15.796 - Clicks-->Click :: 7
2017-10-08 16:58:16.548 - Clicks-->Click :: 6
2017-10-08 16:58:17.785 - Hold Start-->Hold Start :: 5
2017-10-08 16:58:18.254 - Hold stop-->Hold Stop :: 7
2017-10-08 16:58:19.294 - Hold Start-->Hold Start :: 8
2017-10-08 16:58:19.728 - Hold stop-->Hold Stop :: 7
2017-10-08 16:58:20.186 - Clicks-->Click :: 6

这似乎没有任何竞争条件问题,我已经尝试解决这个问题,所以我喜欢它!

答案 1 :(得分:0)

在我有限的经验中,我相信您应该能够在Throttle语句之后但在调用命令之前添加BufferWhenAnyValue之类的Rx扩展名。

this.WhenAnyValue(x => x.MoveLeftButton.IsPressed) .Buffer(TimeSpan.FromSeconds(1)) .InvokeCommand(this, x => x.ViewModel.MoveLeftCommand);