Click Event For WPF Image


Answer :

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 } 

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> 

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

Comments

Popular posts from this blog

Chemistry - Bond Angles In NH3 And NCl3

Are Regular VACUUM ANALYZE Still Recommended Under 9.1?

Can Feynman Diagrams Be Used To Represent Any Perturbation Theory?