【C#】【WPF】ReactivePropertyでImageのSourceプロパティをバインドして動的に画像を切り替える方法が知りたい

Question

画面にImageコントロール、Buttonコントロールを2個(ボタン1,ボタン2と表記)を配置しております。
初期表示時点ではImageコントロールにC:\hoge.jpgを表示して、
ボタン2が押されたらImageの中身をC:\hoge2.jpgに切り替え、
ボタン1が押されたらImageの中身をC:\hoge.jpgに戻すという処理を行いたいです。

そこでReactivePropertyを利用させていただいてボタンのCommandを使って切り替えたく
以下のようにソース(xaml、MainWindow.cs、MainWindowViewModel.cs）を書きました。

<Window x:Class="ImageChange.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:ImageChange"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Image Source="{Binding rp_main.Value}"></Image>
        <Button Grid.Row="1"
                Command="{Binding changecommand}"
                CommandParameter="1">ボタン1
        </Button>
        <Button Grid.Row="2"
                Command="{Binding changecommand}"
                CommandParameter="2">ボタン2
        </Button>
        
    </Grid>
</Window>

    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = new MainWindowViewModel();
        }
    }

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Reactive.Bindings;
using System.Windows;
using System.Windows.Media.Imaging;

namespace ImageChange
{
    class MainWindowViewModel
    {
        public ReactiveProperty<BitmapImage> rp_main { set; get; }
        public ReactiveProperty<BitmapImage> rp_image1 { set; get; }
        public ReactiveProperty<BitmapImage> rp_image2 { set; get; }
        public ReactiveCommand<string> changecommand { set; get; } = new ReactiveCommand<string>();

        public MainWindowViewModel()
        {
            BitmapImage image1 = new BitmapImage(new Uri(@"C:\hoge.jpg"));
            BitmapImage image2 = new BitmapImage(new Uri(@"C:\hoge2.jpg"));
            rp_image1 = new ReactiveProperty<BitmapImage>(image1);
            rp_image2 = new ReactiveProperty<BitmapImage>(image2);
            rp_main = rp_image2;

            changecommand.Subscribe(x =>
            {
                if (x == "1")
                {
                    rp_main = rp_image1;
                    MessageBox.Show(rp_main.ToString());
                }
                else
                {
                    rp_main = rp_image2;
                    MessageBox.Show(rp_main.ToString());
                }
            }
            );
        }
    }
}

上記のようにReactiveProperty<BitmapImage>型のrp_mainの中身を、
ボタン押下時のchangecommandによってrp_image1、rp_image2に置き換えています。
しかし、画面上のImageは変化がありません。
MessageBox.Show(rp_main.ToString());によって
rp_mainの中身がボタン押下によって変化していることは
確認できたのですが、画面上に変化が無いのはなぜなのでしょうか？

Answer 1

こんにちは！
MainWindowViewModel内でrp_mainにrp_image1またはrp_image2を代入していますが、
rp_main**.Valueにrp_image1.Valueまたはrp_image2.Value**を代入するようにすればよいのではないでしょうか？

Comments

[galmacher]

ご回答ありがとうございます！
おっしゃるように.Valueをつけることで画像が切り替わりました。数時間悩んだのがバカみたいです…。
しかし、以下の順に操作すると、一回は画像が切り替わるのですが、「×」のところで切り替わりませんでした。何か原因にお心当たりございますでしょうか。
〇hoge2.jpg初期表示
〇ボタン1をクリックしてhoge.jpgに切り替え
×ボタン2をクリックしてhoge2.jpgにまた戻す

[mikupedia]

elseブロックの中身に誤りはありませんか？
念のためelseブロックのソースコードを提示してもらえますか？

[gaya-K]

横から失礼します。
rp_main = rp_image2;
が悪さしてます。
そもそも rp_image1,2 は RP である必要がないので、ただの BitmapImage にしましょう。

[mikupedia]

それが正解っぽいですね

rp_main = rp_image2
<ボタン1押下>
rp_main.Value = rp_image1.Value
→ 実際には rp_image2.Value = rp_image1.Value　と同じ
<ボタン2押下>
rp_main.Value = rp_image2.Value
→ 実際にはrp_image2.Valueは rp_image1のValueの値になっているので画像表示がhoge.jpgのままとなる

[galmacher]

> お二方
ご回答ありがとうございました！！大変勉強になりました。