c# - 如何使用 MVVM 绑定(bind)(相对或绝对)Image、MouseEnter 和 MouseLeave 事件 UI 中的每个按钮？

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

这是我的代码。 如果我在某个地方错了，请纠正我。我的目标是将按钮绑定(bind)到图像，以及使用 MVVM 绑定(bind)到 mouseenter 和 mouseleave 等事件(即，后面没有代码)。

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