WPFでデータバインドで画像、図形をMVVM形式で表示したい

前提・実現したいこと

WPFでデータバインドで画像、図形をMVVM形式で表示したい
環境:　Win10 、VS2019、C#
フレームワーク:Prism、ReactiveProperty
現在はMVVM形式以前の最小の構成で画像を表示することも出来ない状態です。
データバインドして画像、図形の表示について参考になるページ等
有りましたらアドバイスをお願いします。

該当のソースコード

MainWindow.xaml

<Window x:Class="DrawCircle.Views.MainWindow"  
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
       xmlns:prism="http://prismlibrary.com/"  
       prism:ViewModelLocator.AutoWireViewModel="True"  
       Title="{Binding Title}" Height="200" Width="300"  
               WindowStartupLocation="CenterScreen">  
   <Grid>  
       <StackPanel>  
           <Image Source="{Binding Bitmap.Value }" Height="180" Width="290" />  
           <ContentControl prism:RegionManager.RegionName="ContentRegion" />  
       </StackPanel>  
   </Grid>  
</Window>

MainWindow.xaml.cs

C#
1using System.Windows;  
2using Reactive.Bindings;  
3using System.Windows.Media.Imaging;  
4using System;  
5namespace DrawCircle.Views  
6{  
7   /// <summary>  
8   /// Interaction logic for MainWindow.xaml  
9   /// </summary>  
10   public partial class MainWindow : Window  
11   {  
12       public ReactiveProperty<BitmapImage> Bitmap{ set; get; }  
13       public ReactiveProperty<BitmapImage> rp_image1 { set; get; }  
14       public MainWindow()  
15       {  
16           InitializeComponent();  
17           BitmapImage image1 = new BitmapImage(new Uri(@"C:\Test\hoge.jpg"));  
18           rp_image1 = new ReactiveProperty<BitmapImage>(image1);  
19           Bitmap = rp_image1;  
20       }  
21   }  
22}

試したこと

ボタン、テキストボックスのデータバインドと比べて画像表示系の
実例が無いため何が問題なのか理解できない状態です。

補足情報（FW/ツールのバージョンなど）

Win10 、VS2019、C#
Prism、ReactiveProperty

juner

2021/07/13 02:44

まず、実行時のBindingエラー等は出力されていませんでしょうか？あと、ViewModelがいないのでこの形だと MVVMではないのでは……？

退会済みユーザー

2021/07/13 04:23

>実行時のBindingエラー等は出力されていませんでしょうか？実行エラーは発生しませんでした。実行してもただＷＰＦの画面が表示されるだけでした。 >MVVMではないのでは……？最終目標はMVVM形式にすることですが、まずは最小構成でイメージコントロールにデータバインディングして画像表示を確認しようとして考えました。

行動規範の内容に同意します

回答1件

ベストアンサー

自己解決しました。
最小構成にこだわりすぎていました。
以下のようにMVVM形式に修正したら画像表示されることを確認しました。
##MainWindow.xaml
変更なし
##MainWindow.xaml.cs
ここの記述をMainWindowViewModel.cs側に移動
using System.Windows;
using Reactive.Bindings;
using System.Windows.Media.Imaging;
using System;
namespace DrawCircle.Views
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
}
}
##MainWindowViewModel.cs側
using Prism.Mvvm;
using System.Windows;
using Reactive.Bindings;
using System.Windows.Media.Imaging;
using System;
namespace DrawCircle.ViewModels
{
public class MainWindowViewModel : BindableBase
{
public ReactiveProperty<BitmapImage> Bitmap { set; get; }
public ReactiveProperty<BitmapImage> rp_image1 { set; get; }
public MainWindowViewModel()
{
BitmapImage image1 = new BitmapImage(new Uri(@"C:\Test\hoge.jpg"));
rp_image1 = new ReactiveProperty<BitmapImage>(image1);
Bitmap = rp_image1;
}
}
}
##実行結果
イメージコントロールに指定した画像が表示されました