How to add image on the border of a winform panel?

Question

I am trying to add an image overlapping the border of a WinForm

but it only shows image inside the panel border

I have tried adding margin but it does not work at all

cross_Img.Location = new System.Drawing.Point(Panel1.Size.Width - 15, -5);
cross_Img.Margin = new Padding(0, -15, -15, 0);
Panel1.Controls.Add(cross_Img);

It's hard to imagine and more likely you are not explaining or solving it correctly (therefore you are here). Can you add screenshot and [code to reproduce the issue](https://stackoverflow.com/help/mcve) ? — Sinatr, May 15 '17 at 09:14
Do you want the image appears [outside the form](http://stackoverflow.com/q/3379306/1997232)? — Sinatr, May 15 '17 at 09:17
You haven't explained anything with this image. Try to explain in detail what are you trying to do and for what purpose. Maybe there is a better option that someone can tell you to do. — hcerim, May 15 '17 at 09:18
I do not know how to explain this further. I have created a panel and simply added a cross image clickable for certain event. Now i want this cross image to appear on the border of the panel to get a more professional look . But the image is not appearing outside the boundaries of the panel. Is it possible to place it at the border of the panel? if yes, how? — Avy, May 15 '17 at 09:23
@Sinatr The image should appear on the border of Panel which is inside the Form — Avy, May 15 '17 at 09:25
It's seems you don't know how painting occurs in winforms (winapi) and it's a big thing to explain in one post, start from [here](https://msdn.microsoft.com/en-us/library/kxys6ytf.aspx). To achieve wanted you can try a trick: transparent form (big enough to fit that round close button) as container for opaque panel with margin. This will produce wanted result, not sure if it's the best way. — Sinatr, May 15 '17 at 09:32
Another thing I forgot to mention (looking at screenshot) in winforms controls are only able to paint inside their bounds. `Image` can't be a child of `Panel`, because `Panel` will *clip* it while repainting. Put them on the same level, e.g `Form` is parent for `Panel` and `Image`, take care about [z-order of controls](http://stackoverflow.com/q/1351054/1997232). — Sinatr, May 15 '17 at 09:45
The size of the Panel is all you got. If you want this design with the Panel only you need to add an inner padding which you need to manage yourself. If you want to overlap other controls the best would be to create a shaped region for the Panel. Otherwise it just depends on what you want to do. For the full picture you might even need to consider anchor or docking repercussions.. — TaW, May 15 '17 at 09:51
@TaW What do you mean by shaped region for panel? can i increase the size of panel for a certain block? How? — Avy, May 15 '17 at 10:29
Check this question http://stackoverflow.com/questions/5634743/non-client-painting-on-aero-glass-window — Anton Semenov, May 15 '17 at 10:44
Well, you can create irregular shapes by setting the clipping region of a control. See [here](http://stackoverflow.com/questions/28486521/rounded-edges-in-button-c-sharp-winforms/28486964?s=21|0.0000#28486964) and [here](http://stackoverflow.com/questions/42751715/adding-buttons-to-side-of-window-on-windows-form/42812851?s=2|0.0000#42812851) for examples. Not sure if it is the best solution, though. - See my answer my preferred solution, unless you need to overlay to panel.. — TaW, May 15 '17 at 11:10

Sowndarya · Answer 1 · 2017-05-15T10:42:12.283

0

try this

 cross_Img.Location = new  System.Drawing.Point(488, 429);
 cross_Img.Margin = new Padding(0, -15, -15, 0); 
 // panel1.Controls.Add(cross_Img);

Instead of adding Image to panel, specify desired location.

edited May 15 '17 at 10:42

answered May 15 '17 at 09:20

Sowndarya

97
1
15

TaW · Accepted Answer · 2017-05-15T16:58:52.503

There are several ways to do this.

Here is a simple one, which may or may not be good enough for you.

Let's assume an adorning Image img and a border width of int bw.

  int iw2 = img.Width / 2;
  int ih2 = img.Height / 2;

Start by setting a Padding:

adornedPanel1.Padding = new Padding(bw, ih2 + bw, iw2 + bw, bw );

This will not show but will help keep any docked controls inside your border.

Next we code the Paint/OnPaint code:

  Rectangle cr = adornedPanel1.ClientRectangle;
  Rectangle r = new Rectangle(0, ih2, cr.Width  - iw2, cr.Height -  ih2 );

  using (Pen pen = new Pen(Color.MediumSlateBlue, bw)
       { Alignment = System.Drawing.Drawing2D.PenAlignment.Inset})
       e.Graphics.DrawRectangle(pen, r);
  e.Graphics.DrawImage(img, cr.Right - img.Width, 0);

To show how the Padding works for docked and/or anchored controls the example has a Label with a solid BackColor docked to the left nested inside the Panel. The right screenshot shows the Panel with a white background so you can see the whole layout.

Note the setting of the Pen alignment from Center to Inset !!

If you create a panel subclass I suggest it keeps track of the new custom client area rectangle..

How to add image on the border of a winform panel?

2 Answers2