asked on

C#:WinForms Overlay a picturebox image with a gif

Hi

I have a windows form application that gathers info about my Movies using the TMDB API

the form shows info about people with the movies they are in How might I overlay the movie poster with a tick box (see Picture for mock up of what I want to do) if it is in the database?

The Poster image is from the internet https://image.tmdb.org/t/p/w92/2QoLPgwWphEO2eVDm6ehGxCWoXV.jpg
and the green tick is a transparent gif or png

Each movie is loaded via a UserControl this is where I'd put the code with a bool InDB = true/ false

using System;
using System.Configuration;
using System.Collections.Specialized;
using System.Collections.Generic;
using System.ComponentModel;
using System.Drawing;
using System.Data;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
using MoviesDataModel;
using TMDbLib.Client;
using TMDbLib.Objects.General;
using TMDbLib.Objects.Movies;
using TMDbLib.Objects.TvShows;
using TMDbLib.Objects.Search;
using TMDbLib.Objects.People;

namespace FilmsDB
{
    public partial class KnownForMovies : UserControl
    {
        TMDbClient client = new TMDbClient(ConfigurationManager.AppSettings.Get("API_Key"));
        string ImgPath = ConfigurationManager.AppSettings.Get("ImgPath");
        static string ImgURL = ConfigurationManager.AppSettings.Get("ImgURL");
        string OriginalImgPath = ConfigurationManager.AppSettings.Get("OriginalImgPath");
        string MediaFiles = ConfigurationManager.AppSettings.Get("MediaFiles");
        public string ThumbPhotoPath { get; set; }
        public string FullPhotoPath { get; set; }
        //private MovieRole pKF;
        public string MovieTitle { get; set; }
        private PersonUC personUC;


        public KnownForMovies(PersonUC personUC)
        {
            this.personUC = personUC;
            InitializeComponent();
            
            if (personUC.PosterPath == null)
            {
                ThumbPhotoPath = ImgPath + "JohnWayneSml.png";
            }
            else
            {
//  Overlay images here if InDB == True
                ThumbPhotoPath = ImgURL + "w92" + personUC.PosterPath;
                FullPhotoPath = ImgURL + "original" + personUC.PosterPath;
            }
            TitleLbl.Text = personUC.Title + " (" + personUC.Year + " )";
                
            if (personUC.Charecter != null)
            {
                CharacterLbl.Text = personUC.Charecter;
            }
            else
            {

                CharacterLbl.Visible = false;
            }
           
            MoviePosterPictureBox.LoadAsync(ThumbPhotoPath);
        }
    }
}

Open in new window

it_saige

You could always place another picture box in the location you want to display the green tick. You would only want to make sure that it is in front of the existing picture box. After that, it should be a simple matter of changing the visibility; e.g. -

Form1.cs -

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace EE_Q29173565
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void OnClick(object sender, EventArgs e)
        {
            if (sender is Button)
            {
                var btn = sender as Button;
                if (btn.Equals(button1))
                {
                    pictureBox5.Visible = !pictureBox5.Visible;
                    btn.Text = $"{(pictureBox5.Visible ? "Hide" : "Show")} Checkmark";
                }
                else if (btn.Equals(button2))
                {
                    pictureBox6.Visible = !pictureBox6.Visible;
                    btn.Text = $"{(pictureBox6.Visible ? "Hide" : "Show")} Checkmark";
                }
                else if (btn.Equals(button3))
                {
                    pictureBox7.Visible = !pictureBox7.Visible;
                    btn.Text = $"{(pictureBox7.Visible ? "Hide" : "Show")} Checkmark";
                }
                else if (btn.Equals(button4))
                {
                    pictureBox8.Visible = !pictureBox8.Visible;
                    btn.Text = $"{(pictureBox8.Visible ? "Hide" : "Show")} Checkmark";
                }
            }
        }
    }
}

Open in new window

Form1.Designer.cs -

namespace EE_Q29173565
{
    partial class Form1
    {
        /// <summary>
        /// Required designer variable.
        /// </summary>
        private System.ComponentModel.IContainer components = null;

        /// <summary>
        /// Clean up any resources being used.
        /// </summary>
        /// <param name="disposing">true if managed resources should be disposed; otherwise, false.</param>
        protected override void Dispose(bool disposing)
        {
            if (disposing && (components != null))
            {
                components.Dispose();
            }
            base.Dispose(disposing);
        }

