Ribbon Context Tab Appearence, Behavior

2 posts, 0 answers
  1. Paul
    Paul avatar
    35 posts
    Member since:
    Jan 2014

    Posted 14 Sep 2014 Link to this post


    I am liking the Ribbon control at present.

    However, I want it to behave and look exactly like the offerings in Word.

    I have created 5 Ribbon Tabs in the Designer.  Each tab has been assigned to a Context tab.
    So I have:
    Project tab -> Project Context tab
    Contract tab -> Contract Context tab
    ...and so on.

    I can make the contexts appear when I want using:

    ​this.RibbonContextTabProject.Visibility = (entity is AttestedDev.Wms.EFDAL.Entity.Project) ? ElementVisibility.Visible : ElementVisibility.Hidden;

    When the tabs are displayed they keep their positions in the Tab order.  See attached.

    You can see in #1 the Project tab is displayed in its designed position.
    You can see in #2 the Contract tab is displayed in its designed position - which is to the right of Project.
    You can see in #3 the Drawing tab is displayed in its designed position - which is to the right of Contract.

    What I want is the Context tabs to appear in the same position.  Like Word 2013 for example - which will append the Context Tabs at the end of the current tabs - see #4 and #5 in attached.

    The other issue is that the context tabs are pretty narrow.  I would like to have some additional padding on this, but the Padding on the Context tab does not force the width of the tab to be wider.  It looks pretty thin.

    Can you show me how I can get it to work like this?

    Many thanks,

  2. Dimitar
    Dimitar avatar
    1326 posts

    Posted 17 Sep 2014 Link to this post

    Hi Andez,

    Thank you for writing.

    In this case instead of setting the Visibility to Hidden you should set it to Collapsed. This way the remaining tabs will be shifted to the left and no empty space will remain. For example:
    private void radButton1_Click(object sender, EventArgs e)
        this.ribbonTab3.Visibility = Telerik.WinControls.ElementVisibility.Collapsed;

    In order to make the items wider you can add some padding to them:
    foreach (var item in radRibbonBar1.RibbonBarElement.TabStripElement.Items)
        item.Padding = new Padding(30, 5, 30, 5);

    Another approach is to set the ItemFitMode property:
    radRibbonBar1.RibbonBarElement.TabStripElement.ItemFitMode = StripViewItemFitMode.Fill;

    I hope this helps. Should you have any other questions do not hesitate to ask.

    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
  3. DevCraft R3 2016 release webinar banner
Back to Top