Set image as background for Button as default, hover and click

[leorob88]

I have a file watcher which basically detects some edits on stuff. When that happens, this method is called. This basically hides for a brief moment the form (and the button that has its same size) so it can capture the screen beneath and make the button's color as default, hover and click, taking the dominant color of the captured area. That, in practical terms, makes the button "almost transparent". More about the matter down below.

        private void colorupdate()
        {
            this.Invoke((MethodInvoker)delegate
            {
                this.Visible = false;
            });
            Dictionary<Color, int[]> colori = new Dictionary<Color, int[]>();
            using (Bitmap pixel = new Bitmap(this.Width, this.Height))
            {
                using (Graphics captureGraphics = Graphics.FromImage(pixel))
                {
                    captureGraphics.CopyFromScreen(new Point(this.Location.X, this.Location.Y), Point.Empty, new Size(this.Width, this.Height));
                }
                for (int x = 0; x < this.Width; x++)
                {
                    for (int y = 0; y < this.Height; y++)
                    {
                        Color colore = pixel.GetPixel(x, y);
                        if (!colori.ContainsKey(colore)) { colori.Add(colore, new int[] { 1, x, y }); }
                        else { colori[colore][0]++; }
                    }
                }
            }
            int dss = colori.OrderByDescending(set => set.Value[0]).First().Value[0];
            int[] ds = colori.OrderByDescending(set => set.Value[0]).First().Value;
            Color color = colori.OrderByDescending(set => set.Value[0]).First().Key;
            this.Invoke((MethodInvoker)delegate
            {
                button1.BackColor = color;
                button1.FlatAppearance.MouseOverBackColor = color;
                button1.FlatAppearance.MouseDownBackColor = color;
                button1.FlatStyle = FlatStyle.Flat;
                button1.FlatAppearance.BorderSize = 0;
                this.Visible = true;
            });
        }

I wish to make the button actually transparent but I cannot because using Color.Transparent makes the button only clickable if the user clicks exactly where the click registers any color that is NOT transparent- i.e. if you click on a transparent area of the button, nothing happens. So, I wish to capture instead the area beneaht the button and the form and use it to set the button's "look" (lke, background image). In particular, i would need to set it as look even when clicked and hovered, because i don't want its default behavior change its appearance when interacting with the mouse (it's only supposed to be interacted with the mouse). Do you know perhaps a simple way to use the screenshot (in this code is already there, it's basically "pixel") as a perennial look and not get overwritten by mouse behavior?

 

[Skydiver]

If you don't want the button to act like a button anymore, why not just use a panel or a custom control? I believe that you can still get Click events from those controls. That way you can simply put a screenshot of what was under the panel into the panel's client area, and you don't need to contend any of the hover over, or mouse down, mouse up painting behaviors. Why fight with the default windows UI behavior?

<Rant> As an aside, as much as I appreciate you wanting a particular kind of behavior, this behavior that you are making doesn't comply with the standard Windows UI guidelines. This is why people complain that apps on Macs have a "unified" look and feel while Windows is "fragmented" -- nobody follows the Windows UI guidelines. </Rant>

 

[leorob88]

If you don't want the button to act like a button anymore, why not just use a panel or a custom control? I believe that you can still get Click events from those controls. That way you can simply put a screenshot of what was under the panel into the panel's client area, and you don't need to contend any of the hover over, or mouse down, mouse up painting behaviors. Why fight with the default windows UI behavior?

<Rant> As an aside, as much as I appreciate you wanting a particular kind of behavior, this behavior that you are making doesn't comply with the standard Windows UI guidelines. This is why people complain that apps on Macs have a "unified" look and feel while Windows is "fragmented" -- nobody follows the Windows UI guidelines. </Rant>

don't worry, i appreciate your advice and opinion.

i went for button because it was the most obvious to interact with. i also tried to use label but it won't react to the click event...

even so, i'm afraid to discuss this further (because off topic?)... because in the end i realized that truly my logic (that is, my app) has an issue and i'm wandering around the same basic problem trying to avoid it: i really actually need the control NOT to take an image BUT to be transparent.

there's no way to avoid that, because my app stay in foreground, it's meant to be. so, whenever i move something beneath its surface it may generate a weird look. take example: white desktop, so white button if i copy the background "image", but i have also a random app window being dark/blackish, if my app stays front and i move the blackish app beneath it, what i get is the button is actually not transparent but instead a white box covering the black window. so yeah, i actually really need it to be transparent if i want its look to be consistent, not colored or imaged. but still, i need to interact when i click it.

so basically, yes, color.transparent could be an idea, but the real issue i tried to avoid is the fact the control MUST interact with the mouse even on the transparent areas. but i don't know if i'm looking for an impossible behavior or not.... i know sometimes windows UI has some limits and it may be tedious or complex in some case to find a workaround....