        #region Windows Form Designer generated code

        /// <summary>
        /// Required method for Designer support - do not modify
        /// the contents of this method with the code editor.
        /// </summary>
        private void InitializeComponent()
        {
            this.button1 = new System.Windows.Forms.Button();
            this.button2 = new System.Windows.Forms.Button();
            this.button3 = new System.Windows.Forms.Button();
            this.button4 = new System.Windows.Forms.Button();
            this.pictureBox5 = new System.Windows.Forms.PictureBox();
            this.pictureBox8 = new System.Windows.Forms.PictureBox();
            this.pictureBox7 = new System.Windows.Forms.PictureBox();
            this.pictureBox6 = new System.Windows.Forms.PictureBox();
            this.pictureBox4 = new System.Windows.Forms.PictureBox();
            this.pictureBox3 = new System.Windows.Forms.PictureBox();
            this.pictureBox2 = new System.Windows.Forms.PictureBox();
            this.pictureBox1 = new System.Windows.Forms.PictureBox();
            ((System.ComponentModel.ISupportInitialize)(this.pictureBox5)).BeginInit();
            ((System.ComponentModel.ISupportInitialize)(this.pictureBox8)).BeginInit();
            ((System.ComponentModel.ISupportInitialize)(this.pictureBox7)).BeginInit();
            ((System.ComponentModel.ISupportInitialize)(this.pictureBox6)).BeginInit();
            ((System.ComponentModel.ISupportInitialize)(this.pictureBox4)).BeginInit();
            ((System.ComponentModel.ISupportInitialize)(this.pictureBox3)).BeginInit();
            ((System.ComponentModel.ISupportInitialize)(this.pictureBox2)).BeginInit();
            ((System.ComponentModel.ISupportInitialize)(this.pictureBox1)).BeginInit();
            this.SuspendLayout();
            // 
            // button1
            // 
            this.button1.Location = new System.Drawing.Point(13, 212);
            this.button1.Name = "button1";
            this.button1.Size = new System.Drawing.Size(118, 23);
            this.button1.TabIndex = 4;
            this.button1.Text = "Show Checkmark";
            this.button1.UseVisualStyleBackColor = true;
            this.button1.Click += new System.EventHandler(this.OnClick);
            // 
            // button2
            // 
            this.button2.Location = new System.Drawing.Point(137, 212);
            this.button2.Name = "button2";
            this.button2.Size = new System.Drawing.Size(118, 23);
            this.button2.TabIndex = 5;
            this.button2.Text = "Showmark Check";
            this.button2.UseVisualStyleBackColor = true;
            this.button2.Click += new System.EventHandler(this.OnClick);
            // 
            // button3
            // 
            this.button3.Location = new System.Drawing.Point(261, 212);
            this.button3.Name = "button3";
            this.button3.Size = new System.Drawing.Size(118, 23);
            this.button3.TabIndex = 6;
            this.button3.Text = "Show Checkmark";
            this.button3.UseVisualStyleBackColor = true;
            this.button3.Click += new System.EventHandler(this.OnClick);
            // 
            // button4
            // 
            this.button4.Location = new System.Drawing.Point(385, 212);
            this.button4.Name = "button4";
            this.button4.Size = new System.Drawing.Size(118, 23);
            this.button4.TabIndex = 7;
            this.button4.Text = "Showmark Check";
            this.button4.UseVisualStyleBackColor = true;
            this.button4.Click += new System.EventHandler(this.OnClick);
            // 
            // pictureBox5
            // 
            this.pictureBox5.BackColor = System.Drawing.Color.Transparent;
            this.pictureBox5.Image = global::EE_Q29173565.Properties.Resources.checkmark;
            this.pictureBox5.Location = new System.Drawing.Point(100, 13);
            this.pictureBox5.Name = "pictureBox5";
            this.pictureBox5.Size = new System.Drawing.Size(30, 30);
            this.pictureBox5.SizeMode = System.Windows.Forms.PictureBoxSizeMode.Zoom;
            this.pictureBox5.TabIndex = 8;
            this.pictureBox5.TabStop = false;
            this.pictureBox5.Visible = false;
            // 
            // pictureBox8
            // 
            this.pictureBox8.BackColor = System.Drawing.Color.Transparent;
            this.pictureBox8.Image = global::EE_Q29173565.Properties.Resources.checkmark;
            this.pictureBox8.Location = new System.Drawing.Point(473, 13);
            this.pictureBox8.Name = "pictureBox8";
            this.pictureBox8.Size = new System.Drawing.Size(30, 30);
            this.pictureBox8.SizeMode = System.Windows.Forms.PictureBoxSizeMode.Zoom;
            this.pictureBox8.TabIndex = 11;
            this.pictureBox8.TabStop = false;
            this.pictureBox8.Visible = false;
            // 
            // pictureBox7
            // 
            this.pictureBox7.BackColor = System.Drawing.Color.Transparent;
            this.pictureBox7.Image = global::EE_Q29173565.Properties.Resources.checkmark;
            this.pictureBox7.Location = new System.Drawing.Point(349, 13);
            this.pictureBox7.Name = "pictureBox7";
            this.pictureBox7.Size = new System.Drawing.Size(30, 30);
            this.pictureBox7.SizeMode = System.Windows.Forms.PictureBoxSizeMode.Zoom;
            this.pictureBox7.TabIndex = 10;
            this.pictureBox7.TabStop = false;
            this.pictureBox7.Visible = false;
            // 
            // pictureBox6
            // 
            this.pictureBox6.BackColor = System.Drawing.Color.Transparent;
            this.pictureBox6.Image = global::EE_Q29173565.Properties.Resources.checkmark;
            this.pictureBox6.Location = new System.Drawing.Point(225, 13);
            this.pictureBox6.Name = "pictureBox6";
            this.pictureBox6.Size = new System.Drawing.Size(30, 30);
            this.pictureBox6.SizeMode = System.Windows.Forms.PictureBoxSizeMode.Zoom;
            this.pictureBox6.TabIndex = 9;
            this.pictureBox6.TabStop = false;
            this.pictureBox6.Visible = false;
            // 
            // pictureBox4
            // 
            this.pictureBox4.Image = global::EE_Q29173565.Properties.Resources.im_away_02;
            this.pictureBox4.Location = new System.Drawing.Point(385, 13);
            this.pictureBox4.Name = "pictureBox4";
            this.pictureBox4.Size = new System.Drawing.Size(118, 193);
            this.pictureBox4.SizeMode = System.Windows.Forms.PictureBoxSizeMode.Zoom;
            this.pictureBox4.TabIndex = 3;
            this.pictureBox4.TabStop = false;
            // 
            // pictureBox3
            // 
            this.pictureBox3.Image = global::EE_Q29173565.Properties.Resources.im_away_01;
            this.pictureBox3.Location = new System.Drawing.Point(261, 13);
            this.pictureBox3.Name = "pictureBox3";
            this.pictureBox3.Size = new System.Drawing.Size(118, 193);
            this.pictureBox3.SizeMode = System.Windows.Forms.PictureBoxSizeMode.Zoom;
            this.pictureBox3.TabIndex = 2;
            this.pictureBox3.TabStop = false;
            // 
            // pictureBox2
            // 
            this.pictureBox2.Image = global::EE_Q29173565.Properties.Resources.heartbeat;
            this.pictureBox2.Location = new System.Drawing.Point(137, 13);
            this.pictureBox2.Name = "pictureBox2";
            this.pictureBox2.Size = new System.Drawing.Size(118, 193);
            this.pictureBox2.SizeMode = System.Windows.Forms.PictureBoxSizeMode.Zoom;
            this.pictureBox2.TabIndex = 1;
            this.pictureBox2.TabStop = false;
            // 
            // pictureBox1
            // 
            this.pictureBox1.Image = global::EE_Q29173565.Properties.Resources.empty;
            this.pictureBox1.Location = new System.Drawing.Point(12, 12);
            this.pictureBox1.Name = "pictureBox1";
            this.pictureBox1.Size = new System.Drawing.Size(118, 193);
            this.pictureBox1.SizeMode = System.Windows.Forms.PictureBoxSizeMode.Zoom;
            this.pictureBox1.TabIndex = 0;
            this.pictureBox1.TabStop = false;
            // 
            // Form1
            // 
            this.AutoScaleDimensions = new System.Drawing.SizeF(6F, 13F);
            this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
            this.ClientSize = new System.Drawing.Size(513, 247);
            this.Controls.Add(this.pictureBox5);
            this.Controls.Add(this.pictureBox8);
            this.Controls.Add(this.pictureBox7);
            this.Controls.Add(this.pictureBox6);
            this.Controls.Add(this.button4);
            this.Controls.Add(this.button3);
            this.Controls.Add(this.button2);
            this.Controls.Add(this.button1);
            this.Controls.Add(this.pictureBox4);
            this.Controls.Add(this.pictureBox3);
            this.Controls.Add(this.pictureBox2);
            this.Controls.Add(this.pictureBox1);
            this.Name = "Form1";
            this.Text = "Form1";
            ((System.ComponentModel.ISupportInitialize)(this.pictureBox5)).EndInit();
            ((System.ComponentModel.ISupportInitialize)(this.pictureBox8)).EndInit();
            ((System.ComponentModel.ISupportInitialize)(this.pictureBox7)).EndInit();
            ((System.ComponentModel.ISupportInitialize)(this.pictureBox6)).EndInit();
            ((System.ComponentModel.ISupportInitialize)(this.pictureBox4)).EndInit();
            ((System.ComponentModel.ISupportInitialize)(this.pictureBox3)).EndInit();
            ((System.ComponentModel.ISupportInitialize)(this.pictureBox2)).EndInit();
            ((System.ComponentModel.ISupportInitialize)(this.pictureBox1)).EndInit();
            this.ResumeLayout(false);

        }

