GettingStartedControls Part 4

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

Our final scene will look like 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.

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 define a separate scene and will reuse it on all screens.

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

The first step is to copy the original RadioButton which is inside the Construction Kit into our solution.
Open the References folder to find the SCL:ConstructionKit. Inside you will 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 of the Construction Kit and copy the RadioButton using the context menu copy item into your solution Controls folder using context menu paste (or using CTRL+C and CTRL+V). Rename the copy using the F2 key into "TabButton".

As you can see you already have a new entry inside the Toolbox. This will be helpful when reusing the TabButton.

If you double click the TabButton in the Solution Explorer, you will be able to see the complete design of the copied RadioButton.

In the left panel, you can see the scene/node structure of the control. In the right panel, you can see the logic created using behaviors.

: The important thing to know is that all changes you perform here will be applied to ALL instances of this control class immediately.
This is also valid when changing properties as long as your control class is opened. You can close it by clicking the left arrow at the top of the Scene Tree (marked in orange in the previous image) or by using the context menu of the Control in the SceneTree and choosing "Go To Previous Element".
If you are outside of the control's "Edit mode", all changes in the properties or behavior panel will influence a single instance of the control.

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":

SetSelectedImage,
SetSelectedPressedImage and
SetNormalPressedImage

The Editor panel will now look like this:

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.

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...").

: The Controls don't have to be configured for a certain column. Using the GridAutoArrangement property the Controls are arranged at runtime.

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):

TabHome - "HOME"
TabClimate - "CLIMATE"
TabPhone - "PHONE"
TabOptions - "OPTIONS"

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:

SceneHome,
SceneClimate and
SceneOptions.

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:

: Swapping has to be enabled for the cameras of SceneHome, SceneClimate and SceneOptions. It has to be disabled for SceneMenuTabs.

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.

: For this tutorial, ScenePhone has been skipped, since most controls have already been covered by other scenes.

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.

: By unchecking the "Open" property, we close the Drawer Control, so it will hide its content. The content is still available, just hidden in a drawer (like in a desk drawer, where you can put away stuff).
You can check and uncheck this property during editing as you like, but please make sure to uncheck it in the end.

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.