Lay Out a Form That Resizes Well

Place labels and inputs, connect them to table columns, line up clean rows, and choose what should move or stretch when the form area changes size.

This walkthrough follows the current Admin Forms implementation. Every screenshot was captured directly from the running CSharpDB.Admin project using a fictional customer record. Select a screenshot to open it at full size. Step 9 also includes an interactive example to demonstrate resizing. You will build a simple customer-details layout and learn exactly what the designer's alignment buttons and anchor presets do.

1. Start a form

Open CSharpDB Admin with a database containing a table you can use for practice. The examples call that table customers, with first_name, email, credit_limit, and notes columns. Use equivalent columns from your own table; these names are examples, and this tutorial does not create a table for you.

There are two useful starting points:

1. Start with generated controls: right-click your table in Object Explorer and choose Design Form…. The designer creates a label and a bound input for each column. It chooses the input type from the column type and lays out a single vertical column of pairs.
2. Practice from a blank canvas: use New Form, then choose the table in Select source…. This route currently sets the source without generating controls. Use it for the manual placement exercises below.

Double-click the form title to name it Customer Details Practice. Press Enter or leave the title box to commit the name. Choose Desktop and Fixed in the toolbar for the first exercises. The Desktop design width is 1200 pixels.

If you started with generated controls, select and adjust the existing pairs instead of adding a second copy of each field. Generated labels and inputs remain independently editable.

Checkpoint: the correct table is selected, the form has a recognizable name, and Desktop / Fixed is active.

2. Know the workspace

Toolbox contains control types and the Align tools. Layers lists the controls already on the form and helps select items that overlap. The canvas shows their positions. Properties shows control settings when exactly one control is selected.

The boxes on the design canvas are previews. Enter real values in Data Entry after saving; a disabled-looking input in the designer is normal.

3. Place your first label and input

Place the label

1. In Toolbox, under Layout, click Label.
2. Click an empty point near the top-left of the canvas. This places one label. You choose the tool and then click the canvas; you do not drag the toolbox item onto it.
3. The designer returns to Pointer mode after placement. With the label selected, find the Text section in Properties and set Text to First name.
4. Under Position & Size, set X = 24, Y = 24, W = 168, and H = 32.

Place the input beside it

1. In Toolbox, under Input Controls, click Text.
2. Click an empty part of the canvas to the right of the label.
3. Set X = 216, Y = 24, W = 960, and H = 32.
4. Leave Resize Mode at Anchored for now. You will set its preset after arranging the rows.

These values give the label a 24-pixel left margin, leave a 24-pixel gap between label and input, and end the input at X = 1176: 24 pixels before the Desktop canvas's right edge. Scroll the designer horizontally if your window cannot display all 1200 pixels.

New forms use an 8-pixel snap grid. Placement, dragging, resizing, and numeric rectangle edits snap to that grid. Use multiples of 8 for predictable values. Existing generated controls can have other sizes—for example, the default generator uses a 34-pixel row height—so a numeric edit may snap an old value to the nearest grid step.

Checkpoint: one static label and one input sit side by side with the same Y and H. They are two separate controls.

4. Connect the input to a data column

1. Select the Text input, not its label.
2. In Properties, find Data Binding → Field and select first_name from the source table.
3. Keep Mode = Two Way for an ordinary editable input.
4. Optionally set Input → Placeholder to Enter first name. Leave Read Only unchecked for an editable field.

Text on a Label changes its caption. Placeholder provides an input hint. Field connects an input to data. Changing a caption or placeholder never changes the input's binding. A Label is static text and has no Data Binding section.

If your table has identity or row-version columns, generated controls for those fields are read-only. View-backed forms are also read-only sources. Practice editing with ordinary writable table columns.

Checkpoint: selecting the input shows the intended Field. Selecting its label shows the caption instead.

5. Build the remaining rows efficiently

Use this layout as a target. The numbers refer to Desktop positions. You can enter them directly, or roughly place the controls and use the next section to tidy them.

Duplicate a pair

1. Click the first label, then hold Shift and click its input. Both should show as selected. You can also Shift-click their entries in Layers.
2. Choose Duplicate in the toolbar or Toolbox. Ctrl + D is the keyboard shortcut when the designer has focus.
3. Select each new control separately and set its Y to 72. Set the new label's X to 24 and the input's X to 216.
4. Change the new label's Text to Email and the new input's Field to email. Update any copied placeholder as well.
5. Repeat for the remaining rows. For each new input, choose Control → Type to change Text to Number or Textarea, then verify its Field and size.

A duplicate has a new control ID but keeps the original's binding and properties. Always change the copied Field when creating a different data point. A duplicated First name input still edits first_name until you rebind it.

Select precisely

A plain click selects one control. Shift-click adds another; it does not toggle an already selected control off. To rebuild a selection, click empty canvas first. In Pointer mode, dragging a rectangle across empty canvas selects intersecting controls; hold Shift to add that area to the selection.

