GettingStartedControls Part 4

---

Menu using Tabs

As basis for step 4 of our GettingStartedControls tutorial, please use your own created solution from the previous "GettingStartedControls" tutorial.

Our menu tabsfinal scene canwill belook seenlike on the bottom of the climate scene in below image.
this:

Our goal is to create a tab bar using customized radio buttons to enable the user to switch between the different scenes. As this bar shouldn't be displayed permanently, it will be put into a drawer control. This way it can be made visible by hovering an image and it can be hidden again by clicking on a close button. The buttons will be realized using customized radio buttons.

This tab bar will be placed on the bottom of every screen. To avoid having to create this bar inside every scene where it should be displayed, we will define a separate scene,scene whichand we canwill reuse it on all screens.

Importing

Import new images

Just like in previous scenes, let's first import new images for this scene. From the menu, click (Import > Import Resources) and select the images in /cgi_studio_content/Resources/GettingStartedControls/MenuTabs:

---

Creation of a new control class using an existing control as template

We will use the built-in Scene Composer controls but they will be customized with new images. Therefore these images have to be imported into the Scene Composer solution.

Creating the TabButton

We will use Scene Composer's built-in RadioButtons as controls for our tab bar. Since the usual RadioButtons' appearance doesn't fit into a tab bar optically, we are going to customize the RadioButton to create a TabButton. We will use the radio button control as our base template.

Remove

The first step is to copy the RadioButton'soriginal KnobRadioButton

which Inis inside the SolutionConstruction ExplorerKit navigateinto our solution.
Open the References folder to "Referencesfind >the SCL:ConstructionKit. ConstructionKitInside >you ConstructionKitwill >find all controls, shapes, bitmaps and many more elements which are provided to you via the ToolBox. Within the Documentation you will even find a description on how to create your own Construction Kit (Reusable Solution Libraries).

Open the Controls >folder RadioButton"of the Construction Kit and copy the RadioButton control either viausing the context menu "Copy"copy oritem theinto keyboardyour shortcutsolution <CtrlControls +folder C>.

The RadioButton control is in the clipboard and ready to be pasted. In the Solution Explorer navigate to "Solution > Controls" and paste the RadioButton control either via theusing context menu "Paste"paste (or using CTRL+C and CTRL+V). Rename the keyboardcopy shortcutusing <Ctrlthe +F2 V>key into the"TabButton". Controls folder. Explorer

As you can see thatyou already have a new entry inside the RadioButtonToolbox. hasThis beenwill pastedbe intohelpful when reusing the Solution/ControlsTabButton.

folder.

If you double click the TabButton in the Solution Explorer rename the RadioButton control in the Solutions/Controls folder to "TabButton" either via the context menu "Rename" or the keyboard shortcut <F2>.

In the Solution ExplorerExplorer, you canwill seebe that the RadioButton in the Solutions/Controls folder is renamedable to "TabButton". In the Toolbox panel's [ Controls ] section you can see a new folder "Touchable" with the newly created TabButton. In the Solution Explorer or in the Toolbox double-click the newly created TabButton.

In the Scene Editor you can see the TabButton, which currently looks like Scene Composer's RadioButton. In the Scene Tree panel you can see the complete design of the TabButton,copied whichRadioButton. is

In the RadioButton. On the Scene Tree panel's left sidepanel, you can see the scene/node structure,structure onof the control. In the right sidepanel, you can see the applied behaviors that form the control's logic.

In the Scene Tree panel navigate to and select the RadioButtonNode (TabButton > StackLayout > OverlayLayout > RadioButtonNode). In the Scene Tree panel's right side select the behavior action as in the table below. In the Properties panel click on the magnifying glass icon next to the Image property. The Choose Item dialog will be opened In the "Choose Item" dialog select the image as in the table below and click [ OK ]. 

The "Choose Item" dialog will be closed. The respective image has been changed. In the Scene Editor the TabButton (former RadioButton) has changed as you can see in the image below.
RadioButtonNode - Behavior Image
SetNormalImage /Resources/MenuTabs/ButtonNorma_BkBmp SetSelectedImage /Resources/MenuTabs/ButtonNorma_Prss_OreBmp SetSelectedPressedImage /Resources/MenuTabs/ButtonNorma_Prss_OreBmp

