Some ideas for creating a re-sizable UI form

C# WinForms: I am trying to find a good way for my resizing issue in this picture attached. the blue area: I want it to have a FIXED sized regardless of the Form size. the red area: I want it to Resize when I resize the form. The Only time I want开发者_运维问答 the Blue area to Resize properly is when I change the language so some non-English lang so if the translated text in labels, check boxes,etc gets longer well I want it to still fit in there. I thought I can use TableLayout with two columns, drop a Panel inside the left column of this table layout and draw my controls inside it,... but how I can keep the left panel on a Fixed size for the blue area that meets my requirements ?

Thanks

You can easily use panels. Place both panels for blue and orange area on top panel, set its DockStyle to Top. For blue area set DockStyle to Left, for Orange - to Fill

If you need automatically adjust the width of orange part depending on its content, put a tableLayoutControl into it and place your controls into its cells. Then you should place it into another tableLayoutControl that holds both of your panels (blue and orange)

There is no other easy way to adjust the size of your left part depending on it's language (unless you know what the size will be for another language and programmatically change it)

EDIT:

As Frosty840 mentioned in comments, you can do the same trick with panel, just to set it's AutoSize to true and AutoSizeMode to GrowAndShrink

This should work:

Drop a FlowLayoutPanel on your Form. Drop Two Panels onto it. One for the left content, one for the right. Set the AutoSize property of the left one to true. Inside this Panel I would use a TableLayoutPanel with AutoSize enabled, for the controls.

On the second Panel you should Enable Anchor Left, Top and Right to fore it to take the rest of the available space.

For the fine tuning you can set Margin and Padding of the controls.

Hope that helps. In general you can achive nearly every kind of autosizing UI with winforms, you just have to figure out what's the best way. I am almost certain that I could do this in under 30 minutes.

Some general properties/controls that can be used to achive a resizable form:

• Anchor (Top, Left, Bottom, Right). Defines how a control behaves on resizing. If you want a control to be on the right side on resizing, set Anchor to Top, Right. If you want it to grow horizontally, set it to Top, Left, Right. If you want it to grow horizontally and vertically, set it to Top, Left, Bottom, Right. For a control inside a FlowLayoutPanel or TableLayoutPanel the anchor behaves a little bit different and defines on which side(s) a control should be attached.

• Dock, allows a Control to attach to its parent, either on one side (Top, Left, Bottom or Right, or use the max. available space (Fill)

• Autosize and AutoSizeMode (GrowOnly, GrowAndShring) - Allows a control to resize to the needed or availabe space. Can be used with MinimumSize and MaximumSize.

• Margin - Defines the space a control claims between itself and the parent (or next one in the stack). Can be set for Left, Right, Top and Bottom

• Padding - Defines the space a control claimes between itself and it's childs.

• TableLayoutPanel is a container in which you can define rows an columns that have a fixed width, a percent value or just autosize. If you drop a control inside a TableLayoutPanel you can tell it to use multiple columns/rows with the Rowspan/Colspan property

• FlowLayoutPanel - Puts all controls on a horizontal or vertical stack.

• If you have a nested structure if may be difficult select or move a control. Visual Studio has a tool window that shows the document tree that helps you with that.

• In general: Keep it simple. Often there is an easier solution than nesting a TableLayoutPanel inside a TableLayoutPanel inside a TableLayoutPanel (you get the point, right?)

If I were you and working on the new UI screen, I would give WPF /XAML a shot. It is much better when it comes to resizing and layout :)

I think you can use the SplitContainer for that. You can put the blue part in the left panel and the red part in the right panel of the SplitContainer and keep the slider postion fixed.

For demo check out this article.