ContextQMD
Back to Devexpress

Tutorial: Creating a Simple Layout

windowsforms-2322-controls-and-libraries-form-layout-managers-layout-and-data-layout-controls-getting-started-tutorial-creating-a-simple-layout.md

latest2.7 KB
Original Source

Tutorial: Creating a Simple Layout

  • Sep 01, 2020
  • 8 minutes to read

This tutorial walks through the steps needed to create a simple layout using the Layout Control at design time. It demonstrates how to:

  • add controls to the Layout Control;
  • arrange them in a specific manner;
  • add empty regions to the layout;
  • apply size constraints to the controls.

At the end of the tutorial you will find a form that contains a Layout Control with a text editor and two buttons on it.

The Layout Control will maintain a consistent arrangement of the controls. Whenever the form is resized or the font settings are changed the controls will never overlap. Adding new controls or removing the existing ones will not damage the layout either.

  1. Create a new Windows Forms Application project.

  2. Locate the LayoutControl component within the Toolbox and drop it onto the form.

  3. Click the added Layout Control on the form and press the F4 key to open the Properties grid. Then set the LayoutControl’s Dock property to Fill, so that the control occupies the entire form:

  4. Locate the TextEdit control within the ToolBox and drop it onto the LayoutControl.

  5. Let’s add two buttons (OK and Cancel) to the LayoutControl. Locate SimpleButton in the ToolBox and drop it onto the Layout Control. Repeat this to add the second button. The final result will look like the image below:

  6. The Cancel button needs to be displayed to the right of the OK button, so it must be moved to this position. The Layout Control allows you to quickly rearrange items at design time using drag-and-drop operations.

  7. Generally, buttons in a dialog need to be anchored to the form’s right bottom corner. The OK and Cancel buttons are already anchored to the bottom. To anchor them to the right edge, add a resizable Empty Space Item to the left of the OK button. To accomplish this, right-click the Layout Control’s region that is not occupied by embedded controls and select Add Empty Space Item from the Customization Menu.

  8. This step shows how to set a custom size to the buttons and then lock it using the Customization Menu, so that the size of the buttons never changes even if the form is resized.

This tutorial has demonstrated the basic principles of working with the LayoutControl. You can try to extend this application by adding new controls to the layout, experiment with size constraints, combine layout items into groups and tabbed groups (using the Customization Menu) and explore the settings of layout items that can be accessed from the Properties grid.