ReactivePropertyの使い方を学習していきます
画面
コード
[MainWindowViewModel.cs]
using Reactive.Bindings; using System; using System.Linq; using System.Reactive.Linq; namespace ReactivePropertySample { class MainWindowViewModel { public ReactiveProperty<string> Input { get; private set; } public ReactiveProperty<string> Output { get; private set; } public ReactiveCommand ClearCommand { get; private set; } public ReactiveCommand SetCommand { get; private set; } public MainWindowViewModel() { // ViewModelクラスのコンストラクタでReactiveProperty間の関連を定義 // ReactivePropertyを作成する基本的な方法は、以下の2つ // 1. new演算子を使って生成する // コンストラクタの引数にデフォルト値を指定する。指定しない場合は、その型のでデフォルト値が使われる) // 2. IObservable<T> に対してToReactiveProperty拡張メソッドを呼ぶ this.Input = new ReactiveProperty<string>(""); // デフォルト値を指定してReactivePropertyを作成 this.Output = this.Input .Delay(TimeSpan.FromSeconds(1)) // 1秒間待機して .Select(x => x.ToUpper()) // 大文字に変換して .ToReactiveProperty(); // ReactiveProperty化する // CommandのExecuteが呼ばれたときの処理はSubscribeメソッドで指定します。 // 先ほど作成したViewModelのInputプロパティが空じゃないときに、Inputプロパティを空にするCommandを追加したコードは以下のようになります。 this.ClearCommand = this.Input .Select(x => !string.IsNullOrWhiteSpace(x)) // Input.Valueが空じゃないとき .ToReactiveCommand(); // 実行可能なCommandを作る // Commandの動作を定義する this.ClearCommand.Subscribe(_ => this.Input.Value = ""); // 現在の日付を取得する DateTime dtToday = DateTime.Today; // 実行可能なCommandを生成する this.SetCommand = new ReactiveCommand(); // Commandの動作を定義する this.SetCommand.Subscribe(_ => this.Input.Value += dtToday.ToString()); } } }
[MainWindow.xaml]
<Window x:Class="ReactivePropertySample.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:ReactivePropertySample" mc:Ignorable="d" Title="MainWindow" Height="350" Width="525"> <Window.DataContext> <local:MainWindowViewModel/> </Window.DataContext> <StackPanel> <Label Content="入力" /> <TextBox Text="{Binding Input.Value, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/> <Label Content="出力" /> <TextBlock Text="{Binding Output.Value}"/> <Button Content="SET Today Date" Command="{Binding SetCommand}" /> <Button Content="CLEAR Text" Command="{Binding ClearCommand}" /> </StackPanel> </Window>
他のファイルは変更ありません。
ReactivePropertyの勉強は以下のサイトがおすすめです。
MVVMとリアクティブプログラミングを支援するライブラリ「ReactiveProperty v2.0」オーバービュー blog.okazuki.jp
MVVMをリアクティブプログラミングで快適にReactivePropertyオーバービュー blog.okazuki.jp