SetNormalPressedImage

/Resources/MenuTabs/ButtonNorma_Prss_OreBmp

Configure the Text's Position

In the Scene Tree panel select the TextNode (TabButton > StackLayout > TextNode). In the Properties panel's [ Layout ] section change the HorizontalAlignment and the Margin according to the table below.

In the Scene Editor panel minor changes in text positioning are visible.
Target Node
HorizontalAlignment
Margin
Left Right RadioButtonNode HCenter 6 6 In the Scene Tree panel select the TextNode (TabButton > StackLayout > TextNode). In the Scene Tree panel's right side select the ProviceTextProperty. In the Property panel change the Text property to "TabButton".

In the Scene Editor the TabButton's text is changed to "TabButton". In the Scene Tree panel select the TextNode and drag it onto the root node TabButton, which is called "TabButton".

In the Scene Tree panel you can see that the TextNode is now directly under the TabButton. In the Scene Editor the TextNode with the text "TabButton" is visible. It is hidden behind the Image of the RadioButtonNode.  In the Scene Tree panel select the RadioButtonNode and drag it onto the root node TabButton as well.

In the Scene Tree panel you can see that the RadioButtonNode is now between the TabButton and the TextNode. In the Scene Editor the TextNode with the text "TabButton" is visible again as in the picture below. In the Scene Tree panel select the StackLayout (with the OverlayLayout) and delete it either via the context menu "Delete" or by pressing the delete key on your keyboard.

The Delete Item dialog will be opened displaying which items are going to be deleted. In the Delete Item dialog press the [ OK ] button.

In the Scene Tree panel you can see that StackLayout and OverlayLayout have been deleted. The Scene Tree looks as in the image below. In the Scene Tree panel select the RadioButtonNode. In the Properties panel's [ Layout ] section change Alignment and Margin properties as well as the StretchBehavior according to the table below.

In the Scene Editor the TextNode's text "TabButton" is neatly positioned in the center of the button (see image below). We have successfullylogic created and customized our own TabButton control, which can be used like any other control.
  Target Node
Vertical
Horizontal
Margin
StretchBehavior
Alignment
Left Right RadioButtonNode HCenter HCenter 0 0 Fill

Creating MenuTabs Scene

Create a new scene via the menu "Scene" - "New 2D Scene" or press < Ctrl+2 > on your keyboard

The "Add New Scene 2D" dialog will be opened.
In the first row select "/Scenes" from the drop-down menu. Enter "SceneMenuTabs" as name and press [ OK ]. We use the prefix "Scene" to have all scenes listed next to each other in the Solution Explorer panel.

A new scene "SceneMenuTabs" is created and visible in the Solution Explorer panel in folder "Scenes". The new scene is opened in the Scene Editor and in the Scene Tree panel. In the Scene Tree panel you can see that the scene already has a camera. In the Render Targets panel you can see that the camera is already added to the RenderTarget. In the Render Targets panel check the checkbox of "SceneMenuTabs\Camera" in order to enable rendering.

Rendering of the scene is enabled. In the Scene Tree panel select the Camera. In the Properties panel's [ Camera ] section configure the Viewport height to 54. 

The value of this property is calculated automatically. In order to be able to edit it, you have to click on the [A] button to the property's right, which will switch auto off.

In the Scene Editor you can see that the height of the viewport is reduced to 54, which is about the height of the TabButton control. In the Scene Tree panel select the Camera. In the Properties panel's [ Camera ] section change the sequence number to 3.

The camera's sequence number is set to 3. In the Scene Tree panel the red Information/Warning/Error square disappears. From the Toolbox panel's [ Controls ] section under "Container" drag a GroupBox into the Scene Tree panel directly onto SceneMenuTabs.

In the Scene Tree panel you can see that there is a GroupBox node. In the Scene Editor you can see a square with a white dashed outline. In the Scene Tree panel select the GroupBox node. In the Properties panel's [ Layout ] section configure the Size according to the table below.