Use Layers when selecting around overlapping items. Multi-selection supports actions such as alignment, copy, duplicate, and delete. The canvas drag currently moves the control you grabbed, rather than translating the entire selection as a group. Properties edits also require a single selected control.

6. Align edges and distribute rows

Alignment changes where controls are placed now. Anchors, covered next, describe how a control responds to a later change in the form area's size. Do the placement work in Desktop first.

Make two clean columns

1. Select only the labels. In Toolbox → Align, choose Left. Their left edges move to the smallest X among those labels.
2. Clear the selection, select only the inputs, and choose Left again. Their left edges line up independently of the labels.
3. Select a label and its matching input, then choose Top to put them on the same Y. Repeat for the other rows that need correction.
4. For consistent input widths, select each input individually and enter the same W. Align does not equalize widths or heights.

Keep label and input columns separate when aligning Left or Right. Selecting every label and input and choosing Left would move them into one overlapping column. Likewise, choosing Top for an entire vertical stack collapses it into one row.

The reference edge is determined by the selection's outermost position, not by which control you clicked last. If you need X = 24 exactly, correct any stray label lying further left before using Left.

Space a vertical stack evenly

1. Put the first label at Y = 24 and the last label at Y = 168.
2. Select the four labels and choose Dist V. The two inner labels move to Y = 72 and 120. The first and last keep their positions.
3. Select each label/input pair and choose Top to match the input to its label, or repeat Dist V on the four inputs with the same endpoints.

Dist V is not an equal-empty-gap command. It spaces top positions, so controls of different heights can have different gaps or overlap. For a tall Notes box, keep the same row start but leave sufficient space beneath it. Dist H has the same distinction for widths. These tools do not resize or automatically avoid collisions.

Use Undo immediately if an alignment result is wrong. Perform these operations on Desktop: the alignment tools and numeric Position & Size fields edit the base rectangle, even when another breakpoint is selected.

Checkpoint: all labels share X = 24, all inputs share X = 216, and every pair has the same Y.

7. Understand what anchors preserve

In Fixed layout with Resize Mode = Anchored, anchors preserve the control's distances from chosen edges of its containing form area. A right anchor refers to the form area's right edge, not the neighboring control. It does not attach a label to its input.

• Left only: keep the left distance and control width. More room appears on the right when the form widens.
• Right only: keep the right distance and control width. The control moves horizontally as the form widens or narrows.
• Left + Right: keep both distances. The control's width grows or shrinks to fit between them.
• Top only / Bottom only: apply the same idea vertically, keeping height constant.
• Top + Bottom: keep both vertical distances. Height grows or shrinks with the containing area.

The margin comes from where you placed the control

The main form uses a 1200-pixel Desktop reference width. For the input you placed at X = 216 with W = 960, the right margin is 1200 − 216 − 960 = 24 pixels. With Stretch Across, a 1000-pixel form area gives it a width of 1000 − 216 − 24 = 760 pixels. Its left edge stays at 216.

Compare a default generated input at X = 220 with W = 320: its right margin is 660 pixels. Applying Stretch Across preserves that large right margin. To make it fill a row, first widen the input toward the Desktop right edge, then choose Stretch Across. The preset does not reposition the control or invent a smaller margin.

Height and minimum sizes

The main form's reference height is at least 500 pixels; if a control extends further down, it grows to the lowest control edge plus 24 pixels. The designer's visible canvas is not itself that reference height. Bottom anchors preserve the margin relative to the runtime reference area, not the bottom of your monitor. Vertical movement or stretching is visible only when the containing form area actually changes height.

Min W and Min H are runtime lower limits, with default values of 24 and 16. For this exercise, set an input's Min W to 160 and Min H to 32. Stretching cannot make it smaller than these limits in the wide Fixed layout. If there is too little room, minimum sizes may force overflow or overlap; they do not provide automatic collision handling. Narrow stacked mode uses its own sizing rules.

Controls hosted inside a Tab Control use that container's child form area as their anchor reference. The numeric examples here are for top-level controls on the main form.

8. Choose an anchor preset

1. Select exactly one control.
2. Open Properties → Position & Size.
3. Set Resize Mode to Anchored.
4. Choose an Anchor Preset. The Left, Right, Top, and Bottom checkboxes below it update to show the combination.
5. Save and check the result in Data Entry at another size.

Custom is a description of the checkbox combination. Selecting Custom alone makes no changes. To build a bottom strip, start with Stretch Across, turn Bottom on, and turn Top off. The preset displays Custom because Left + Right + Bottom is not one of the named presets.

The editor keeps at least one horizontal and one vertical edge enabled. If you uncheck the only horizontal edge, it enables the opposite one; it does the equivalent vertically. There is no center or completely unanchored preset.

Anchored versus Scale With Form

Scale With Form converts the control's X, Y, W, and H to percentages of the reference area. At a wider form size, it changes both horizontal position and width proportionally. It also scales vertical position and height when the containing height changes. This is percentage-based control geometry; it does not scale the font like an image zoom.

