読者です 読者をやめる 読者になる 読者になる

かずきのBlog@hatena

日本マイクロソフトに勤めています。XAML + C#の組み合わせをメインに、たまにASP.NETやJavaなどの.NET系以外のことも書いています。掲載内容は個人の見解であり、所属する企業を代表するものではありません。

RxとReactivePropertyを使って、WPFでUnidirection Data Flowを実現するを真似してみた

WPF C# ReactiveProperty

ありがたいことに最近ReactivePropertyを勧めたら使い始めて頂けました。

qiita.com

このコードを大げさに書いたらどうなるかなぁというのでやってみました。 ということでModel部分。

なんかきっかけがあるタイミングで、インクリメントし続けるだけの奴。

class CounterProvider
{
    public IObservable<int> ObservableCounter { get; }

    public CounterProvider(IObservable<Unit> countupTrigger)
    {
        this.ObservableCounter = countupTrigger
            .Scan(0, (x, _) => x + 1);
    }
}

コマンドとReactiveProperty持った人。

class MainWindowViewModel
{
    public ReadOnlyReactiveProperty<int> Count { get; }
    public ReactiveCommand IncrmentCommand { get; }

    public MainWindowViewModel()
    {
        this.IncrmentCommand = new ReactiveCommand();
        var model = new CounterProvider(this.IncrmentCommand.ToUnit());
        this.Count = model.ObservableCounter
            .ToReadOnlyReactiveProperty();
    }
}

んで画面。

<Window x:Class="StreamApp.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:StreamApp"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Window.DataContext>
        <local:MainWindowViewModel />
    </Window.DataContext>
    <StackPanel>
        <Button Content="Count"
                Command="{Binding IncrmentCommand}"/>
        <TextBlock Text="{Binding Count.Value}" />
    </StackPanel>
</Window>

仰々しくやるならこんなイメージかな?どうだろう。 とりあえず、全部IOでつなぐようにしてみた。