Collapsed RadRibbonTab header takes up space

7 posts, 1 answers
  1. Inger Marie
    Inger Marie avatar
    60 posts
    Member since:
    Nov 2010

    Posted 06 Feb 2013 Link to this post

    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
  2. Inger Marie
    Inger Marie avatar
    60 posts
    Member since:
    Nov 2010

    Posted 07 Feb 2013 Link to this post

    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?
  3. UI for WPF is Visual Studio 2017 Ready
  4. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 11 Feb 2013 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  5. Inger Marie
    Inger Marie avatar
    60 posts
    Member since:
    Nov 2010

    Posted 19 Feb 2013 Link to this post

    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
  6. Inger Marie
    Inger Marie avatar
    60 posts
    Member since:
    Nov 2010

    Posted 21 Feb 2013 Link to this post

    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>

  7. Answer
    Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 22 Feb 2013 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  8. Inger Marie
    Inger Marie avatar
    60 posts
    Member since:
    Nov 2010

    Posted 28 Feb 2013 Link to this post

    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.
Back to Top
UI for WPF is Visual Studio 2017 Ready