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
Post a Comment