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://learn.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

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,835
3
17
30

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

866
1
10
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