質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.25%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 3,667

k-hi

score 21

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;
                }
            );
        }
    }
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

こんにちは。

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などにすることでしょう。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/08/15 14:43

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

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.25%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる