XtraLayoutControl – Layout Groups and Tabbed Groups

In this lesson, I’ll demonstrate how to join layout items into groups and arrange those groups into tabbed pages.

  1. First, I’d like to point out that I’ve skipped those steps where I added the “Product Name” TextEdit Control, and the “Unit Price” SpinEdit Control.
  2. To create a group, we first select the desired items by clicking them while holding down the shift key.
  3. Then, I right-click the multiple selection and choose the “Group” command from the context menu.
  4. I can create the second group in exactly the same way.
  5. Note that it isn’t necessary to have multiple items selected to create a group.
  6. You can create a group from just a single item.
  7. To ungroup layout items, just choose the “Ungroup” command.
  8. As you can see, a layout group represents a container of layout items and other groups (if any) within the XtraLayout Control.
  9. It has a border, and a caption that can optionally be hidden.
  10. To change the group’s caption, I can use its “Text” property.
  11. Let the first one here be “Categories”.
  12. Then I can specify the caption for the second group.
  13. This time, let it be “Products”
  14. The XtraLayout Control, enables images to be displayed with group captions.
  15. To do this, I first need to specify the source of the images.
  16. I select the layout control, and assign the source of images to the “CaptionImages” property.
  17. Then, I can select the “Categories” group for example, and specify the image to display within its caption.
  18. And I can do the same with the “Products” group.
  19. The XtraLayout Control enables the user to expand or collapse its groups.
  20. To enable this functionality for a particular group, I select the desired group, and show its “ExpandButton”.
  21. The “ExpandButtonLocation” property determines the location of this button when the group is displayed.
  22. Now, I can collapse and expand products.
  23. To conserve space on the form while arranging a large number of controls, you can arrange controls into tabbed pages.
  24. To create a tabbed page, you need to select a group and use the “Create Tabbed Group” command.
  25. To create a second tabbed page, I can simply drag the “Categories” group to the tab header area.
  26. End-users can create and customize tab groups in the same manner.
  27. They can freely create new tabs from existing groups, drag controls to and out of tab pages, re-order tabs while dragging them, and so on…

For more detailed information on using the XtraLayout Control, please see the documentation.