        #endregion

        private System.Windows.Forms.PictureBox pictureBox1;
        private System.Windows.Forms.PictureBox pictureBox2;
        private System.Windows.Forms.PictureBox pictureBox3;
        private System.Windows.Forms.PictureBox pictureBox4;
        private System.Windows.Forms.Button button1;
        private System.Windows.Forms.Button button2;
        private System.Windows.Forms.Button button3;
        private System.Windows.Forms.Button button4;
        private System.Windows.Forms.PictureBox pictureBox5;
        private System.Windows.Forms.PictureBox pictureBox6;
        private System.Windows.Forms.PictureBox pictureBox7;
        private System.Windows.Forms.PictureBox pictureBox8;
    }
}

Open in new window

Produces the following output -

And after we show a couple of the checkmarks -

-saige-

trevor1940

ASKER

The Logic of placing 1 image over the other works

Are you using a transparent gif or png?

I've tried with several .png & gif but don't seem to be able to make them transparent

    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
            MoviePosterPictureBox.LoadAsync("https://image.tmdb.org/t/p/w92/2QoLPgwWphEO2eVDm6ehGxCWoXV.jpg");
            pictureBox1.BackColor = System.Drawing.Color.Transparent;
        }

        private void button1_Click(object sender, EventArgs e)
        {
            pictureBox1.Visible = !pictureBox1.Visible;
            button1.Text = $"{(pictureBox1.Visible ? "Hide" : "Show")} Checkmark";
        }
    }