The value of this property is calculated automatically. In order to be able to edit it, you have to click on the [A] button to the property's right, which will switch auto off.

In the Scene Editor the white dashed outline will match the yellow line that marks the viewport.
Target Node
Size
X
Y
GroupBox
1024
54
In the Scene Tree panel click on the little triangle to the left of the GroupBox.

In the Scene Tree panel the GroupBox node will open and you can see the Content anchor below. From the Toolbox panel's [ Node 2D ] section drag a GridLayout into the Scene Tree panel directly onto the GroupBox's Content anchor.

In the Scene Tree panel you can see the GridLayout node. In the Scene Tree panel select the GridLayout. In the Properties panel's [ Layouter ] section change the Column Count to 6.

The Column Count has been changed to 6. From the Toolbox panel's [ Controls ] section under "Touchable <ConstructionKit>" drag a Button into the Scene Tree panel directly onto the GridLayout.

In the Scene Tree panel you can see that a Button has been added to the GridLayout. In the Scene Editor you can see a blue Button. From the Toolbox panel's [ Controls ] section under "Touchable" (at the bottom of the list) drag and drop 4 TabButtons into the Scene Tree panel directly onto the GridLayout.

In the Scene Tree panel you can see the 4 TabButtons below the Button inside of the GridLayout. In the Scene Editor you can see the 4 TabButtons (with the dark background) are rendered directly over the Button, hiding the blue Button. From the Toolbox panel's [ Controls ] section under "Touchable <ConstructionKit>" drag a TextButton into the Scene Tree panel directly onto the GridLayout.

In the Scene Tree panel you can see that the TextButton has been added to the GridLayout. In the Scene Editor you can see the blue TextButton that is rendered. The TextButton is rendered over the Button and the TabButtons, hiding them. In the Scene Tree panel select the GridLayout. In the Properties panel's [ Layout ] section configure GridAutoArrangement for "horizontal".

In the Scene Tree panel you can see that the Button, TabButtons and TextButton are neatly arranged. In the Scene Tree panel right-click on the GridLayout and choose "Configure Layouter..." from the context menu.

The Grid Layout Editor will be opened. In the Grid Layout Editor you can see that the Controls are bunched together inside of the first cell.

The Controls don't have to be configured for a certain column. The Controls will be arranged at runtime using the GridAutoArrangement property that we configured in the previous step.behaviors.

In the Grid Layout Editor configure the columns' widths according to the table below and press [ OK ].

In the Scene Editor you can see that the columns widths have changed.
Column 1
Column 2
Column 3
Column 4
Column 5
Column 6
0.10 0.20 0.20 0.20
0.20
0.10

First, ensure that you are inside the TabButton control class (see above). Now Select the RadioButtonNode. In the right panel of the SceneTree select the SetNormalImage action. Click onto the magnifying glass icon of the Image property to change the "RadioButtonNormalBmp".

In the Choose Item dialog, select the "ButtonNorma_BkBmp" from the recently imported images.

Repeat similar steps to change the image properties of following behaviors to "ButtonNorma_Prss_OreBmp":

To change the default text select the TextNode and set the left and right Margin to 6. Also set the horizontal alignment to HCenter.

Then select the ProvideTextProperty node in the right panel. Change the Text property to "TabButton".

Our next adaption is to move the text over the rectangle, so that it looks more like a normal button. To realize this, we have to restructure the node's hierarchy.

Drag the "TextNode" on top of the Root Node "TabButton". Drag the "RadioButtonNode" onto the Root Node "TabButton" as well. The StackLayout and the OverlayLayout can be removed now, the Delete Item dialog can be confirmed with OK.

We may have to re-order the nodes to ensure that the text will be drawn on top of the background and the FocusNode is on top of the TextNode. You can adapt the order using drag and drop. Please note that we need a flat hierarchy inside the TabButton. The final result will look like this:

A little bit of tuning is still necessary to reach our final goal. Select the RadioButtonNode and change both alignment properties to stretch and the StretchBehavior to "Fill". Reset the margin to 0.

The TabButton control now looks like this:

