【C#】【WPF】【XAML】画像をボタンのプロパティ値によって効率的に切り替える方法を知りたい

Question

ボタンコントロールの中に画像を配置しており、
ボタンのプロパティに応じて画像ファイルを切り替えたいと思っております。
一旦下記のようにして実現することができました。

<Button x:Name="button1">
    <Image>
        <Image.Style>
            <Style TargetType="{x:Type Image}">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding IsMouseOver, ElementName=button1}" Value="True">
                        <Setter Property="Source" Value="C:\1.png" />
                    </DataTrigger>
                    <DataTrigger Binding="{Binding IsMouseOver, ElementName=button1}" Value="False">
                        <Setter Property="Source" Value="C:\2.jpg" />
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Image.Style>
    </Image>
</Button>

しかし、ボタンの数が多いため、ボタンごとにこのように指定していると行数がかさんで見にくいです。
また、上記例ではIsMouseOverだけですが、実際はIsEnabled等、他のプロパティによって別の画像に切り替える必要があります。
ボタン2には3.jpgと4.jpg、ボタン3には5.jpg、6.jpg…という風にボタンごとに使用する画像も違います。

以下2点、教えていただきたいです。
・同じような記述を省略できるような効率的な記述方法はあるか。
・そもそもDataTriggerで切り替える方法以外にいい方法があるか。

Answer 1

方法は色々あると思いますが、私だったらカスタムコントロールで対応します。

WPF : Re-usable template for image buttons?
Why does a custom control “ImageButton” not display it's image?

wpf image button custom control　とかで検索すれば他にも色々あると思ます。

Comments

[galmacher]

ご回答ありがとうございます。
URL参照させていただきます。

Answer 2

添付プロパティと添付ビヘイビアを解説してみる

ボタンには XAML でデフォルトの画像を指定しておきます。
そしてホバー中だけ画像を切り替える添付ビヘイビアを作り、添付プロパティでその画像を指定するのがスマートだと思います。

Comments

[galmacher]

ご回答ありがとうございます。
「ホバー中だけ画像を切り替える添付ビヘイビアを作り」という部分について、添付ビヘイビアの理解が浅く、的外れな質問かもしれませんが、
添付ビヘイビアは添付プロパティとセット（添付プロパティの値が変わったときに添付ビヘイビアが何かしらの処理をする）という理解です。
IsMouseOverやIsEnabledなどのようにButton標準のプロパティ（添付プロパティでないプロパティ）に対して、添付プロパティを定義できるのでしょうか。

[Zuishin]

リンク先に書いてあるように、添付プロパティの値が変わった時(初期化された時)に別のイベントのイベントハンドラを登録する処理を入れればいいと思います。

> さらに変更コールバック関数内でイベント登録することによってイベントに対する挙動を設定できるのでよりビヘイビアっぽくなります。

[mikupedia]

横から失礼します。
まずは単純にマウスオーバー時のときなどそれぞれ状態別に添付プロパティを作ってButton側でパスを設定できるようにしておいてimageのSourceでButtonに設定された添付プロパティをバインドさせておくだけでよいのではないでしょうか？

[galmacher]

Zuishinさん、mikupediaさん
ありがとうございます。
それっぽいものを作ることができました。

Answer 3

１．リソースを使う
http://www.atmarkit.co.jp/ait/articles/1009/07/news096.html
２．ユーザコントロールを作る
https://qiita.com/soi/items/12ceea4efcf31c1a7b93

あと、大量に配置するなら、データバンディングで作るといいよ。

Comments

[galmacher]

ご回答ありがとうございます。追加で色々お伺いして恐縮ですが、気が向いたらご回答いただけると幸いです。

■リソースを使うについて
上記例だと、Imageコントロールの <Image.Style>の内容をリソースに定義するのだと思いますが、その場合、ボタンによって3.jpgを使ったり、4.jpgを使ったり…という対応はどのようにすればよいでしょうか。

■ユーザコントロールを作る　について
ありがとうございます。検討してみます。

■データバインディング　について
上記例だとImageのSourceプロパティ、ButtonのIsMouseOverプロパティをバインドして、IsMouseOverが変わればSourceも変える、というイメージでしょうか。

[kiichi54321]

WPFの肝である、DataContextを理解しよう。