Open in new window

it_saige

Yes, you want to ensure that you use a png with an transparent alpha channel background. Also notice that I set the BackColor of the overlayed PictureBox to Transparent.

-saige-

trevor1940

ASKER

Ok this is frustrating!

To prove the image has a transparent background I knocked up a html/css page

Using the same image in WinForm I get the pic bellow (The second white square is an empty picture box) as you can see from the Resources.resx file both have "BackColor = System.Drawing.Color.Transparent;"

Even if the png file isn't compatible with WinForms I would expect pictureBox2 not to display because no picture has been loaded

namespace OverLayingPictureBox
{
    partial class Form1
    {
        /// <summary>
        /// Required designer variable.
        /// </summary>
        private System.ComponentModel.IContainer components = null;

        /// <summary>
        /// Clean up any resources being used.
        /// </summary>
        /// <param name="disposing">true if managed resources should be disposed; otherwise, false.</param>
        protected override void Dispose(bool disposing)
        {
            if (disposing && (components != null))
            {
                components.Dispose();
            }
            base.Dispose(disposing);
        }

        #region Windows Form Designer generated code

        /// <summary>
        /// Required method for Designer support - do not modify
        /// the contents of this method with the code editor.
        /// </summary>
        private void InitializeComponent()
        {
            this.button1 = new System.Windows.Forms.Button();
            this.MoviePosterPictureBox = new System.Windows.Forms.PictureBox();
            this.pictureBox1 = new System.Windows.Forms.PictureBox();
            this.pictureBox2 = new System.Windows.Forms.PictureBox();
            ((System.ComponentModel.ISupportInitialize)(this.MoviePosterPictureBox)).BeginInit();
            ((System.ComponentModel.ISupportInitialize)(this.pictureBox1)).BeginInit();
            ((System.ComponentModel.ISupportInitialize)(this.pictureBox2)).BeginInit();
            this.SuspendLayout();
            // 
            // button1
            // 
            this.button1.Location = new System.Drawing.Point(41, 195);
            this.button1.Name = "button1";
            this.button1.Size = new System.Drawing.Size(75, 23);
            this.button1.TabIndex = 3;
            this.button1.Text = "button1";
            this.button1.UseVisualStyleBackColor = true;
            this.button1.Click += new System.EventHandler(this.button1_Click);
            // 
            // MoviePosterPictureBox
            // 
            this.MoviePosterPictureBox.Location = new System.Drawing.Point(26, 12);
            this.MoviePosterPictureBox.Name = "MoviePosterPictureBox";
            this.MoviePosterPictureBox.Size = new System.Drawing.Size(92, 138);
            this.MoviePosterPictureBox.TabIndex = 1;
            this.MoviePosterPictureBox.TabStop = false;
            // 
            // pictureBox1
            // 
            this.pictureBox1.BackColor = System.Drawing.Color.Transparent;
            this.pictureBox1.Location = new System.Drawing.Point(85, 12);
            this.pictureBox1.Name = "pictureBox1";
            this.pictureBox1.Size = new System.Drawing.Size(32, 32);
            this.pictureBox1.SizeMode = System.Windows.Forms.PictureBoxSizeMode.StretchImage;
            this.pictureBox1.TabIndex = 4;
            this.pictureBox1.TabStop = false;
            // 
            // pictureBox2
            // 
            this.pictureBox2.BackColor = System.Drawing.Color.Transparent;
            this.pictureBox2.Location = new System.Drawing.Point(41, 103);
            this.pictureBox2.Name = "pictureBox2";
            this.pictureBox2.Size = new System.Drawing.Size(32, 32);
            this.pictureBox2.TabIndex = 5;
            this.pictureBox2.TabStop = false;
            // 
            // Form1
            // 
            this.AutoScaleDimensions = new System.Drawing.SizeF(6F, 13F);
            this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
            this.ClientSize = new System.Drawing.Size(800, 450);
            this.Controls.Add(this.pictureBox2);
            this.Controls.Add(this.pictureBox1);
            this.Controls.Add(this.button1);
            this.Controls.Add(this.MoviePosterPictureBox);
            this.Name = "Form1";
            this.Text = "Form1";
            ((System.ComponentModel.ISupportInitialize)(this.MoviePosterPictureBox)).EndInit();
            ((System.ComponentModel.ISupportInitialize)(this.pictureBox1)).EndInit();
            ((System.ComponentModel.ISupportInitialize)(this.pictureBox2)).EndInit();
            this.ResumeLayout(false);

        }

