How to bind (Relative or absolute) Image,MouseEnter and MouseLeave events each button in UI using MVVM?

Question

I want to handle Mouse Events using EventTriggers and InvokeCommandActions as I mentioned below(if possible)

View.xaml:

<UserControl
xmlns:interact="clrnamespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"..="">
  <Window.DataContext>
    <VM:buttonimageviewmodel/>
  </Window.DataContext>
  <Grid>
    <DockPanel>
      <Button  Grid.Row="0" Grid.Column="1"  Width="200" Height="150" Command={"Binding" btn1=""}" CommandParameter="btn1=""">
        <Button.Content>
          <DockPanel  Margin="5">
            <DockPanel DockPanel.Dock="Top">
              <intr:Interaction.Triggers>
                <intr:EventTrigger EventName="MouseEnter">
                  <intr:InvokeCommandAction Command="{Binding MouseEnterCommand}" CommandParameter="MouseEnter"/>
                </intr:EventTrigger>
                <intr:EventTrigger EventName="MouseLeave">
                  <intr:InvokeCommandAction Command="{Binding MouseLeaveCommand}"  CommandParameter="MouseLeave" />
                </intr:EventTrigger>
              </intr:Interaction.Triggers>
              <Image Margin="5"  Source= "{Binding FirstImageSource}" Width="160"></Image>
            </DockPanel>
            <TextBlock DockPanel.Dock="Bottom" HorizontalAlignment="Center"  Text="SetParameters" FontSize="18" ></TextBlock>
          </DockPanel>
        </Button.Content  >
      </Button>
      <Button  Grid.Row="0" Grid.Column="2" Width="200" Height="150" Command="{Binding   btn2}" CommandParameter="btn2" >
        <Button.Content>
          <DockPanel  Margin="5">
            <DockPanel DockPanel.Dock="Top">
              <intr:Interaction.Triggers>
                <intr:EventTrigger EventName="MouseEnter">
                  <intr:InvokeCommandAction Command="{Binding  MouseEnterCommand}" CommandParameter="MouseEnter"/>
                </intr:EventTrigger>
                <intr:EventTrigger EventName="MouseLeave">
                  <intr:InvokeCommandAction Command="{Binding MouseLeaveCommand}"  CommandParameter="MouseLeave" />
                </intr:EventTrigger>
              </intr:Interaction.Triggers>
              <Image Margin="5"  Source= "{Binding SecondImageSource}"   Width="160"     Stretch="None"></Image>
            </DockPanel>
            <TextBlock DockPanel.Dock="Bottom" HorizontalAlignment="Center"  Text="CopyToController" FontSize="18" ></TextBlock>
          </DockPanel>
        </Button.Content>
      </Button>
      <Button  Grid.Row="0" Grid.Column="3" Width="200" Height="150" Command="{Binding   btn3}" CommandParameter="btn3" >
        <Button.Content>
          <DockPanel  Margin="5">
            <DockPanel DockPanel.Dock="Top">
              <intr:Interaction.Triggers>
                <intr:EventTrigger EventName="MouseEnter">
                  <intr:InvokeCommandAction Command="{Binding  MouseEnterCommand}"  CommandParameter="MouseEnter"/>
                </intr:EventTrigger>
                <intr:EventTrigger EventName="MouseLeave">
                  <intr:InvokeCommandAction Command="{Binding MouseLeaveCommand}"  CommandParameter="MouseLeave" />
                </intr:EventTrigger>
              </intr:Interaction.Triggers>
              <Image Margin="5"  Source= "{Binding ThirdImageSource}" Width="160"></Image>
            </DockPanel>
            <TextBlock DockPanel.Dock="Bottom" HorizontalAlignment="Center"  Text="CopyToController" FontSize="18"></TextBlock>
          </DockPanel>
        </Button.Content>
      </Button>
    </DockPanel>
  </Grid>
</UserControl>

ViewModel.cs:

namespace buttonimage.ViewModel
{
    public class buttonimageviewmodel : INotifyPropertyChanged
    {
        private ImageSource __firstImageSource;
        public ImageSource FirstImageSource
        {
            get
            {
                return __firstImageSource;
            }

            set
            {
                if (value != null)
                {
                    __firstImageSource = value;
                    OnPropertyChanged("FirstImageSource ");
                }
            }
        }

        private ImageSource _secondImageSource;
        public ImageSource SecondImageSource
        {
            get
            {
                return _secondImageSource;
            }

            set
            {
                if (value != null)
                {
                    _secondImageSource;
                    = value;
                    OnPropertyChanged("SecondImageSource ");
                }
            }
        }

        private ImageSource _thirdImageSource;
        public ImageSource ThirdImageSource
        {
            get
            {
                return _thirdImageSource;
            }

            set
            {
                if (value != null)
                {
                    _thirdImageSource;
                    = value;
                    OnPropertyChanged(" ThirdImageSource ");
                }
            }
        }

        public ICommand MouseEnterCommand
        {
            get
            {
                return new RelayCommand(a => this.Executemethod(), p => Canexecutemethod());
            }
        }

        public bool Canexecutemethod()
        {
            return true;
        }

        public void Executemethod()
        {
            Console.WriteLine(DateTime.Now.ToLongTimeString());
            string name = (sender as Button).Name;
            switch (name)
            {
                case "btn1":
                    FirstImageSource = new BitmapImage(new Uri(@"C:\Images\firstimgmouseenter.png", UriKind.Relative));
                    break;
                case "btn2":
                    SecondImageSource = new BitmapImage(new Uri(@"C:\Images\secondimgmouseenter.png", UriKind.Relative));
                    break;
                case "btn3":
                    ThirdImageSource = new BitmapImage(new Uri(@"C:\Images\thirdimgmouseenter.png", UriKind.Relative));
                    break;
            }
        }

        public ICommand MouseLeaveCommand
        {
            get
            {
                return new RelayCommand(a => this.Executemethod(a), p => canexecutemethod(p));
            }
        }

        public bool canexecutemethod(object a)
        {
            return true;
        }

        public void executemethod(object p)
        {
            string name = Convert.ToString(p);
            switch (name)
            {
                case "btn1":
                    FirstImageSource = new BitmapImage(new Uri(@"C:\Images\firstimgmousleave.png", UriKind.Relative));
                    break;
                case "btn2":
                    SecondImageSource = new BitmapImage(new Uri(@"C:\Images\secondimgmouseleave.png", UriKind.Relative));
                    break;
                case "btn3":
                    ThirdImageSource = new BitmapImage(new Uri(@"C:\Images\thirdimgmouseleave.png", UriKind.Relative));
                    break;
            }
        }

        private void OnPropertyChanged(string v)
        {
            if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs(v));
        }

        public event PropertyChangedEventHandler PropertyChanged;
    }
}

This is mycode. Please correct me if I'm wrong somewhere.My goal is to bind the button to image and also to events like mouseenter and mouseleave using MVVM(i.e.., No code behind).

My View.xaml.cs should be like this.

namespace buttonimage
{

    public partial class buttonimageview: UserControl
    {
        public buttonimageview()
        {
            InitializeComponent();
        }
    }
}

Help me to achieve this...Thanks in Advance!

Answer 1

If all you want to do is change the Background Image if the mouse is above you button go ahead like this:

<Button>
    <Image>
        <Image.Style>
            <Style TargetType="{x:Type Image}">
                <Setter Property="Source" Value="Images/cam.png"/>
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Source" Value="Images/move.png"/>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Image.Style>
    </Image>
</Button>

Whats happening here? We have a button containing an image that will change if the mouse is above it due to its defined style and a trigger

No code needed no events needed just pure XAML