Now we have successfully created our own TabButton Control, which can be used like any other control.

Creating Menu Tabs scene

Next, we are going to create a new 2D Scene that will be available in all Screens (e.g. in the bottom of SceneHome as well as in the bottom of SceneClimate etc.) This scene will contain a Drawer Control and a GroupBox with our TabButtons for navigation.

Create a new 2D scene named "SceneMenuTabs".

We have to configure the default camera to only show the part with the tab bar. The tab bar will have a width of 1024 pixels and a height of just 54 pixels. The tab bar should be positioned at a y-position of 714 pixels.

The camera provides a Viewport property to be able to specify these values.

Drag a GroupBox from the ToolBox Controls into the root of your scene which will be used as container for our RadioButtons. Configure this GroupBox with a size of (1024|54).

Drag a new GridLayout from the ToolBox Nodes 2D into the content anchor of the GroupBox.

Set the Column Count of the GridLayout to 6.

Add a Button to the GridLayout, then add 4 TabButtons to the GridLayout and finally, add a TextButton to the GridLayout. Please check the order of the Controls to be as in the image below.

Configure the GridLayout to have GridAutoArrangement "horizontal"

The Controls will then be arranged automatically.

Still, some configuration of the GridLayout is missing. In order to define the size of the Buttons and TabButtons, the widths of the columns in the GridLayout have to be configured using the Grid Layout Editor, which can be opened using the context menu of the GridLayout (Right-click on the GridLayout in the SceneTree - "Configure Layouter...").

Next, we will configure the texts of the Button, TabButtons and TextButton. For the text of the Button, we drag and drop a Text Control onto the Content anchor of the Button.

In the Properties of this Text Control, we set the Text to ">", the HorizontalAlignment to HCenter and VerticalAlignment to VCenter. We can rename the Button itself to "Next" in the Scene Tree Panel.

We also need to adjust the images of the Button. Replace the Normal Image with ButtonNorma_BkBmp and replace the Pressed and Focused Image with ButtonNorma_Prss_OreBmp as you can see below.

The TabButtons' texts can be edited in the TabButtons' Properties. Configure them with the texts "HOME", "CLIMATE", "PHONE" and "OPTIONS" (from left to right).

Now we can also name the TabButtons according to their individual functionalities (from left to right):

We can rename this TextButton to "CloseButton" in the SceneTreePanel. The text of this TextButton should be set to "X". Similar to the Button, the Button's images need to be replaced as shown in the image below.

In the GroupBox we have to set the Default Selected Object, which is the "TabHome" TabButton. Click the magnifying glass next to the "Default Selected Object".

In the Choose Item dialog select the TabHome TabButton from our scene and click ok.

In the SceneEditor we can now see our TabBar.

Finally, the SceneTree should look like this:

---

Integration of the SceneMenuTabs as Navigation bar

To integrate the SceneMenuTabs we have to shrink our Home and Climate scenes. The navigation bar needs 54 pixel of space at the bottom. Therefore we have to change the viewport settings of the cameras of the following scenes:

If the camera of SceneMenuTabs isn't already attached to a Render Target, please open the SceneMenuTabs, drag the camera from the Scene Tree Panel onto the RenderTarget in the Render Targets Panel. If necessary, change the property "Sequence Number" inside the cameras. The number is also displayed in parenthesis in the RenderTarget list (see below).

If you open the View menu Display - Display-0 you will see:

What is still missing is the scene switch when hitting one of our TabButtons. Again we have to use an EventHandler for that purpose.

Instead of a direct click action, we will now use a state of our TabButtons buttons. Since they are created out of a RadioButton, they already handle an internal "selected" state. This is what we can use to execute actions when the state changes.

Select the TabHome TabButton, open the context menu of the TabHome TabButton and choose "Add EventHandler".

An EventHandler tab should be available now in the properties panel. Choose the Event "StateChanged". The condition "Check Control State" is already configured as expected. Add a new action via the plus icon. Within the action's Action choose "Perform Transition Requests".

Drag a TransitionRequest from the Toolbox - Behaviors on the Requests node of right panel (Behavior panel).

