WPF图像的点击事件

Question

我正在将一个旧的 WinForms 桌面应用程序移植到 WPF。该应用程序界面使用 WinForm 的 PictureBox 来显示图像。旧的 WinForms 应用程序还为所有 PictureBox 添加了 OnClick 事件处理程序。单击图像实际上会执行一些重要操作。现在，我正在重新设计 WPF 中的 UI，根据这里所述，WinForm 的 PictureBox 控件的等效控件是 WPF 的 Image。然而，当我打开 WPF Image 的属性面板时，并没有可以处理的 click 事件，所以我无法编写像在 WinForms 中那样的 click 事件处理程序。

那么，请问如何在 WPF 中实现与 WinForm 的 PictureBox 和其 click 事件等效的功能？我想显示图像并处理用户每次单击图像的情况。

- The Vivandiere

Answer 1

只需像下面这样在图像上添加MouseDown事件（或按照建议使用MouseLeftButtonDown）

<Image x:Name=aPicture Source="mypic.jpg" MouseDown="aPicture_MouseDown"/>
// or
<Image x:Name=aPicture Source="mypic.jpg" MouseLeftButtonDown="aPicture_MouseDown"/>

这应该添加到您的代码后面

private void aPicture_MouseDown(object sender, MouseEventArgs e)
{
   //do something here
}

- CJK

---

我建议使用"MouseLeftButtonDown"更为贴切，但这个答案绝对应该被接受。 - Psiloc

这与标准的“点击”事件不相同。在Windows原生控件中，_Click_事件（和_MouseClick_事件）默认在_MouseUp_之前触发，只有在相应的_MouseDown_事件发生在同一控件上时才触发。这允许您在点击过程中改变主意并拖动鼠标取消操作，或者将鼠标移回控件上以提交操作。 此外，我们还需要考虑除左键之外的其他按钮。 - undefined

Answer 2

在 WPF 中，每个控件都有其默认模板（外观），但你可以轻松地更改这些模板并使控件看起来符合你的要求。这使得按照功能选择控件并使其外观符合你的要求变得更加容易。在你的情况下，你想要 Click，所以你选择 Button 并更改其 Template

<Window ...>
    <Window.Resources>
        <Style TargetType="{x:Type Button}" x:Key="ImageButtonStyle">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <ContentPresenter/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Button Style="{StaticResource ImageButtonStyle}" Click="ImageButton_Click">
        <Image Source="..."/>
    </Button>
</Window>

通过上述XAML，Image将成为您的Button

编辑

在下面，您可以找到如何绑定/更改Image.Source的简化版本，其中所有内容都在MainWindow中完成，但基本上在WPF中，您不会操纵控件，而是使用Binding绑定它们的属性并操作这些属性。通常，您需要创建专用类（ViewModel）。您的类需要实现INofityPropertyChanged接口，DataContext需要相应地设置，并且绑定的属性需要在每次更改其值时触发INofityPropertyChanged.PropertyChanged事件（这样才能通知UI刷新值）。

public partial class MainWindow : Window, INotifyPropertyChanged
{
   public MainWindow()
   {
      InitializeComponent();
      DataContext = this;
   }

   private ImageSource _myImageSource;

   public ImageSource MyImageSource
   {
      get { return _myImageSource; }
      set
      {
          _myImageSource = value;
          OnPropertyChanged("MyImageSource");
      }
   }

   private void ImageButton_Click(object sender, RoutedEventArgs e)
   {
       this.MyImageSource = new BitmapImage(...); //you change source of the Image
   }

   public event PropertyChangedEventHandler PropertyChanged;

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

并且在 XAML 中：

<Button Style="{StaticResource ImageButtonStyle}" Click="ImageButton_Click" Width="..." Height="...">
    <Image Source="{Binding MyImageSource}"/>
</Button>

- dkozl

---

另外，由于他正在使用WPF，如果他使用MVVM并且使用命令而不是Click事件可能会更好。但这取决于他想要实现什么。他说点击执行了一些重要操作，因此命令可能更适合。 - Dzyann

所以，我们将创建一个按钮，并将其样式设置为图像。你能展示一下如何实例化这种风格的按钮吗？另外，是否可能在另一个按钮的处理程序中设置图像按钮的图像，而不是在XAML中设置？ - The Vivandiere

如何使用已经在我的XAML中的按钮。至于如何更改图像源，它与WinForms也不同。在WPF中，您不会操作控件。您需要创建一个属性来存储您的图像源（例如ImageSource类型），使用Binding将其绑定到Image.Source，然后您可以操纵该属性而不是控件本身。 - dkozl

@StraightLine，请查看我的编辑，其中包含“Image.Source”绑定的示例。 - dkozl

Answer 3

为了完整的可点击体验，建议使用CJK方法，并将光标属性设置为手形。

<Image x:Name="btnSearch" Source="/Images/search/search.png" MouseDown="btnSearch_MouseDown" Cursor="Hand"/>

- AntoMotos

---

这比上面的方法简单多了！而且它运行得很好，谢谢。 - Jeffrey Holmes

只是一个警告：在_MouseDown_上执行操作与Windows本机按钮通常的工作方式不一致。它们在_MouseUp_时触发，只有在相应的_MouseDown_事件发生在同一个控件上时才会触发。这样可以让您在点击过程中改变主意，并将鼠标拖离以取消操作，或者将鼠标放回控件上以提交操作。 - undefined

Answer 4

也许MouseLeftButtonDown更加合适。

- AngelBlueSky