I have an array of picture boxes that are arranged in a square. I want to put a larger, mostly transparent picture box over the top. But when I do it covers the other picture boxes and just draws the background of the form.
Is there a way to get it to have all the other picture boxes show where it is transparent?
Transparency in WinForms isn't great. Some controls have transparency support, others don't. Some controls can be subclassed to enable this (by calling Control.SetStyle() with the SupportsTransparency flag). I believe this can be done with PictureBox.
However, transparency in all WinForms controls works by having the transparent control call its parent control to draw the background before the child control draws. This means that you cannot have two sibling controls and expect transparency on one to show through to the other. Sorry!
All that said, it would be possible to code your own workaround to support this. It would involve subclassing PictureBox and clever coding in the OnPaint override to locate sibling controls and manually trigger painting of them into in-memory bitmaps. Lots of gotchas with this approach.
Try WPF!
Here's a tip to get the desired result:
Create multiple copies of your top image.
Add each copy to the Controls of each picture box it should cover.
Adjust location of each copy according to the offset of each picture box to be covered.
So you will see every copy of your big image covering each picture box as if they were a single image.
Related
I would need a picturebox that contains a graphic for an actor. The actor is placed on PictureBoxes that contain a tileset graphic. The actor should be able to move freely which i already did, but the transparent .PNG Actor-Image has a control-colored background when I load it into the form.
Question:
How could I make the background of this Image transparent AND allow to be moved?
The problem with windowsforms is that its control does not have true transparency
The transparency of a control is based on the BackgroundColor or BackgroundImage of its parent and that is why your PictureBox is Control-Colored
Now if you want to make it true transparency you have some options
Draw everything yourself
You can use the power of gdi+ or Graphics to draw everything, but only the needed ones
Handle the draw of the control
This could be a tricky one, you can override the method OnPaint and OnPaintBackground of the picture box so it do not redraw its background (Control-Colored), the bad side of this is that it will have a lot of flickering and buggy background on movement
Use another techology
I'm not sure but if I'm not mistaken you could use wpf for this, altough it could change your entire project
I have a C# WPF application where I have several possible images, some having irregular shapes within the image. I would like to generate different events when clicking on the different shapes within the image.
For example: If the image was of the front of the house, I would genereate different events when clicking on the doorknob, the door, the windows, the roof, etc.
The image has to be resizable.
I can do it manually with a grid and shapes, but it seems like there should be a more elegant way.
I thought I saw a technique where you could make a "shadow" image that was like the original, but with each clickable region filled in a different color. (A "color map" of the clickable regions.) Then the click handler could access the color of the shadow image and raise the appropriate event. However, I couldn't figure out how to hide the shadow image "under" the display image and still have the click event handler pick up the color.
I'm sure there's a good way to handle this, I just don't normally work with images so I'm completely ignorant of it.
Thanks.
How about having the nice image higher in the Z-order than the "shadow image" and setting topImage.IsHitTestVisible = false;
This would cause clicks to bypass the top, visible image and go straight to the underlying shadow image click handler.
Another technique I have used in production code is to derive a new class from Image and override HitTestCore and test the pixel value myself and if it's a certain color or opacity, I return a different object. This way I control all the action.
I need to display images on top of each other. This can either be a composite\layered image or separate images. This will typically be a larger image with smaller images on top. With the composite\layered approach the smaller images would each need to be a separate (and accessible) layer. With the separate images approach the smaller images are on top with a transparent background. With either approach the smaller images must be accessible i.e. can be moved (dragged) or deleted. The app needs to display these images together (as if it was one image) and keep track of the coordinates (position) of the smaller images.
The current (proof-of-concept) solution has a PictureBox control that displays the large image and a treeview. Nodes are dragged from the treeview to the picture box and rendered using the graphics DrawString or DrawImage methods – these draw the smaller images. The problem is that once the smaller image is drawn I cannot get back to it as a separate graphics object. The picture box “sees” it as part of the current image.
I need to do this in C# (WinForms or WPF). And the image type must be a common and open format i.e. not proprietary. Preferably no 3rd party controls.
Any suggestions\guidance?
WPF would be the technology of my choice for this project.
Drag & Drop way nicer, without flickering, better concept
Rendering directly on HW, way smoother for image manipulation
General idea of the implementation:
MVVM pattern
ViewModel holding your layer information
ItemsControl bound to the collection of Small overlay Images holding a DataTemplate which visualizes the images thour custom UserControl based on a Thumb (for drag & drop functionality) displayes the small images on top.
Easy to add functionality to drag, edit, hide each small image seperately.
The problem is that once the smaller image is drawn I cannot get back
to it as a separate graphics object. The picture box “sees” it as part
of the current image.
That behaviour is perfectly normal. GDI drawing does not work with objects. To do what you are asking, you need to track any event that can cause a change in the final image and when such an event occur, you need to draw the whole image from the begining, including the first image (assigning the background image, I guess).
May be create picture box per image. The transparent background will give the effect of single image.
I'm writing a form in C# and have several panels. I need to draw a line between two of the panels. I've found online several ways to go about this, the most promising appears to be to create a third panel, make it transparent, place it on top of my original panels and draw the line here.
I'm not able to get the panel to be transparent, even if I set its BackColor and ForeColor properties to transparent (in code or in design view of VS).
Any ideas on how to make the panel itself transparent (or not Visible) but have the line I draw on it still visible on top of everything else?
Thanks in advance.
No, it's transparent. See this by giving the form's BackgroundImage a value. You'll see it through the transparent panel. Of course, that's not the kind of transparency you want, you want stacking effects to work. There is no direct support for that.
If you want layers to work then don't use controls. Use the Paint event to draw. Now there's no problem, if you want transparency then just don't paint. Draw a line across an image simply by drawing the image first. This is also the rendering model of WPF.
You can actually do this pretty easily as your own UserControl. Here's a code example:
Drawing on top of controls inside a panel (C# WinForms)
This is similar to what you were originally attempting to do, only instead of drawing a line on top of a transparent panel, this code creates an irregularly-shaped user control (which happens to be in the irregular shape of a line).
I'm pasting an image from the game im building.
the matrix of empty cells you see are made of PictureBox[][].
I wan't whenever I drop a coin to one of the columns... I want it to go down but the purple stuff will hide the falling coin and the gray color you see wont hide it.
How do I make this effect?
please notice that in each PictureBox control I have set the BG Image as you can see
Don't do it like that.
Create custom control. In custom control, override Paint, and then draw COIN sprite first, then draw mask over it. Be sure that you use double-buffered painting here.
It will work like a charm, trust me!
And, since you are (I gueess) building 5-in-a-row game here, your custom control will be able to paint occupied slots as well.
By designing custom control, you'll be able to hide all the animation and graphics stuff away from your main form.
I don't think it is possible like that. Controls in WinForms cannot be transparent, that is the problem
I would think in three directions:
Forgetting about controls and
painting everything OnPaint event of
the form. It is not too complicated
(well it would be more complicated
to detect some mouse events like you
did now, as you wouldn't know which
graybox is hit, but rather just
mouse coordinates)
Experimenting with coin as a form
(forms can be transparent)
Possibly using WPF with same logic
you did, as controls can be
transparent there
Controls in Windows Forms can be transparent. You need to set the TransparencyKey of the Form to some color that you never plan on using (many people seem to love/hate Magenta for this), and then set the BackgroundColor of each PictureBox to the same color. The result should be a transparent PictureBox with its Image drawn over it. I'm pretty sure this won't work with the BackgroundImage property, mind you- just the Image property.
One potentially unwanted side effect of this method is that you'll be able to see whatever's behind your form (the desktop, other application windows, etc.) through the transparent places in the PictureBox.