I need to place 3 picture boxes, which are all in a own panel, side by side.
Conditions:
all pictures should stay side by side in same distance to each other
the pictures should grow and shrink during resizing the Form
the Panels under the pB's should always act like a border to the pictures
it should be used as much as possible space
How could I do this in Visual Studio 2010 C#, Windows Forms?
I would suggest that you use a TableLayoutPanel with 3 columns, and place the pictureboxes within the given cells.
Anchor this panel to the parent form, so that when you resize the form, the panel will follow. Since you have panels underneath (as per picture sample) you could anchor to Left, Right and Top. This will anchor the panel to top, left, and will resize all the way to the right for as long as the form goes. Add Bottom if you need to.
The pictureboxes would have the Dock set to DockStyle.Fill.
You could nest more panels within panels, but do it in a sane way :-)
I think ,following these instructions will fulfill your requirements
1)right click on other panels and select bring to front
2)anchor the other panels to bottom
3)anchor all other panels panels and picture boxes to top,bottom ,left,right using properties
You can manage the interfaces selection ,un-selecting anchors
Related
I am designing a form with WinForms, a partial screenshot of which is shown below:
The two buttons on the bottom are in a tableLayoutPanel, each one in its own cell. The "Add new baseline" button is anchored to the bottom and left, the "Delete Selected Baseline" button is anchored to the bottom and right. This partially does what I need it to do. That is, when the form is compressed horizontally, the buttons are also compressed, so that one doesn't overlap the other, for example.
They also need to stay in their exact positions as shown in the screenshot, when the form is resized vertically. At the moment, they are moving below and beyond the bottom edge of the form, or upwards and over the other button and the listView above. By the way, the listView is anchored to all sides.
I have tried several combinations of anchors for the tableLayoutPanel, and could not achieve the desired behaviour.
I'm currently trying to create a responsive winforms application.
What I try to archive:
I want to create a winforms layout which will have a responsive UI.
What is my problem:
I've added three pictureboxes(Close button / minimize application button / maximize application button) to the first row of the TableLayoutPanel.
Those three pictureboxes are positioned in the top right corner of the form. But the location of those pictureboxes won't change once I click the maximize button. Theyre staying at the exact position which makes them literally centered on the maximized screen.
Screenshot showing it:
What could I do to fix this issue? I appreciate any kind of suggestions and help.
What I have done so far:
Added a TableLayoutPanel which contains 2 Rows.
Added a Panel to the first row containing a pictureBox.
Added 3 more pictureBoxes to the pictureBox which are the buttons shown in the screenshot to close / minimize / maximize the application.
First, a TableLayoutPanel is quite a terrible control. It's hard to work with an has a noticeable performance issue once you get too many columns or rows. I suggest using two regular panels, one with Dock = Top and the other with Dock = Fill instead.
As for your buttons, I would position them inside the top panel, and set their anchor properties to Top and Right.
Further reading:
Control.Dock property.
Control.Anchor property.
You should anchor them to the right of their container. You should probably have a look at this:
https://msdn.microsoft.com/en-us/library/system.windows.forms.control.anchor(v=vs.110).aspx
I would like to create a form that can have multiple panels with a single picturebox in each panel and each panel can be moved around.
The panels need to fit on the maximum size of the monitor with each panel having equal width.
I have tried to get the form to start at the maximum size using the WindowState Property but cannot get the panels' width to be split depending on the number of panels that are there.
Also, I have tried to use a flow-panel as the main container and tried adding panels as required inside the flow-panel. The flow-panel is docked as "fit" in the form.
Can someone please explain how I can solve this problem?
Thank you in advance,
Varun
Edit: The form also needs to be able to let the user move the pictures in the picturebox around.
You can add splitContainers, that are 2 panels, and inside each panel you can add another split container, and then again and again...
To make panels fit on the maximum size of the form you'll have to use dock propery = fill or anchor it to top, right, bottom and left
Take a look at these links :
http://www.axure.com/dynamic-panels-advanced
http://www.axure.com/drag-and-drop-images-tutorial
How does one specify that a button centers itself in a container without having to specify a Location? Is it even possible?
The goal is to be able to center multiple buttons in a panel without having to perform calculations on their placement.
I know it is possible to center some controls on a form, not sure about a panel though. Anyway:
Disable the Left and Right anchors of your control if you want your controls to stay centered horizontally, and the Top and Bottom anchors if you want your controls to stay centered vertically,
In the designer window, select your control,
In the VS 'Format' menu, hit 'Center in form', then 'Horizontally' and/or 'Vertically'.
If you want to center several controls side to side, select them all and execute the above steps.
Controls will then stay centered in the form when the user resizes the window.
I'm not 100% sure of what you are asking, but try using a TableLayoutPanel, and drop one button in each cell of the table. If you anchor the TableLayoutPanel to the Top, Left, Bottom& Right, the Table will grow and shrink with the form, but each button will "float" relative to the top-left corner of it's containing cell.
Disabling all anchoring will keep the TableLayoutPanel at it's relative location within your form, but your buttons will remain spaced out evenly amongst one another.
Between standard control anchoring and/or the the TableLayoutPanel you should be able to find the correct type of anchoring that you desire.
I'm developing an app for Windows Mobile 5.0 and above, with C# and .NET Compact Framework 2.0 SP2.
I have a WinForm with two panels inside (upperPanel and bottomPanel). I want that upperPanel always fill 2/3 of form's height, and bottomPanel fills 1/3 of form's height. Both panels will fill completly form's width.
I've used this:
upperPanel.Dock = Fill;
bottomPanel.Dock = Bottom;
But upperPanel fills the form completly.
How can I do this? I want, more o less, the same gui on differents form factors and on landscape or protrait mode.
Thank you.
What you need to do is to put the bottom panel on first and set its Dock property to Bottom. Then set the panel's height to be 1/3 of the form's height. Finally, add a second panel and set its Dock property to Fill. The key here is that you want to add the control that will fill the remaining area to be added last. Alternatively, you can play around with the Bring to Front and Send to Back commands in Visual Studio to get the designer to cooperate.
You may also need to hook the OnSizeChanged event for the form and re-set the height of the bottom panel to account for layout changes. It's been a little while since I did compact framework programming, so I'm not sure.
Right click on the upperPanel and select Bring To Front. However, I don't think this will give you the result you want. When you resize, the bottom panel will remain the same height, while the upper panel will stretch to fill the form.
Using your docking settings, with this code might do the trick:
protected override void OnSizeChanged(EventArgs e)
{
base.OnSizeChanged(e);
this.bottomPanel.Height = Convert.ToInt32((double)this.Height / 3.0);
}
Set both panels to "not anchored". That is: Remove Dock-Value and clear the Anchor property. Then, move the controls so they are sized the way you'd like them to be sized.
After that, upon resizing the form, they should resize relatively.
EDIT
Oops, just tried it and sure it doesn't work. I mixed this up with a solution that automatically keeps controls centered within the window...
Well, I'd guess you then have to create a handler for the form's Resize event and manually align the controls after the form has been resized.
Go to Tools, Other Windows, Document Outline. Find the two panels, and swap the order of them. The control that has DockStyle.Fill has to come first for it to be docked correctly. (or last.. never sure which one it is, but it is one of them :p)
This won't solve the always 1/3 and 2/3 issue though... cause the bottom panel will have a fixed height (unless I am mistaken). I think maybe the TableLayoutPanel supports this though...
Update: As noted in the comments, that panel doesn't exist in the compact framework. So, I suppose the easiest solution to this problem would then try to use the docking, but update the height of the bottom panel whenever the size of the form changes.
If you want this to work perfectly you'll need to add some code to the Resize event of the Form which then specifically works out the relative sizes and places the controls in the correct place after a resize.
If you're not worried about losing precision and the forms aren't going to move much you can avoid this by using some relatively smart anchoring. Essentially you're going to have to select a "grower" (the part of the form that gets bigger, the bigger the form gets). In this scenario I would probably anchor the top part to Top | Left | Right and the bottom part to Top | Left | Right | Bottom. This would mean that the lower part of the form will get bigger if the form is expanded. In most cases this is acceptable. If it isn't use the Resize event and some code.
The easiest way to do this is to nest panels. Just set up panels for top bottom and fill. Then use panels within those panels to do the same. The only issues I've had therein are datagrid resizing, which is always a pain anyway. in that case, you have to use some code to resize the datagrid control on the form resize event.
I would like to add a point to #jasonh answer.
For the panel that occupies 2/3 of the form, you will have to set the AutoScroll property of the panel to true.
This will enable the panel to display scroll when the control size exceed the visibility to the user and also ensure the visibility of the smaller panel which is 1/3 of the forms height.
You can get the required design by using nested panels along with few setting with Anchoring and Docking Properties.Follow the following steps:
1) Add the Form and put a Panel1 on it. Set its Dock Property as 'Fill' and ResizeMode as 'Grow&Shrink'.
2) Add Second panel2 and set its Dock Property to 'Bottom', Set the Height and set the Anchor property to 'Top,Left'.
3)Add Third panel and set its Dock Property to 'None', Set the Height and set the Anchor property to 'Top,Bottom,Left,Right'.
Save and Compile. Now all the panels Would maintain their relative Positioning With resizing.