CODEWITHSUNDEEP
c#.netwpfwinformsevents
The Vivandiere
The Vivandiere

Reputation: 3191

Click Event for WPF Image

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.

Upvotes: 18

Views: 71222

Answers (4)

CJK
CJK

Reputation: 990

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
}

Upvotes: 46

AntoMotos
AntoMotos

Reputation: 41

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"/>

Upvotes: 4

AngelBlueSky
AngelBlueSky

Reputation: 575

Maybe MouseLeftButtonDown would be more appropriate.

Upvotes: 1

dkozl
dkozl

Reputation: 33364

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

EDIT

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; }
      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 the XAML:

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

Upvotes: 18

Related Questions