ReactiveUI を WPFで使う

ReactiveUIはWindowsFormsでも使えるMVVMフレームワークであり、先日使ってみました。単純なバインドの例ですが、MVC, MVP, MVVM等のどのパターンを使うかの選択についてはフレームワークサポートの影響が非常に大きいため、ViewとViewとModelの間に来る部分(PresenterやViewModelなど)との連携をどうサポートしてくれるかの一例を見た次第です。

ReactiveUIをWindows Formsで使った場合は前回ご紹介したので、蛇足ながらにWPFで使う場合の例を一応見ておきます。ViewModelは前回と同じです、

SampleViewModel.cs

namespace ReactiveUIInWpf
{
    using System;
    using ReactiveUI;

    public class SampleViewModel : ReactiveObject
    {
        private string inputString1;
        public string InputString1 {
            get { return inputString1; }
            set { this.RaiseAndSetIfChanged(ref inputString1, value); }
        }

        private string inputString2 = "input2の初期値です";
        public string InputString2 {
            get { return inputString2; }
            set { this.RaiseAndSetIfChanged(ref inputString2, value); }
        }

        private DateTime currentDateTime = DateTime.Now;
        public DateTime CurrentDateTime {
            get { return currentDateTime; }
            set { this.RaiseAndSetIfChanged(ref currentDateTime, value); }
        }

        // 初期化コマンド
        public ReactiveCommand<object> Initialize{ get; set;}

        public SampleViewModel()
        {
            // 初期化コマンドの作成
            Initialize = ReactiveCommand.Create(this.WhenAny(vm => vm.InputString1, str => true)); // =常時有効
            Initialize.Subscribe(_ =>
            {
                InputString1 = "初期値1";
                InputString2 = "初期値2";
                CurrentDateTime = new DateTime(2020, 1, 1);
            }
            );
        }

        public override string ToString(){
            return "1:" + InputString1 + Environment.NewLine +
                   "2:" + InputString2 + Environment.NewLine +
                   CurrentDateTime.ToString();
        }
    }
}

これに対するViewはWPFではXAMLで記述するので、

MainWndow.xaml

<Window x:Class="ReactiveUIInWpf.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="217" Width="291">
    <Grid>
        <Label Content="User Input1" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top"/>
        <Label Content="User Input2" HorizontalAlignment="Left" Margin="10,43,0,0" VerticalAlignment="Top"/>
        <Label Content="Time" HorizontalAlignment="Left" Margin="10,76,0,0" VerticalAlignment="Top"/>
        <TextBox Text="{Binding InputString1}" HorizontalAlignment="Left" Height="23" Margin="108,12,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="155"/>
        <TextBlock Text="{Binding InputString2}" HorizontalAlignment="Left" Margin="108,48,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="165"/>
        <DatePicker SelectedDate="{Binding CurrentDateTime}" HorizontalAlignment="Left" Margin="108,76,0,0" VerticalAlignment="Top" Width="155"/>
        <Button Content="Execute" Command="{Binding Initialize}" HorizontalAlignment="Left" Margin="45,128,0,0" VerticalAlignment="Top" Width="75" Height="34"/>
        <Button Content="Close" HorizontalAlignment="Left" Margin="188,128,0,0" VerticalAlignment="Top" Width="75" Height="34"/>
    </Grid>
</Window>

MainWindow.xaml.cs

namespace ReactiveUIInWpf
{
    using System.Windows;

    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            DataContext = new SampleViewModel();
        }
    }
}

前回との差分を見てください。WindowsFormsとWPFとでViewの部分が独立しただけでModel(今回作っていません)とViewModelまでが共用化できていることになります。ReactiveUIはまだこれから色々みていきたいと思っています。

 

広告