        #endregion

        private System.Windows.Forms.PictureBox MoviePosterPictureBox;
        private System.Windows.Forms.Button button1;
        private System.Windows.Forms.PictureBox pictureBox1;
        private System.Windows.Forms.PictureBox pictureBox2;
    }
}

Open in new window

ASKER CERTIFIED SOLUTION

it_saige

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

trevor1940

ASKER

Is my GreenTick different from yours in terms of the transparent alpha channel background you mentioned before?

I'm asking because setting pictureBox1.Parent = MoviePosterPictureBox; causes the GreenTick not to show at all Yes visible = true

it_saige

As I stated, you will need to set the location of pictureBox1 so that it is within the boundaries of MoviePosterPictureBox;

MoviePosterPictureBox -

this.MoviePosterPictureBox.Size = new System.Drawing.Size(92, 138);

Open in new window

pictureBox1 -

this.pictureBox1.Location = new System.Drawing.Point(85, 12);

Open in new window

The size of pictureBox1 is 32, 32, so let's subtract 34 from 92 (width of the MoviePosterPictureBox) and the change pictureBox1.Location to -

this.pictureBox1.Location = new System.Drawing.Point(58, 3);

Open in new window

See if that doesn't work for you.

-saige-

it_saige

Also your check mark does work:

-saige-

trevor1940

ASKER

Thanx Very much

Got There in the end