Ribbon Bar Shapes/Colors

[Deborah]

I would like to create my ribbon bar tabs so they look like the One Note tabs. That is, that they have a straight left edge and a slanted right edge. Also, that they have a background color that also appears around the groups in the panel associated with the tab options. (The TabVSShape is backwards from this.)

I have been trying for quite a while now using the Visual Style Builder and the hierarchical viewer and the properties and I have not even come close.

Anyone have a tip on how to define these shapes and colors?

Thanks!

[Stefan]

Hello Deborah,

Thank you for writing.

You are missing some of the items and the structure is different, because in the beginning of 2010 with our Q1 2010 we have introduced a new theming mechanism and a brand new Visual Style Builder. This makes these links, posted more than 2 years ago, outdated.

What you have to do in order to change the tab shape is to modify the theme that you are using. Thus can be achieve by following the next steps:

1. Open VSB (Visual Style Builder) from Start Menu >> All Programs >> Telerik >> RadControls for WinForms [version] >> Tools.
2. In the File menu choose Export Build-in Themes and export them on your drive.
3. Again in the File menu, click on Open Package, navigate to the directory where you have exported the themes and select ControlDefault theme in case this is what you are using in your application.
4. From the Control Structure tree in the VSB, navigate to RadRibbonBar >> RadTabStripElement >> Tab Item
5. Now set the following properties for all appropriate Element states:

• Click the TabItem (TabItem) element in the Elements panel and set the following properties:
  - Shape to TabVsShape
  - Expand the Shape property and set the RightToLeft property to true
  - Set the Padding property to 6,3,15,6 or something that will show your text correctly
  - Set RightShadowInnerColor1, RightShadowInnerColor2, RightShadowOuterColor1, RightShadowOuterColor2, LeftShadowInnerColor1, LeftShadowInnerColor2,LeftShadowOuterColor1, LeftShadowOuterColor2 to Transparent.
• Click the TabFill (FillPrimitive) element in the Elements panel and set the following properties:
  - Shape to TabVsShape
  - Expand the Shape property and set the RightToLeft property to true
• Click the TabItemBorder (BorderPrimitive) element in the Elements panel and set the following properties:
  - Shape to TabVsShape
  - Expand the Shape property and set the RightToLeft property to true
  

This should give you the look and feel of the MS One Note tabs. 

If there is anything else I can assist you with, do not hesitate to contact me.

 

Regards,
Stefan
the Telerik team

[Deborah]

Thanks for the instructions.

One more question before I begin on this. I work on multiple applications. Only *one* of these applications wants this change to the tabs. It sounds like from your instructions that I am modifying *the* template for the ribbon bar and therefore this change will appear in all of my applications, is this correct?

If so, how can I make these changes without impacting how the ribbon bar works in my other applications? Can I create a new style from the old one and use the new style only in this one application? If so, how?

Thanks!

[Stefan]

Hi Deborah,

Thank you for writing back.

There are two approaches for setting a theme - either set it to a certain control or set it to the whole application.

To apply it to a certain control, after you open and edit the theme, save it as a package. Then load the package to your application and set the loaded theme to a certain control. Refer to the attached video.

Setting a theme to the whole application can be achieved by the following code snippet:

ThemeResolutionService.LoadPackageFile(@"..\..\ControlDefault.tssp");
ThemeResolutionService.ApplicationThemeName = "ControlDefault";

I hope you find this information helpful. Should you need any further assistance, do not hesitate to contact me.

All the best,
Stefan
the Telerik team