Hello Sazna,
in principle, your project contains already all the necessary functionality. However, when the menu is started, the items appear clipped, for example, you don't see the item contents. The cause of this issue is the mechanism how the menu calculates its layout and its size. For this purpose, the menu asks all items for their minimal size requirements and based on the provided information, the menu estimates its minimal size. To query the minimal size requirements the menu items implement the method GetMinimalSize(). For example, in case of the OpenMenuItem, implementation of the method calculates the space needed for the item caption and the arrow image enhanced by a padding of 10 pixel:
The item components in your project have been modified and enhanced by additional Text, etc. contents. The items require now more space. This enhancement, however, is not taken in account in the GetMinimalSize() implementation. Since your design expectations are unknown for me, I can't provide you a ready implementation of the GetMinimalSize() methods. But you can imagine, if you want two Text views to be arranged side by side, then you have to adapt the GetMinimalSize() method so it estimates the space needed for the first and the second text and adds them together - similarly to how the width of the text and image is added in the above implementation. The same is true for the item containing the ComboBox. There you have to estimate the minimal width of the box and add it to the width of the caption and evtl. other text views.
Please note, the value returned by GetMinimalSize() is used to estimate the minimal width of the menu itself. Consequently, if one item requires 100 pixel space and the second item requires 250 pixel, then the menu will assume total width for at lest 250 pixel. All items are then resized to fill this estimated width. The first item, originally 100 pixel wide, will thus be enlarged to 250 pixel.
This size alternation of a component have to be taken in account when you design the item. In the simplest case, you have to configure the Layout property of the views existing within the item (e.g. Text, ComboBox, ...). With the Layout property you can determine whether the view should has fixed size or whether it should be resized proportionally to size alternation of the superior component (of the item), or how should the view be aligned within the component. See also the section Configuring component layout. As soon as you have arranged the views within the item, configured the Layout properties of the views and adapted the GetMinimalSize() method of the item, the item should appear correctly within a menu.
One is, if a menu item with combo box is touched , a drop down option need to be shown.
Concerning the item with an embedded ComboBox (drop down list), this should work as it is. In your actual project the drop down list appears empty, because the list has no content. The property NoOfItems of the ComboBox component is 0. As soon as you setup the ComboBox with real values > 0, the list appears with some content. Of course, you will also need to implement the OnLoadItem method to provide the list contents:
second one is if a menu item to expand is touched then the screen should be expanded below the corresponding item.
The second application case implies that the height of the item changes. This means, you change the Bounds.h property of the item. This will trigger automatically the menu to recalculate its layout and the position of all following items. For example, the following code toggles the height of the item between 100 and 200 pixel:
if ( Bounds.h == 100 ) Bounds.h = 200;
else Bounds.h = 100;
And the final one is an open menu item to go another screen.
I suppose, with another screen you mean another menu, right? In such case, use the OpenMenuItem template. This template contains a property named SubMenuClass. When you assemble a menu from items, configure the property with the class implementing the menu where you want to navigate.
In this context a hint: actually you have one menu component in your project containing all the items. This is ok, as long as you plan just one menu screen. For complex, nested menu systems I would recommend to:
1. First add a new menu component to your project using the provided Menu component template. Thereupon you will get some new component named, e.g. Application::Menu.
2. Then derive from the just created menu component sub-classes - as many sub-classes as diverse menu screens you plan to implement.
3. Then edit the sub-classes and add items to the sub-classes. Don't add items to the original menu base class.
4. Using the OpenMenuItem you can implement navigation between the menus.
See also the chapters Creating components from templates: Menu and Creating components from templates: Open Menu Item.
I hope it helps you further.
Best regards
Paul Banach
