How to Add OnClick event on Image in WPF Programmatically

Question

I am new to C# and WPF, and I want to make something like Movie Library with MySQL as a database to show the image and the title using Stackpanel. I don't know how to add click event on an image programmatically Because I'm not using the image in Xaml.
Also, can Stackpanel have 3x3 or 4x4 grid instead only have 1 column?

Screenshot of my program:

Here is My Code

public void FillData()
{
    int id = 1;
    for (int i = id; i < 100; i++)
    {
        MySqlCommand cmd;
        cmd = koneksi.CreateCommand();
        cmd.CommandText = "select * from movie_list where id_movie = '" + i + "'";
        MySqlDataAdapter adapter = new MySqlDataAdapter(cmd);
        DataSet ds = new DataSet();
        adapter.Fill(ds);
        if (ds.Tables[0].Rows.Count == 1)
        {
            string cover = (String)(ds.Tables[0].Rows[0]["cover"]);
            string titles = (String)(ds.Tables[0].Rows[0]["title"]);
            StackPanel Sp = sp;
            StackPanel Sp2 = sp2;
            Sp.Orientation = Orientation.Horizontal;
            Sp2.Orientation = Orientation.Horizontal;
            var picture = new Image
            {
                Name = "pb" + i,
                Source = new BitmapImage(new Uri(AppDomain.CurrentDomain.BaseDirectory + cover, UriKind.Absolute)),
                RenderSize = new Size(100,150),
                Margin = new Thickness(20,0,20,0),

            };
            var title = new Label
            {
                Name = "sp" +i,
                Content = titles,
                Width = 120,
                Margin = new Thickness(10, 0, 20, 0),
                HorizontalContentAlignment = HorizontalAlignment.Center,
            };                   
            Sp.Children.Add(picture);           
            Sp2.Children.Add(title);
        }
    }                
}

When you want to use a `3x3` or `4x4` grid - than why don't you use a `Grid` instead of a `StackPanel` ? - https://docs.microsoft.com/en-us/dotnet/api/system.windows.controls.grid — Rand Random, Nov 21 '18 at 14:21
Just gotta love the fact - 3 answers and 3 different events :D — Rand Random, Nov 21 '18 at 14:23
the thing is if i use i grid i have to add image in xaml and i dont know how to display multiple images automatically — Hans, Nov 21 '18 at 14:32
besides the Click event... wouldn't be this the perfect usage example of a DataTemplate? ... — FastJack, Nov 21 '18 at 14:35
@Hans - sorry, but this is untrue if I understood you correctly - just because you are using a `Grid` instead of a `StackPanel` doesn't force you to add the Image in XAML - you can create a `Grid` programatically aswell and nothing has to be in XAML - Maybe extend or ask a different Question with your Problem you face by using `Grid` the `StackPanel` is the wrong choice — Rand Random, Nov 21 '18 at 14:36
Im new to c# and wpf so i dont know how to bind the database or using datatemplate xD — Hans, Nov 21 '18 at 14:39
google for WPF Datatemplate Tutorial ... there are tons of explanations, videos, etc out there ;) there is absolutely no reason to implement this in code ;) — FastJack, Nov 21 '18 at 14:57
@Hans You should use an ItemsControl that uses the appropriate Panel as its ItemsPanel. Put an Image element in the ItemTemplate and bind its Source property to Uris or BitmapImages in a collection that is used as ItemsSource of the ItemsControl. Start reading here: [Data Templating Overview](https://docs.microsoft.com/en-us/dotnet/framework/wpf/data/data-templating-overview). In order to indicate that the problem is solved, accept one of the answers. See [What should I do when someone answers my question?](https://stackoverflow.com/help/someone-answers) — Clemens, Nov 21 '18 at 15:07

score 2 · Answer 1 · answered Nov 21 '18 at 14:43

You really should separate the data access code from your UI code.

In the UI, use an ItemsControl with the ItemsSource set to your DataSet. Set the ItemsTemplate to a DateTemplate with the controls you require for each item.

Using a ListBox will handle the item selection rather than worrying about click events for the Image and other controls.

If you want a grid layout rather than a straight linear list, you can use a UniformGrid as the ItemsPanelTemplate.

score 1 · Answer 2 · answered Nov 21 '18 at 14:21

1

You can add an event handler to the picture object you're creating:

picture.MouseUp += (s, e) => {
    // Do something funny.
};

answered Nov 21 '18 at 14:21

JLe

2,824
3
16
29

score 0 · Answer 3 · answered Nov 21 '18 at 14:22

Besides that you absolutely shouldn't mix your database code with your UI code, you can just subscribe to the MouseDown (or MouseUp, if it should be like a click) event on your Image and execute whatever you want:

picture.MouseDown += (sender, args) => 
{ 
  Foo();
};

score 0 · Accepted Answer · answered Nov 21 '18 at 14:22

0

        var picture = new Image();
        picture.MouseLeftButtonUp += (s, e) =>
        {
            //[your code goes here]
        };

answered Nov 21 '18 at 14:22

FastJack

827
1
9
11

besides, if you really want to behave it like a click you can mit mouse up and down events combined with a timer.... ;) – FastJack Nov 21 '18 at 14:24

How to Add OnClick event on Image in WPF Programmatically

4 Answers4

Linked