GettingStartedControls Part 4

In the first 3 parts of this sample we have created 3 individual scenes. In the Player it was necessary to enable and disable the displayed scenes manually. In this part we will add menu tabs to the bottom of the screen so the user can switch between scenes as he likes. 

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

Our menu tabs scene can be seen on the bottom of the climate scene in below image.

Our goal is to create a tab bar to enable the user to switch between 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, which we can reuse on all screens.

Importing Images

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 RadioButton's Knob

1. In the Solution Explorer navigate to "References > SCL: ConstructionKit > ConstructionKit > Controls > RadioButton" and copy the RadioButton control either via the context menu "Copy" or the keyboard shortcut <Ctrl + C>.
   • The RadioButton control is in the clipboard and ready to be pasted.
2. In the Solution Explorer navigate to "Solution > Controls" and paste the RadioButton control either via the context menu "Paste" or the keyboard shortcut <Ctrl + V> into the Controls folder.
   • In Solution Explorer you can see that the RadioButton has been pasted into the Solution/Controls folder.
3. 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 Explorer you can see that the RadioButton in the Solutions/Controls folder is renamed to "TabButton".
   • In the Toolbox panel's [ Controls ] section you can see a new folder "Touchable" with the newly created TabButton.
     
4. 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, which is a copy of the RadioButton. On the Scene Tree panel's left side you can see the node structure, on the right side you can see the applied behaviors that form the control's logic.
5. 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.
6. The Choose Item dialog will be opened
7. 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

1. 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

2. 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".
3. 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.
4.  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.
5. 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.
6. 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.
     
7. 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 successfully 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

1. 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.
     
2. 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.
     
3. In the Render Targets panel check the checkbox of "SceneMenuTabs\Camera" in order to enable rendering.
   • Rendering of the scene is enabled.
4. 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.
5. 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.
     
6. 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.
7. 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

8. 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.
9. 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.
10. 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.
11. 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.
12. 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.
13. 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.
      
14. 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.
      
15. 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.

16. 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

      
17. 
    

 

Creating Menu Tabs scene

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.

---