WPFの複数のwindowsで共通のheaderを作りたいです。

Question

###WPFのStyleにimageを使いたいです。
こんにちは。

Windows10, Visual Studio 2015 community, WPFで複数の画面をもつシステムを作っています。
windowsで共通のheaderを作りたいと考えています。

https://code.msdn.microsoft.com/windowsdesktop/WPFWindow-c471ff75
を参考に作業しています。
NuGetで、ReactivePropertyを追加しています。

###発生している課題
button, textblockは表示できますがimageを表示できません。
コードは次のようなものです。
Bindingが初めてで、コードが複雑で解析できません。
アドバイスよろしくお願いします。

###該当のソースコード

<Application.Resources>
        <Style x:Key="CommonWindowStyle" TargetType="Window">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Window">
                        <Grid Margin="5">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <!-- ヘッダー -->
                            <Grid Grid.Row="0">
                                <Grid.Background>
                                    <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                                        <GradientStop Color="#FFC129FF" Offset="0" />
                                        <GradientStop Color="#FF800012" Offset="1" />
                                    </LinearGradientBrush>
                                </Grid.Background>
                                <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Bottom">
                                    <TextBlock 
                                                Text="testprogram" 
                                                Foreground="White" 
                                                FontWeight="Bold" 
                                                FontSize="24" 
                                                Margin="5"/>
                                    <Button MinWidth="50" Content="{Binding CommonAButton.Label.Value}" Command="{Binding CommonAButton.Command}" Margin="2.5"/>
                                    <Image MinWidth="50" Source="{Binding CommonIconImage}" Margin="2.5" Stretch="Uniform"/>
                                    <Rectangle MinWidth="50" Fill="{Binding CommonRectangle}" Margin="2.5"/>
                                    <TextBlock MinWidth="200" Text="{Binding CommonName.Text}" Margin="2.5" Foreground="White" FontSize="20"/>
                                </StackPanel>
                            </Grid>
                            <!-- コンテンツ部分 -->
                            <Border Grid.Row="1" Background="{TemplateBinding Background}">
                                <ContentPresenter />
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
</Application.Resources>

using Reactive.Bindings;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;

namespace test.ViewModels{
	/// <summary>
	/// CommonWindowStyleを適用したWindowのViewModelの基本クラス。
	/// </summary>
	public abstract class WindowViewModelBase
    {
        /// <summary>
        /// 左側のボタン
        /// </summary>
        public ButtonViewModel CommonAButton { get; set; }

		/// <summary>
		/// IconImage
		/// </summary>
		public Image CommonIconImage { get; set; }

		public Rectangle CommonRectangle { get; set; }

		/// <summary>
		/// CommonName
		/// </summary>
		public TextBlock CommonName { get; set; }

		protected WindowViewModelBase(ButtonViewModel a = null, ButtonViewModel b = null)
        {
            this.CommonAButton = a ?? new ButtonViewModel();

			this.CommonIconImage = new Image();
			this.CommonRectangle = new Rectangle();
			this.CommonRectangle.Fill = Brushes.Red;
			this.CommonPatientNameID = new TextBlock();
        }
    }

	/// <summary>
	/// 画面に表示するボタンを表す
	/// </summary>
	public class ButtonViewModel {
        /// <summary>
        /// ボタンに表示するテキスト
        /// </summary>
        public ReactiveProperty<string> Label { get; private set; }
        /// <summary>
        /// ボタンを押した時に実行するコマンド
        /// </summary>
        public ReactiveCommand Command { get; private set; }

        public ButtonViewModel(ReactiveProperty<string> label = null, ReactiveCommand command = null)
        {
            this.Label = label ?? new ReactiveProperty<string>();
            this.Command = command ?? new ReactiveCommand();
        }
    }
}

<Window x:Class="test.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:test"
        xmlns:vm="clr-namespace:test.ViewModels"
        mc:Ignorable="d"
        Title="test" Height="700" Width="1050"
        Style="{Binding Source={StaticResource CommonWindowStyle}}">
    <Window.DataContext>
        <vm:MainViewModel />
    </Window.DataContext>

using System;
using System.Windows;
using Reactive.Bindings;
using System.Windows.Controls;
using System.Windows.Media.Imaging;
using System.IO;
using System.Windows.Shapes;
using System.Windows.Media;

namespace test.ViewModels {
	public partial class MainWindowViewModel : WindowViewModelBase {
		/// <summary>
		/// 画面内に表示するテキスト。ヘッダーの左側のボタンを押した時に変更になる
		/// </summary>
		public ReactiveProperty<string> AText { get; private set; }

		public ReactiveProperty<Image> IconImage { get; private set; }

		public ReactiveProperty<Rectangle> RectangleBox { get; private set; }

		public ReactiveProperty<string> NameID { get; private set; }


		public MainWindowViewModel() : base() {
			// プロパティの初期化
			this.AText = new ReactiveProperty<string>("A count : 0");

			string photo = @"C:\abc01.jpg";
			if (File.Exists(photo)) {
			Uri uri = new Uri(photo, UriKind.RelativeOrAbsolute);

			//ビットマップのイメージインスタンス
			BitmapImage source = new BitmapImage(uri);
				this.IconImage = new ReactiveProperty<Image>();
				this.CommonIconImage.Source = source;
			}
			this.RectangleBox = new ReactiveProperty<Rectangle>();
			this.CommonRectangle.Fill = Brushes.Blue;

			this.NameID = new ReactiveProperty<string>();

			// 共通部分にあるobjectのcontentsを指定する
			this.CommonAButton.Label.Value = "backhome";

			this.CommonName.Text = "testname";

			// 共通部分にあるボタンを押したときの処理を定義
			int aCount = 0;
			this.CommonAButton.Command.Subscribe(_ => {
				this.AText.Value = "A count : " + ++aCount;
			}
			);
			int bCount = 0;
			this.CommonBButton.Command.Subscribe(_ => {
				this.BText.Value = "B count : " + ++bCount;
				}
			);
		}
	}
}

Answer 1

こんにちは。

Application.ResourceでのImageのSourceにバインドしているのでCommonIconImageがImage型で定義されています。
ImageのSourceにControl.Imageをバインドしているので表示されていないのでしょう。

取り急ぎは以下のようにSourceを渡すことで解決できます。

<Image MinWidth="50" Source="{Binding CommonIconImage.Source}" Margin="2.5" Stretch="Uniform"/>

もしくはCommonIconImageをImageSource派生の型かURIなどにすることでしょう。

Comments

[k-hi]

こんにちは。なるほど。
App.xamlで、
<Image MinWidth="50" Source="{Binding CommonIconImage}" Margin="2.5" Stretch="Uniform"/>
としたので、Sourceなんですね。これで表示できました。ありがとうございます。

CommonIconImageを
public ImageSource CommonIconImage { get; set; }
にはしてみたのですが、それでは表示できませんでした。