Enable the ribbon scroll button.

[Hardik]

Hi,

How to enable the ribbon left/right button ?
Image is attached herewith.

Thanks

[Lancelot]

Hi Hardik,

If you want to being using the scrollBar, you first need to set the property ScrollViewer.HorizontalScrollBarVisibility to visibile. I've written a complete example for you below. One thing to keep in mind, if the RibbonGroups are not wider then the control, the ScrollViewer will not appear. Only when the window is resized or the groups are wider than the current window, will the ScrollBars be available.

Below is an example that you can just copy and paste into your application to get you started.

<telerik:RadRibbonView d:LayoutOverrides="Width" ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.VerticalScrollBarVisibility="Visible">
            <telerik:RadRibbonView.ContextualGroups>
                <telerik:RadRibbonContextualGroup x:Name="ContextualGroup1"
                    Header="Group 1"
                    IsActive="False"
                    Color="Coral" />
                <telerik:RadRibbonContextualGroup x:Name="ContextualGroup2"
                    Header="Group 2"
                    IsActive="False"
                    Color="Orchid" />
            </telerik:RadRibbonView.ContextualGroups>
            <telerik:RadRibbonTab ContextualGroupName="ContextualGroup1" Header="ContextualTab 1.1" />
            <telerik:RadRibbonTab Header="RibbonTab" Margin="0">
                <telerik:RadRibbonGroup Header="RibbonGroup"/>
            </telerik:RadRibbonTab>
            <telerik:RadRibbonTab Header="RibbonTab" Margin="0">
                <telerik:RadRibbonGroup Header="RibbonGroup"/>
            </telerik:RadRibbonTab>
            <telerik:RadRibbonTab Header="RibbonTab" Margin="0">
                <telerik:RadRibbonGroup Header="RibbonGroup"/>
            </telerik:RadRibbonTab>
            <telerik:RadRibbonTab Header="RibbonTab" Margin="0">
                <telerik:RadRibbonGroup Header="RibbonGroup"/>
            </telerik:RadRibbonTab>
            <telerik:RadRibbonTab Header="RibbonTab" Margin="0">
                <telerik:RadRibbonGroup Header="RibbonGroup"/>
            </telerik:RadRibbonTab>
            <telerik:RadRibbonTab Header="RibbonTab" Margin="0">
                <telerik:RadRibbonGroup Header="RibbonGroup"/>
            </telerik:RadRibbonTab>

        </telerik:RadRibbonView>

Let me know if there is anything else I can help you with.

Good Luck,

Lancelot

[praneeth]

Hi,

 How to enable scrolling in radribbon header tab.Please find the attachment, our project tab looks like this. But we are unable to make it scroll as the tab width increases depending on user inputs.

 What can be done?

[Martin Ivanov]

Hello praneeth,

I am not sure that I understand your scenario completely. Do you want to scroll the tab items horizontally? If so, this functionality is built-in in RadRibbonView. A scrollviewer is displayed automatically, when the summary width of all tabs is bigger then the width of the panel that hosts them. If this is not your case I would ask you to send me drawings of the expected result. This will help me in better understanding your case and assist you further.

Thank you for any help you can provide.

Regards,
Martin
Telerik

[praneeth]

I have attached the screenshot. The problem is the header items change while the application runs and each header text is being trimmed automatically. As you can see in the screen shot for ex: Contract Evaluation while running the app becomes Contract Eval, full name is not being displayed. If scroll bar is default for horizontal tab in RibbonView then I dont think its working for us as we are not getting the scroll bar on tab width increasing. 

Attached two screen shots, in the second one you can find the text being cut off and scroll bar not enabled.

All we need is a scroll bar for radribbontab which should automatically enable scroll as the header contents increase without trimming the header tab text.

[Martin Ivanov]

Hello Hardik,

Thank you for the attachments and the additional information. The described behavior is caused by the MinTabWidth property of the tab strip panel of the ribbon that holds the tab items. I can suggest you several approaches for achieving your requirement:

• You can set the MinTabWidth property of the RibbonTabStripPanel to a bigger value. This way the cutting of the tab headers will be avoided.
  

  <telerik:RadRibbonView.ItemsPanel>
      <ItemsPanelTemplate>
          <telerikRibbonViewPrimitives:RibbonTabStripPanel MinTabWidth="200" />
      </ItemsPanelTemplate>
  </telerik:RadRibbonView.ItemsPanel>

• You can define HeaderTemplate with a TextBlock element that presents the header of the tab item. Then you can set the TextTrimming of the TextBlock to CharacterEllipsis. This way when the element clipped the TextBlock will draw dots at the end of its text. In this case you can use a ToolTip to show the entire content of the tab headers.
  

  <Style TargetType="telerik:RadRibbonTab">
      <Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource Self}, Path=Header}" />
      <Setter Property="HeaderTemplate">
          <Setter.Value>
              <DataTemplate>
                  <TextBlock Text="{Binding}" TextTrimming="CharacterEllipsis"/>
              </DataTemplate>
          </Setter.Value>
      </Setter>
  </Style>

• You can define HeaderTemplate for the tab items and wrap the element that presents the header into a ScrollViewer with set width.
  

  <Style TargetType="telerik:RadRibbonTab">
      <Setter Property="HeaderTemplate">
          <Setter.Value>
              <DataTemplate>
                  <ScrollViewer Width="100">
                      <TextBlock Text="{Binding}"/>
                  </ScrollViewer>
              </DataTemplate>
          </Setter.Value>
      </Setter>
  </Style>

  If you are using implicit styles you will need to base the style on the default RadRibbonTabStyle.
  

  <Style TargetType="telerik:RadRibbonTab" BasedOn="{StaticResource RadRibbonTabStyle}">

Please try those approaches and let me know if they are helpful.

Regards,
Martin
Telerik

[praneeth]

Thanks Martin !!

Information is helpful. First approach solved our issue.