Collapsed RadRibbonTab header takes up space

[Inger Marie]

I have a radribbonview defined as this:

<telerik:RadRibbonView IsMouseWheelTabScrollingEnabled="False" ApplicationButtonVisibility="Collapsed" TitleBarVisibility="Collapsed" Background="HotPink">
          <telerik:RadRibbonTab HeaderVisibility="Collapsed">
              <telerik:RadRibbonGroup />
              ...
              <telerik:RadRibbonGroup />
          </telerik:RadRibbonTab>
<telerik:RadRibbonView />

I set the background to hotpink to illustrate my problem. There is only one radribbontab inside the radribbonview - so I really do not need any header for it.

In my program it looks like this (see attached file). The top row of tabs ("Project", "Contacts"... are not part of this problem, my problem is on a radribbonview inside the "Suppliers" tab).

I changed it resently from RadRibbonBar to RadRibbonView because it kept bugging me that RadRibbonBar is obsolete.

How do I make the large "margin" in top go away (the margin is not really a margin - it is where my RadRibbon tab would have had it's header if it had one). Anything else I need to collapse?

Thanks
Inger Marie

[Inger Marie]

I could always make a nice blue box to hold my buttons but using RadRibbenTab makes is all look nice and alike. I just need that extra space to go away. Anyone have any idea how to do that?

[Pavel R. Pavlov]

Hello Inger,

In order to achieve your goal you have to edit the default template of the RadRibbonView control. You can find more information about how to extract the template in this article. For your convenience I extracted and edited the template of the control in the attached project. I changed the Height property of the second row (index 1) of the Grid control named "TopGrid" to 1 pixel. By doing so you hide the Row which holds the RadRibbonTabs and the ApplicationMenuButton. Keep in mind that you will have to set the RadRibbonView's property TitleBarVisibility to Collapsed. Please take a look at the attached project and let me know if it works for you.

Kind regards,
Pavel R. Pavlov
the Telerik team

[Inger Marie]

Thanks for your reply. I appresiate the effort you put into actually creating the style for me.

I am unexperienced in using Blend, though I do have it (Version 5.0.31017.0 - Visual Studio 2012).
When I open your project in Blend and try to build it, it fails:

Cannot find the Style Property 'ContentHeight' on the type 'Telerik.Windows.Controls.RadRibbonView'. Line 34 Position 21 (File=MainWindow.xaml).

Putting the style directly into my project gave pretty much the same problem (and a few more items in the style which could not be found, such as "The member 'ContentHeight' is not recognized or is not accessible").

I use version 2012.3.1129.40 of Telerik.Windows.Controls.RibbonView

Do you know what is going wrong, here?

Best regards
Inger Marie

[Inger Marie]

I have found a workable solution without using RadRibbonView. But I really do like the horizontal scrollbars which the RadRibbonView has and wish for some way to create them in my solution.

 <ScrollViewer  Style="{StaticResource JsToolbarScrollViewer}">

            <StackPanel  Style="{StaticResource JsToolbarStackPanel}">

  ...RadRibbonButtons...          

             </StackPanel>

  </ScrollViewer>

 

    <Style x:Key="JsToolbarScrollViewer" TargetType="{x:Type ScrollViewer}">

        <Setter Property="VerticalScrollBarVisibility" Value="Disabled" />

        <Setter Property="HorizontalScrollBarVisibility" Value="Auto" />

        <Setter Property="HorizontalAlignment" Value="Stretch" />

        <Setter Property="VerticalAlignment" Value="Stretch" />

        <Setter Property="BorderBrush" Value="{StaticResource RibbonBorderBrush}" />

        <Setter Property="BorderThickness" Value="0,0,0,1" />

        <Setter Property="Background" Value="{StaticResource RibbonBackgroundBrush}" />

        <Setter Property="telerik:StyleManager.Theme" Value="Windows7" />

    </Style>

  


    <Style x:Key="JsToolbarStackPanel" TargetType="{x:Type StackPanel}">

        <Setter Property="HorizontalAlignment" Value="Stretch" />

        <Setter Property="Orientation" Value="Horizontal" />

    </Style>

[Pavel R. Pavlov]

Hello Inger,

It seems that the issue is reproducible in the version you use. I implemented the project with out latest official release 2013.1.0220. Please refer to the project below and find attached a trial version of our latest release. Please excuse me for the inconvenience caused.

Regards,
Pavel R. Pavlov
the Telerik team

[Inger Marie]

Thanks, This works.

I would still love to have a separate control (like "RadHorizontalScrollViewer" or something) which works exactly like the horizontal scrolling in RadRibbonTab.

Because its simple and beautiful and sometimes scrolling vertically is simply something there are no space available for.