Hello everyone, and welcome to the third tutorial in my series of tutorials about the Telerik CAB Enabling Kit. Over the next two weeks, I will be covering the two workspaces provided with the TCEK. This week, we will learn how to use the RadTabWorkspace. I will be using the completed project from tutorial 2 as the base for this project. If you have not completed the second tutorial, I suggest doing so before completing this tutorial. You can find it here. Otherwise, click here to download the source code that we will be using, fire up visual studio, and lets begin.

Adding the RadTabWorkspace

In this section, we will simply replace the current workspace with a RadTabWorkspace. Since the current workspace is already set up within the CAB infrastructure, getting the new workspace set up is as simple as changing the name to be the same as the original workspace.

1. In the solution explorer, expand the Infrastructure.Layout project and open ShellLayoutView.cs in the designer.
2. Select and delete the DeckWorkspace control named _mainWorkspace.
3. Drag a RadTabWorkspace from the toolbox into the design view and dock it to fill.
4. Name the RadTabWorkspace _mainWorkspace.

Adding the RadTabSmartPartInfo

As you probably already know, the SmartPartInfo is the lifeline of views added to a workspace. It is responsible for telling the workspace the properties of the container in which it will be placed. In this case, that container is a RadTab.

1. In the solution explorer, expand the AssetManager project and open AssetListing.cs in the designer.
2. Drag a RadTabSmartPartInfo from the toolbox into the design view.
3. Select radTabSmartPartInfo1, and update the follow properties in the properties window.
   1. Set Visible to True
   2. Set Enabled to True
   3. Set the Title to “Asset Listing”
4. Update the code-behind to inherit the ISmartPartInfoProvider interface.

Adding the Hello World View

In this step, we will add a second view to the RadTabWorkspace so that we can showcase the full use of the control.

1. In the solution explorer, right click the Views folder of the AssetManager project and select Add View…
   1. Name the view, HelloWorldView and click Finish. Double click HelloWorldView.cs to open it in the designer.
2. Drag a RadLabel onto the view and change its text to “Hello World.” Go ahead and make the font size bigger as well.
3. Drag a RadTabSmartPartInfo from the toolbox into the design view.
   1. Select radTabSmartPartInfo1, and update the following properties in the properties window.
      1. Set Visible to True
      2. Set Enabled to True
      3. Set the Title to “Hello World”
4. Update the code-behind to inherit the ISmartPartInfoProvider interface.
5. Double click ModuleController.cs to view its code.
6. Scroll down to the AddViews() method and update it to show HelloWorldView in the main workspace.
   

   HelloWorldView helloView = ShowViewInWorkspace<HelloWorldView>(WorkspaceNames.MainWorkspace);

Testing the Project

At this point, the project is now testable. Go ahead and run the application and you should see our two views displayed in tabs in the RadTabWorkspace. What you will notice now is that the TabWorkspace is very bland looking. Next, we will liven it up by applying a theme.

Applying a Theme

In this step, we will update the RadTabWorkspace control to allow themes. The reason the control currently looks so bland is that theming relies on the namespace of the control. RadTabWorkspace may inherit from RadTabStrip, but since it resides in a different namespace and has a different name than RadTabStrip, theming does not work properly. Fortunately, there is a simple workaround you can use here, and in your own overridden controls, that will solve this problem and allow RadTabStrip themes to be applied.

1. Expand the TCEK project and double click RadTabWorkspace.cs to view its source
   1. Add the following code to allow the workspace to support basic RadTab themes.
      

      public override string ThemeClassName

      {

      get

      {

      return "Telerik.WinControls.UI.RadTabStrip";

      }

      set

      {

      base.ThemeClassName = value;

      }

      }

After setting this up, I ran into a small issue. The theme appeared to still not be getting applied. Upon further inspection, I discovered a the issue was within RadTabWorkspace.cs. The background color and foreground color are actually being set on the RadTabWorkspace based on values provided by the SmartPartInfo. This is easily fixed by commenting out the following code in the SetTabProperties method of RadTabWorkspace.cs. (Note: This issue will be fixed in the next release of TCEK.)

 Now the RadTabWorkspace control in your main layout should utilize the basic theme. You should also be able to apply any of the other themes provided with the Telerik controls.

Conclusion

Next week, I will go over the RadDockWorkspace. See you then!

Click here to download the source code used in this post.