Anchor checkboxes remain visible, but their edge rules are not used for the Fixed layout's geometry while Scale With Form is selected. Choosing a preset does not automatically switch Resize Mode back to Anchored. Use Anchored for fixed margins and ordinary input heights; try Scale With Form when proportionally changing the whole control rectangle is the intended behavior.

9. Try the anchor demo

Choose a preset and change the form's width or height. The dashed outline marks the original 1200 × 500 reference area. The sample control starts at X = 216, Y = 72, W = 960, H = 112, with Min W = 160 and Min H = 32.

Interactive example: the sliders below resize this example so you can see how an anchored control would respond. They are tutorial controls; Admin does not have these sliders. To check your own form in Admin, save it, open Data Entry, and resize the browser window.

This example demonstrates anchor geometry in wide Fixed layout with a constant reference rectangle. It does not simulate Elastic grids, narrow-screen stacking, data binding, or reference-height changes caused by adding controls. See step 11 for screenshots of the actual Admin form at different sizes.

1. Stretch Across: move width to 1440. X stays 216 and W becomes 1200; the right margin remains 24.
2. Top Right: at width 1440, W stays 960 and X becomes 456. The control moves instead of stretching.
3. Stretch Both: keep width 1440 and increase height to 800. The control becomes 1200 × 412, with X and Y unchanged.
4. Scale With Form: at 1440 × 800, X becomes 259.2, Y becomes 115.2, W becomes 1152, and H becomes 179.2. All four numbers scale proportionally.
5. Try a narrow width: return to Anchored and compare Top Right with Stretch Across. A fixed-width control can extend outside the form area; an anchor is not an automatic fit-to-screen command.

10. Apply the settings to your form

11. Check Fixed, Elastic, and smaller layouts

The toolbar's Fixed / Elastic choice applies to the form's runtime layout. The selected control's Anchored / Scale With Form choice is a separate setting.

Responsive CSS checks both the viewport and the named form-area container. A large browser window can still give the form a narrow area when surrounding panels occupy space. Elastic uses grid flow rather than anchored absolute placement; edge presets and Scale With Form do not control its geometry in the same way as Fixed.

Use the designer's breakpoint buttons deliberately

Desktop, Tablet, and Mobile use design widths of 1200, 768, and 375 pixels. The design canvas shows rectangles; it is not a live simulation of all Data Entry CSS, anchor stretching, or Elastic flow.

1. Finish the base placement, numeric X/Y/W/H edits, and alignment on Desktop.
2. Switch to Mobile or Tablet to inspect the corresponding design view. Select a control to find Breakpoint: mobile/tablet → Visible at this breakpoint.
3. Dragging or using resize handles in those views stores breakpoint-specific rectangle overrides. The numeric Position & Size fields and Align tools still edit the base rectangle; use the canvas handles for breakpoint-specific geometry.
4. For mobile stacking, keep each label just before its input in reading order. Runtime stack order is derived from the Mobile rectangle's Y and then X; if there is no override, it uses the base rectangle. Matching Y and placing the label to the left works naturally.
5. Save, open Data Entry, and resize the real browser/form area to verify the final result.

Tablet overrides influence Elastic column spans, and Mobile overrides influence stack order. They are not a general replacement for the Fixed renderer's Desktop anchor geometry. If an item is hidden at a breakpoint, hide its separate label too when appropriate.

For an initial form, complete and verify the Fixed version first. If you try Elastic afterward, check the whole layout: its automatic grid placement does not preserve every Desktop X position or blank gap. Keep whichever mode matches how you want the form to behave.

The same saved form at three real Admin sizes

These captures show the customer form loaded in Admin's Data Entry view. The labels use Top Left and all inputs, including Notes, use Stretch Across. The sample values are fictional. The form-area crops below preserve the actual rendered pixels.

12. Save and verify in Data Entry

1. Choose Save in the designer and wait for Saved!. A selected source is required.
2. Choose Data Entry. This action becomes available after the form has been saved.
3. Open a record and confirm each field displays the expected value. In your practice data, try editing an ordinary writable field and saving the record.
4. At a wide form size, verify labels stay put and Stretch Across inputs maintain their intended left and right margins.
5. Reduce the available width and check intermediate sizes for overlap. Then check the narrow stacked view for label/input order.
6. If you used Bottom anchors or vertical stretching, change the available height too. Confirm the form's container actually changes height before expecting vertical movement.
7. Return to the designer for adjustments. Save again, then reopen Data Entry to check the updated saved definition. Reopen the designer later to verify the layout persisted.

Designer Save stores the form definition. Saving a record in Data Entry stores record data. Unsaved design edits are not the definition that Data Entry loads.

Finished: your labels and inputs are bound correctly, rows line up, the chosen anchors behave as expected, and the saved form works at both wide and narrow sizes.

Troubleshooting

Quick reference

For a predictable workflow while editing text or numeric properties, use the visible toolbar buttons for designer commands. Finish the property edit and return focus to the canvas before using keyboard shortcuts.

Continue with the Admin UI guide, custom form controls, or more tutorials.