We are developing a GUI system.
How can we handle the input of front panel, if it has also a panel under it? I mean, if i click on the front panel, the mouse input also effects on the lower panel. How can i avoid it? We searched that problem on the net. For example, z-indexing systems or layering systems. But they are not ended up well. There are not much resources about it.
Use a Boolean to check if your panel is active. When another panel is clicked set last panel to false and the new panel clicked to true.
Then when clicking use the Boolean and only do the code fore mouse click on the panel that comes up active.
Search through the reverse ordering that you do to draw them. The first ones you draw are on the bottom, the last ones you draw are on top. So the last ones you draw should be the first ones you search through for input.
Related
I have made the program so that, once the level is done, a panel will pop up and this button is attached. However this button is not working.
I have - Checked my eventsystem, Checked Raycast Settings, Set the onclick event, Also brought the button out on the z axis so that it would have no interference from the panel.
My Hierarchy
Button's Inspector
Canvas' Inspector
It's because you original color of the Image is completely black. The Button component just tries to tint the original color, but because it's black, you see no effect.
Oh, and... As #Glurth said, you have enabled Block Raycast on the CanvasGroup, so basiclly the Button doesn't even receive pointer events.
I see you have "Blocks Raycasts" configured for the Canvas group, which you have added to the canvas itself.
I don't think this component is supposed to go on the canvas itself anyway; it's intended to allow one to disable or hide groups of objects on your canvas. The "blocks raycasts" is intended to prevent clicking on controls that are behind this group, and collect clicks for the group itself. If you put everything on your canavas in this group, it will collect all the clicks for everything.
I found my problem, i had 'ignore parent groups' unchecked which did not allow the mouse pointer to recognise the button as it was a 'child' of canvas
Thankyou all for your help!
My Canvas Inspector component, Canvas Group
The questions says it all.
How can I move a control, say a PictureBox between multiple panels, or betwween a panel and a flow layout panel.
I'm aware I can drag and drop controls between multiple panels and such, however this is does not make the control visually movable between the containers. The mouse only changes to a diferent cursor and after you drag to the other control and release the mouse button the control appears on the other container. I require the control to be visually movable.
Can someone provide a simple example, so I can extract the idea to apply to my situation.
NOTE: Runtime of course.
Assuming you need it runtime:
You can save the control as bitmap using Control.SaveToBitmap method
Create cursor from image.
Set the current cursor which we created from control.
Once drag and drop completed reset the cursor.
Let's take a simple example of dragging a button around.
Suppose you have two types of container controls:
1) an X-Y layout
2) a flow layout (assume left to right)
When you click to drag the button, record the x-offset and y-offset from the click to the top left corner of the control. As well, record the index of the control within the Controls collection.
As the mouse moves, first check if the mouse has changed container controls.
If so, then remove the button from its current parent and add it to the new parent.
If the button is added to a flow control, then you need to calculate the new index. To do this, calculate the distance from the mouse to the closest edge of a bounding box of all other controls. Then if the mouse is left of the center of that control, insert to that control's index minus 1, otherwise insert to the right of that control (index + 1).
If the button is added to an X-Y layout, then the index doesn't matter that much. You can simple just set the button's location relative to the mouse plus the x-offset, and y-offset.
As the mouse is dragging, you will need to force the controls to refresh. I think calling Invalidate() on the container control should be sufficient.
This should give you the basic idea that you could use to start coding something.
I'm developing a small tool where you can drag and drop controls with the mouse, such as buttons, comboboxes, groupboxes, etc...
As the mouse moves, the control moves too, so the user can get a preview of the position of that control. The problem comes when, the control being dragged is going from one container to another one. Usually resulting in that control moving correctly but just under the second container, and therefore, not visible for the user. Let's say that we have GroupBox A and GroupBox B, and the user wants to move Button from A to B. When the action starts, the button is visible while the movement is inside the bounds of A, but when the mouse gets into B, the Buttons just appears to be in a lower layer of the interface and it becomes invisible.
I've tried to fix it with .BringToFront() and .SendToBack() without results. I'm having some flickering problems also trying to create a bitmap to create that preview even using the methods recomended here to solve it.
Is there a way of fixing it without having to use bitmaps that solves the layer problem?
I need to create a form with two panels:
1. Destination
2. Source
On the source panel there will be picture boxes. I need to be able to move it from source to point at destination panel with mouse.
I have a problem connected with different coordinates of the panels.
Please, help with advice or an idea what to do.
Moving those controls requires changing their Parent property. That's not easy to do, there is no good time to do this while the user is dragging with the mouse. You'll also get the effect of the panel clipping the control, you cannot display it on both with half of the control on one and the other half on the other panel. And yes, you have to change the Location property of the control when you change the parent or it will jump.
Punt the problem, don't use two panels. It only has to look like a panel, easily done by drawing one in the form's Paint method (or OnPaint override, better). Use e.Graphics.DrawRectangle or FillRectangle.
Ok, I have googled, but maybe I put my search in weirdly. :/
I have a VB.NET WinForms application. I have the anchor properties set for all the controls so that it will resize all the controls to look decent when the form is maximized. (Haven't gotten around to manual resizing yet however).
Anyway, the problem:
I go to set the same properties for a button (testing with a single button for now) on the main GUI form/picture. When I go to run the program via F5, it looks decent. But when I maximize the form, the entire button covers up more than it should.
I've taken screenshots of the form so you can see a visual of what I'm talking about. :/
Before: http://zack.scudstorm.com/before.png
After: http://zack.scudstorm.com/after.png
What other propert(y|ies) do I need to set for the buttons to show up correctly? :/ (The buttons go over the boxes that say, for example, "1-1", "2-3", etc.
Thanks,
-Zack
Seems like you have anchored top-left and bottom-right when what you want is just top-left.
Edit: If it's just an image that does not change when the winform changes, then don't anchor your buttons at all. Just put them where they go. If you are scaling the image, then I would either detect the clicks on the image and do the scaling math or do the scaling math and set my buttons in code in the Form.OnResize event.
As it appears that your goal is just to be able to handle clicks on the "computers"...
One option that can be useful for this sort of task is to create an "overlay" bitmap (not displayed, but which is the exact same size as your source bitmap) which uses different colors to represent all the clickable regions. (e.g. (R=0,G=0,B=0) for computer 0, (0,0,1) for computer 1, etc)
You could even generate this bitmap somewhat automatically without too much trouble (If you have a mode where you can click the top left and then bottom right corners of the image to define a new region)
When the mouse is clicked, you can check the pixel at the scaled coordinates of the mouse position in the overlay and determine what their click corresponds to. This can be a lot easier than creating loads of controls, and makes it a lot easier to have clickable regions that aren't rectangular.