Как привязать (относительное или абсолютное) события Image, MouseEnter и MouseLeave к каждой кнопке в пользовательском интерфейсе, используя MVVM?

Question

Я хочу обрабатывать события мыши, используя EventTriggers и InvokeCommandActions , как я упоминал ниже (если возможно)

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;
    }
}

Это мой код.Пожалуйста, исправьте меня, если я где-то ошибаюсь. Моя цель - привязать кнопку к изображению, а также к таким событиям, как mouseenter и mouseleave , используя MVVM (т.е. без кода).

Мой View.xaml.cs должен быть таким.

namespace buttonimage
{

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

Помогите мне достичь этого ... Заранее спасибо!

Answer 1

Если все, что вы хотите сделать, это изменить фоновое изображение, если мышь находится над вами, нажмите кнопку, как показано ниже:

<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>

Что здесь происходит?У нас есть кнопка, содержащая изображение, которое изменится, если мышь находится над ним из-за определенного стиля, и триггер

Код не требуется, события не нужны, только чистый XAML