Adding on click event on image

Question

I want to add a clickable event where it goes to specific query action
Example: I have this 3 list Image
how to add an action when I click one of that list and it goes to id that i selected and doing something

Mydb Example Database
Query

select * from library where id_movie = (the one that i clicked)

Xaml

<ItemsControl ItemsSource="{Binding Path=Library}" Margin="0,0,2,0">
    <ItemsControl.ItemTemplate>
        <DataTemplate DataType="viewModels:Card">
            <UniformGrid Rows="1" Columns="1">
                <StackPanel Orientation="Horizontal" Width="100" Height="150" Margin="10,25,0,0" >
                    <Image Width="100" Source="{Binding Path=cover}"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="10,0,0,0">
                    <Label Content="{Binding Path=title}"/>
                </StackPanel>
            </UniformGrid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

MyClass

public class VModel
{
    public VModel()
    {
        DataTable dt = new DataTable();
        DataSet ds = new DataSet();
        using (MySqlConnection connection = new MySqlConnection("SERVER=localhost;" + "DATABASE=library;" + "UID=root;" + "PASSWORD=;"))
        {
            MySqlDataAdapter adapter = new MySqlDataAdapter();
            adapter.SelectCommand = new MySqlCommand("Select * from movie_list", connection);
            adapter.Fill(dt);
        }

        Library = dt.DefaultView;
    }

    public DataView Library { get; private set; }
}

Instead of Image use button with image as background, and use command parameter to pass id. Let me know if you need a full answer. — Kaspar, Nov 22 '18 at 08:42
Besides that, you probably want to replace the ItemsControl by a ListBox and execute the query when the SelectedItem changes. — Clemens, Nov 22 '18 at 08:47
@Clemens yes thankyou, but i need an example for using command paramater to pass id like kaspar said — Hans, Nov 22 '18 at 08:48
You don't need that. In fact you would get the Id directly from the SelectedItem object. — Clemens, Nov 22 '18 at 08:49
@Clemens but when i use Listbox instead Itemcontrols, the layout wont automatically change. Using listbox(https://prnt.sc/llhwn6) and using ItemControls(https://prnt.sc/llhwtq) — Hans, Nov 22 '18 at 09:06
Sorry, I wont follow these links. But you should of course use the same ItemsPanel. — Clemens, Nov 22 '18 at 09:07
Possible duplicate of [How to Add OnClick event on Image in WPF Programmatically](https://stackoverflow.com/questions/53414064/how-to-add-onclick-event-on-image-in-wpf-programmatically) — Peregrine, Nov 22 '18 at 09:45

score 1 · Answer 1 · answered Nov 22 '18 at 09:43

I think this is what you're looking for. Each item is a button, which contains an image and a label. Clicking the button calls a command (on the DataContext of the window) with a parameter.

<ItemsControl.ItemTemplate>
    <DataTemplate DataType="viewModels:Card">
        <Button Command="{Binding DataContext.QueryCommand, RelativeSource={RelativeSource FindAncestor, AncestorType=Window}}" 
                CommandParameter="{Binding Path=id}">
            <StackPanel>
                <Image Width="100" Source="{Binding Path=cover}"/>
                <Label Content="{Binding Path=title}" HorizontalContentAlignment="Center"/>
            <StackPanel>
        </Button>
    </DataTemplate>
</ItemsControl.ItemTemplate>

score 0 · Accepted Answer · edited Nov 22 '18 at 10:37

Change Image control to following code, it will be button with the Image. See that Command is bind to global DataContext, because in viewmodel I will declare command. I use the command parameter and pass there Id.

<Button Command="{Binding Path=DataContext.DoSomething, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Window}}}" CommandParameter="{Binding id}">
     <StackPanel>
          <Image Width="100" Source="{Binding Path=cover}"/>
     </StackPanel>
</Button>

You then need to declare the Command in the ViewModel

public ICommand DoSomething {get;set;}

And initialize it in constructor

DoSomething = new DoSomethingCommand(this);

Add another class to for definition fo command

internal class DoSomethingCommand: ICommand
    {
        private VModel vm;

        public PlotPlane(VModel mainViewModel)
        {
            this.vm = mainViewModel;
        }

        public event EventHandler CanExecuteChanged;

        public bool CanExecute(object parameter)
        {
            return true;
        }

        public void Execute(object parameter)
        {

            var id = (id)parameter;

            //do something, use vm to access your viewmodel


        }
    }

it says method must have a return type on PlotPlane and I still not understand about "class DoSomethingCommand : ICommand" work. Can you elaborate? — Hans, Nov 22 '18 at 09:59
Good to hear, there is also possibility to use, SelectedItem as @Clemens suggest. — Kaspar, Nov 22 '18 at 10:11

Adding on click event on image

2 Answers2