XtraLayoutControl – Creating and Customizing Layout Items

In this lesson, I’ll show you how to arrange controls within a form, using the XtraLayoutControl. This control provides advanced capabilities for creating, customizing and supporting the layout of controls within forms.

Let’s take a look at design-time.

  1. First of all, I’ll drop the layout control onto a form, and make it occupy the entire form’s area.
  2. Then, I drop different controls onto the layout control.
  3. For this demo, I shall use a TextEdit control, a PictureEdit control, a MemoEdit control, and finally, a DataNavigator.
  4. Controls can only reside within the Layout Control with the help of Layout Items, the basic blocks of the layout.
  5. When a control is dropped onto the Layout Control, a layout item which holds it, is automatically created.
  6. Now, I’ll re-arrange the layout items.
  7. I select the layout item, one at a time, and change their location within the layout control using drag and drop.
  8. And I’m done.
  9. The next step that I’ll show you, will be customizing the Layout Items.
  10. Layout Items can display a label, which enables a description to be added to the control.
  11. I’ll select the first layout item, and I’ll change its label’s default text to “Category Name”.
  12. Now, I’ll specify the description for the next layout item.
  13. I want this label to be displayed at the item’s top.
  14. To do this, I invoke the item’s context menu, and select “Top”.
  15. As for the item that contains the PictureEdit, I’ll hide its label completely.
  16. I can resize a couple of items.
  17. And I’m done.
  18. Notice that when I resize the form, all the controls are proportionally resized.
  19. Now, let’s lock the size of the PictureEdit.
  20. To do this, I create an empty space item, and locate it below.
  21. Then, I resize the layout item to the desired shape, and size, and lock it.
  22. Next time, when the form is resized, the size of the PictureEdit, won’t be changed.
  23. Finally, I’ll bind all of the controls to the data source providing that it has already been created and is customized.
  24. I’ll bind the TextEdit to the “Category Name” field,
  25. The MemoEdit to the “Description” field,
  26. The PictureEdit to the “Picture” field,
  27. And finally, I can bind the DataNavigator to the Data Source itself, to enable navigation through the records.
  28. Now I can run the application to see the results.
  29. As I said before, when I resize the form, all the controls except the PictureEdit are automatically resized, and no control overlaps another one.
  30. The Layout Control also enables the form’s layout to be customized at runtime.
  31. For this purpose, I can invoke the customization form.
  32. While this form is visible, I can modify the form’s layout.
  33. I can hide layout items, make the hidden items visible, and I can unlock the layout item that contains the PictureEdit.
  34. And I’m done.
  35. I can close the customization form, and continue on working.