Implementing a FlexLayout header for a Notebook component

A Flex Layout is added when the Tabs As Dropdown property is set to true. The flex layout is fully designable, you can add regions and the setting for each region can be changed. You can add controls to each region, except for the first one, which contains the dropdown selector for the grouped tabs.

To implement a Flex Layout header:

Select the NoteBook component.
In the Properties pane, Select Miscellaneous > Specific Attributes.
Set the Tabs As Dropdown property to true.

Note: After turning on the Tabs As Dropdown property, the form designer is notified with a message that the form must be re-generated. And once the form is closed and re-opened, the Flex header appears at the top of the notebook.
Optionally, click Add, represented by a plus icon, to add regions to the flex layout.
Optionally, click the Edit Flex Layou Attributes to change the width of the flex layout region.
In the Regions pane, select the desired region and change the value for the Length property.

Note: The first region is set to a fixed unit and length of 20.
Optionally, you can change the height of the header to make it shorter or taller.
Select Layout > Size.
Change the value of the Height.

Note: Before changing the value of the Height property, make sure that the value for Lock Size is set to False.