wpfでマウスホバー時の画像切り替え

Question

wpfでマウスオーバーしたさいに画像が切り替わるようにしたいのですが方法がわかりません。
色を変えることは出来ますが、マウスオーバー時に画像ごと切り替えて行いたいのですが方法がわかりません。

<Grid>
    <ToolbarPanel DockPanel.dock="Top">
       <Toolbar>
            <ToggleButton content="ぼたん" name="toggleButton2" />
        </Toolbar>
    </ToolbarPanel>
    <ToggleButton content="ぼたん" name="toggleButton1" height="23" width="90" horizontalalignment="Left" margin="79,43,0,0" verticalalignment="Top" />
</Grid>

どなたか、上記のToggleButtonにマウスホバーした際に画像を差し替える事は可能でしょうか？
ご教授よろしくお願いいたします。

追加

わかりにくくて申し訳ございません。

wpfで簡単なツールを作成しており、
wpf上のトグルボタンにマウスオーバーや押下時の画像を用意して
アクションごとに画像が切り替わるようにしたいです。
以前の質問で、画像を挿入する事は
Image brushを使用して画像の置換えには成功したのですが、
https://teratail.com/questions/158161

コレだと該当のスイッチを押した時反応がなく動作しているかわかりません。
そこで、ボタンを押しているときに画像を切り替えようtしたのですが上手くいきませんでした。

参考として、
http://daria-sieben.hatenablog.com/entry/2016/09/25/104707
個々とかをみたのですがいまいちわからず困っております。
どうかヒント、もしくは解決方法をご教授よろしくお願いいたします。

Comments

[gaya-K]

ツールチップの事ではないですよね？ 画像差し替えと言いっても差し替える元の画像が見当たらないので、やりたいことがイメージできない状態です。

[zumizumi]

わかりにくくて申し訳ございません。修正をしましたので、ご確認の程よろしくお願いいたします。

[Gurz1019_MP]

ボタンのコンテンツを画像にしたいのですか？　それともボタンの背景を画像にしたいのですか？

Answer 1

<Window x:Class="ToggleButtonSample.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:ToggleButtonSample"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <ToggleButton Name="ToggluButtonSample"
        Height="16"
        MaxWidth="250"
        Margin="15,6,30,1"
        VerticalAlignment="Top"
        Background="Transparent"
        Cursor="Hand"
        Visibility="Visible">
            <ToggleButton.Template>
                <ControlTemplate TargetType="ToggleButton">
                    <Image Name="image" Source="Resources/img1.png" Stretch="None" />
                    <ControlTemplate.Triggers>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsMouseOver" Value="True"/>
                            </MultiTrigger.Conditions>
                            <Setter TargetName="image" Property="Source" Value="Resources/img2.png"/>
                        </MultiTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </ToggleButton.Template>
        </ToggleButton>
    </Grid>
</Window>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace ToggleButtonSample
{
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }
}

動かし方：
ツールバー → デバッグ → XXXXのプロパティ → リソース に赤い画像と青い画像を
ドラッグ&ドロップ（画像保存時に赤い画像にimg1, 青い画像にimg2と名前をつける）

ソリューションエクスプローラーに Resources フォルダが追加されるので、中にある画像ファイルをクリック

ビルドアクション に コンテンツ 、 出力ディレクトリ に 常にコピーする を設定してコンパイル

マウスオーバーで赤い画像と青い画像が切り替わるはず

参考：
ToggleButtonに画像を設定したときの参考
how to make a image button that change the image when mouse over button WPF?

マウスオーバー時に画像を切り替えたときの参考
Toggle button with conditional mouse over effect

Comments

[zumizumi]

ご回答ありがとうございます。
動きが期待どうりになりました。

Answer 2

<Trigger Property="IsMouseOver" Value="True">

を使用するところまではわかったのですが、
複数のボタンの画像を使用する場合はマウスオーバー時に設定を行えば良いと思いますが、
画像の参照がわかりません。