Add another EventHandler to the TabHome TabButton. This can be done either with the context menu (as we did before) or you can press the plus sign to the right of the EventHandler Tab. This time we have to set the StateCondition to ChangedToFalse. Again, add a "Transiton Request" from the ToolBox Behaviors to the Requests section in the right side of the Scene Tree Panel.

Now select the Transition Request in the right panel of the scene tree of TabHome.

In the Properties panel the RequestType is already set to "Activate" . Click the magnifying glass to set the Identifier property to "SceneHome".

Perform the same actions with the second TransitionRequest but select "Deactivate" as RequestType. Do not forget to set SceneHome as Identifier.

Repeat the same for TabClimate, TabPhone and TabOptions. Note that the TransitionRequests Identifier has to be set to SceneClimate, ScenePhone or SceneOptions respectively.

Now it's time for you to check the functionality in the player.

As we want to make the navigation bar (our TabButtons) appear on hovering an indicator and disappear when clicking a button, the GroupBox has to be moved into a Drawer Control.

So, the next step is to drag and drop a Drawer Control into the Scene Tree and move the GroupBox onto the Drawer Control's ContentAnchor.

The Drawer Control should only appear if needed, so we uncheck the property "Open".
It shall appear from the bottom so we configure the Appearance Direction accordingly.

The Drawer Control shall display its content only when we hover an image. Therefore, we need an image, which we will import using the menu.

The image file we need can be found here:

cgi_studio_content/Resources/GettingStartedControls/MenuTabs/arrowsTab.png

We drag and drop this image from the Solution Explorer into our Scene, which creates a RenderNode2D called "arrowsTabBmp". Let's rename this node as "Bitmap_ArrowsBmp". The Position and Scale of this RenderNode2D has to be adjusted as follows.

In order to open the Drawer Control when hovering or clicking on this RenderNode2D, we enhance this RenderNode2D with Control functionality. To do this, we drag and drop a HandleControlState Behavior from the ToolBox Behaviors Panel onto the Bitmap_ArrowsBmp RenderNode2D.

Next, we need to add a Hover and an OnClick Behavior. Drag and Drop these Behaviors from the Toolbox - Behaviors Panel onto the RenderNode2D "Bitmap_ArrowsBmp".

Drag and Drop a "Change Drawer State" Action Behavior onto each of the actions Hover and OnClick.

The Behaviors tree of the RenderNode2D "Bitmap_ArrowsBmp" now looks as follows. Please also note the position of this RenderNode2D "Bitmap_ArrowsBmp" in the SceneTree, which is above the Drawer Control.

Now, we have to configure the TargetNode for the Actions' "Change Drawer State". The TargetNode has to be set to the Drawer Control. Click on the icon next to the TargetNode input field and select the Drawer Control from your SceneMenuTabs.

Do this for both "Change Drawer State" instances, the one on the Hover Behavior and the one on the OnClick Behavior.

We have now configured to open the Drawer Control. The next step is to close the Drawer again when the TextButton "CloseButton" on the right side of our TabBar is clicked.

The CloseButton is already a Control and has a CheckClick condition. This means, we only have to drag and drop a "Change Drawer State" Behavior onto the Actions of our CloseButton. This "Change Drawer State" Action has to be configured to "Close" the Drawer and the Drawer Control has to be set as TargetNode (similar to what we did earlier in this tutorial).

The functionality of the Drawer Control is now configured completely. To see if it works, the solution has to be saved and we start the Player using "Generate and Play".

In the Player you can see the Drawer opening when hovering the indicator. Close the Drawer again by clicking the right most CloseButton.

The Drawer functionality is working, however, the indicator is visible when the Drawer is opened. To prevent this, we add an Overlay Layout and a black SolidColorNode to the content of the GroupBox. Note that the GridLayout has to be put inside the OverlayLayout too.

The SolidColorNode's StretchBehavior has to be set to "Fill".

And the color of the SolidColorNode's SolidColorBrushBlend effect has to be set to black.

This version of the GettingStartedControls is provided as a complete sample including an already generated asset file for the Player.

---