Ribbon Bar Shapes/Colors

4 posts, 0 answers
  1. Deborah
    Deborah avatar
    154 posts
    Member since:
    Sep 2010

    Posted 09 Sep 2010 Link to this post

    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!
  2. Stefan
    Admin
    Stefan avatar
    2891 posts

    Posted 16 Sep 2010 Link to this post

    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 RightShadowInnerColor1RightShadowInnerColor2RightShadowOuterColor1, RightShadowOuterColor2LeftShadowInnerColor1LeftShadowInnerColor2,LeftShadowOuterColor1LeftShadowOuterColor2 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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. UI for WinForms is Visual Studio 2017 Ready
  4. Deborah
    Deborah avatar
    154 posts
    Member since:
    Sep 2010

    Posted 24 Sep 2010 Link to this post

    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!
  5. Stefan
    Admin
    Stefan avatar
    2891 posts

    Posted 30 Sep 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top