WPF 图像的单击事件

Posted 2023-04-01

【中文标题】WPF 图像的单击事件

【英文标题】：Click Event for WPF Image

【发布时间】：2015-07-22 08:13:53

【问题描述】：

我正在将旧的 WinForms 桌面应用程序移植到 WPF。应用程序 GUI 使用 WinForm 的 PictureBox 来显示图像。旧的 WinForms 应用程序还具有所有 PictureBoxes 的 OnClick 事件处理程序。单击图像实际上做了一些重要的事情。现在我在 WPF 中重新做 UI，我发现根据 this，WinForm 的 PictureBox 控件的等效项是 WPF 的 Image。但是，当我打开 WPF Image 的属性面板时，没有要处理的 click 事件，所以我无法像在 WinForms 中那样编写单击事件处理程序。

那么，你能告诉我可以做些什么来实现相当于 WinForm 的 PictureBox 和它在 WPF 中的点击事件吗？我想在每次用户单击图像时显示图像并处理案例。

【参考方案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

【讨论】：

我建议 MouseLeftButtonDown 更接近，但这绝对应该是公认的答案。

【参考方案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>

【讨论】：

另外，由于他使用的是 WPF，如果他使用 MVVM 而不是 Click 事件使用命令可能会更好。但这取决于他想要达到的目标。他说点击做了一些重要的事情，所以命令可能更适合。

所以，我们正在制作一个按钮，让它看起来像一个图像。你能告诉我你将如何实例化这种风格的按钮吗？另外，是否可以从另一个按钮的处理程序而不是 XAML 为图像按钮设置图像？

如何使用该按钮已在我的 XAML 中。至于如何更改图像源，它也与 WinForms 不同。您不对 WPF 中的控件进行操作。您使用图像源创建属性（例如ImageSource 类型），使用Binding 将其绑定到Image.Source，然后操作该属性而不是控件。

@StraightLine 检查我的编辑，例如Image.Source 绑定

【参考方案3】：

为了获得完整的可点击体验，我建议使用 CJK 方法并将 Cursor 属性设置为 Hand。

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

【讨论】：

这个比上面的方法简单多了！而且效果很好，谢谢。

【参考方案4】：

也许 MouseLeftButtonDown 会更合适。