Click Event for WPF Image

Question

I am migrating my old WinForms Desktop application to WPF. The application GUI used WinForm PictureBox to display images. The old WinForms application also had OnClick event OnClick for all PictureBoxes. Clicking on the images really did something important. Now, when I re-do the user interface in WPF, I find that this , which is the equivalent for the WinForm PictureBox control, is WPF Image . However, when I opened the properties panel for WPF Image , there was no click event to handle, so I could not write a click event handler, as in WinForms.

So, can you tell me what can be done to achieve the equivalent of WinForm PictureBox and push event in WPF? I want to display images and handle the case every time the user clicks the image.

Answer 1

In WPF, each control has its own default template (what it looks like), but you can easily change these templates and make the controls look the way you want. This facilitates the choice of control for its functionality and makes it look like what you want. In your case, you want Click to select a Button and change its 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> 

With the above XAML Image will be your Button

EDIT

Below you can find a simplified version of how to bind / modify Image.Source , where everything is done in MainWindow, but basically in WPF you do not control the controls, but bind their properties using Binding and manage these properties. Usually you will create a dedicated class (ViewModel). Your class needs to implement the INofityPropertyChanged interface, the DataContext must be set appropriately, and the related property should raise the INofityPropertyChanged.PropertyChanged event every time its value changes (that you notify the user interface to update the value)

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

and in XAML:

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

Answer 2

Just add the MouseDown event to your image like this:

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

which should add this to your code for

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

Answer 3

Maybe MouseLeftButtonDown would be more appropriate.

Answer 4

For full interactivity, I suggest using the CJK method with the Cursor property set to Hand.

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