Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

I am porting an old WinForms Desktop Application to WPF. The app GUI used WinForm's PictureBox to display images. The old WinForms app also had OnClick event handlers for all the PictureBoxes. Clicking the images actually did something important. Now that I am re-doing the UI in WPF, I found out as per this that the equivalent for WinForm's PictureBox control is WPF's Image . However, when I opened up the properties panel for the WPF Image , there was no click event to be handled, so I couldn't write a click event handler like I had in WinForms.

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

Just add a MouseDown (or MouseLeftButtonDown as suggested) event to your image like so

<Image x:Name=aPicture Source="mypic.jpg" MouseDown="aPicture_MouseDown"/>
// or
<Image x:Name=aPicture Source="mypic.jpg" MouseLeftButtonDown="aPicture_MouseDown"/>
which should add this to your code behind
private void aPicture_MouseDown(object sender, MouseEventArgs e)
   //do something here
                I'd suggest MouseLeftButtonDown is a closer equivalent, but this absolutely should be the accepted answer.
– Psiloc
                Oct 24, 2018 at 10:16
In WPF each control has its default template (how it looks) but you can easily change these templates and make controls look like you want. This makes it easier to pick control by its functionality and make it look like you want. In your case you want Click so you choose 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
Below you can find simplified version of how to bind/change Image.Source where everything is done in MainWindow but basically in WPF you don't manipulate controls but bind their properties using Binding and manipulate these properties. Normally you would create dedicated class (ViewModel). Your class need to implement INofityPropertyChanged interface, DataContext needs to be set accordingly and bound property needs to raise INofityPropertyChanged.PropertyChanged event each time its value is changed (that's how you notify UI to refresh value)
public partial class MainWindow : Window, INotifyPropertyChanged
   public MainWindow()
      InitializeComponent();
      DataContext = this;
   private ImageSource _myImageSource;
   public ImageSource MyImageSource
      get { return _myImageSource; }
          _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 the XAML:
<Button Style="{StaticResource ImageButtonStyle}" Click="ImageButton_Click" Width="..." Height="...">
    <Image Source="{Binding MyImageSource}"/>
</Button>
                Also, since he is using WPF, it might be better if he uses MVVM and instead of the Click event uses a Command. But that depends on what he wants to achieve. He said the click did something important, so it is possible that the Command could be a better fit.
– Dzyann
                May 11, 2015 at 18:56
                So, we are taking a button and making it look like an image. Can you please show me how you would instantiate buttons of this style? Also, is it possible to set the image for the image-button from the handler of another button instead of XAML?
– The Vivandiere
                May 11, 2015 at 19:56
                How use the button is already in my XAML. As for how to change image source it's also different then WinForms. You don't operate on controls in WPF. You create property with your image source (for example of ImageSource type), bind it to Image.Source using Binding and then you manipulate that property and not the control.
– dkozl
                May 11, 2015 at 20:06
For a complete clickable experience, 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"/>
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.