.NET5のWPFにReactivePropertyをセットアップする

以前より圧倒的に簡単にセットアップできるようになっていて逆に混乱してしまったのでメモ書きです。

確認環境

この記事は以下環境で確認しています。

  • VS2019(16.11.4)
  • .NET 5(C#9.0)
  • WPF プロジェクト作成済み

セットアップ方法

Visual Studio のプロジェクトを右クリック > NuGet パッケージの管理から 「ReactiveProperty.WPF」 を導入する

もしくはパッケージマネージャーコンソールを開いて

ツール > NuGet パッケージ マネージャー > パッケージ マネージャー コンソール

以下コマンドを入力

NuGetのページ: https://www.nuget.org/packages/ReactiveProperty.WPF/

PM> Install-Package ReactiveProperty.WPF -Version 7.12.0

間接的に参照しているパッケージは自動的に解決してくれるので他は設定する必要ありません。

  • Microsoft.Xaml.Behaviors.dll
  • ReactiveProperty.dll
  • ReactiveProperty.Core.dll

任意のイベントをVeiwModelにバインドする

なんかネットで調べると未だに10年位前の使い方してる記事が出てくるけど以下の紹介するコードが最新の記述方法です。

ViewModel側の定義

ViewModel 側には ReactiveCommand を以下のように宣言します。

指定するジェネリックの型はイベント毎に違うので指定が違うとキャストできませんエラーが出るのでリファレンス見てイベントに応じて正しい型を指定するようにしてください。

public class FolderViewModel : Bindable, IDisposable
{
    public ReactiveCommand<MouseEventArgs> ImageClickCommand { get; } 
        = new ReactiveCommand<MouseEventArgs>();
}

XAML側の定義

XAML側はイベントトリガーをいつも通りに指定します。「xmlns:bh="http://schemas.microsoft.com/xaml/behaviors"」が「Microsoft.Xaml.Behaviors.dll」に対応した宣言です。

<UserControl x:Class="Samples.Sample"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:bh="http://schemas.microsoft.com/xaml/behaviors"
             xmlns:rp="clr-namespace:Reactive.Bindings.Interactivity;assembly=ReactiveProperty.WPF"
             xmlns:local="clr-namespace:Samples"
             mc:Ignorable="d"
             d:DataContext="{d:DesignInstance {x:Type local:FolderViewModel}}">

    <UserControl.DataContext>
        <local:FolderViewModel/>
    </UserControl.DataContext>

    <Grid>
        <Image Source="assets/icon.png">
            <!-- 以下を追加 -->
            <bh:Interaction.Triggers>
                <bh:EventTrigger EventName="MouseUp">
                    <rp:EventToReactiveCommand Command="{Binding ImageClickCommand}"/>
                </bh:EventTrigger>
            </bh:Interaction.Triggers>
        </Image>
    </Grid>
</UserControl>

以下を xmlns に追記

xmlns:bh="http://schemas.microsoft.com/xaml/behaviors"
xmlns:rp="clr-namespace:Reactive.Bindings.Interactivity;assembly=ReactiveProperty.WPF"

バインドしたいイベントの名前は IDE のインテリセンスには出てこないのでリファレンスを見るなどして正しい文字列を設定しましょう。

<bh:Interaction.Triggers>
    <bh:EventTrigger EventName="MouseUp">
        <rp:EventToReactiveCommand Command="{Binding ImageClickCommand}"/>
    </bh:EventTrigger>
</bh:Interaction.Triggers>

以上です。