This is a migrated thread and some comments may be shown as answers.

How to size the width of the tab header

6 Answers 352 Views
RibbonView and RibbonWindow
This is a migrated thread and some comments may be shown as answers.
Willamette
Top achievements
Rank 1
Willamette asked on 26 Jun 2012, 04:17 PM
Hi All,

Is there a way to widen the tab header at runtime so that the text can be shown clear?

Thanks

Tab headers at design time
 


Tab header at run time
 

6 Answers, 1 is accepted

Sort by
0
Lancelot
Top achievements
Rank 1
answered on 28 Jun 2012, 07:33 PM
Hi Willamette,

You can change the width of the header by altering the style of the RadRibbonTab. This link will bring you to the documentation on how to change the style.

Once you go to that link and follow the instructions on how to access the template, notice the root grid of the TabStyle. You can widen the size in there. I've attached an image to help you identify which element I'm speaking of.

Good Luck,
Lancelot
0
Tina Stancheva
Telerik team
answered on 29 Jun 2012, 07:28 AM
Hello,

Yet another approach that you can use is to change the RadRibbonTab.Width property as it also controls the Width of the tabs.

Greetings,
Tina Stancheva
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

0
DQ
Top achievements
Rank 1
answered on 19 Jul 2012, 11:24 PM
No matter what I did, the width of the tab header is fixed.

"Using a computer should be easier than not using a computer.  Using a add-on third party tool should be easier than not using a add-on third party tool."
0
Tina Stancheva
Telerik team
answered on 20 Jul 2012, 08:25 AM
Hi DQ,

Unfortunately we're not sure what might be causing the issue in your solution. However, if you can send us a sample project reproducing the case, we will gladly assist you in resolving it.

Greetings,
Tina Stancheva
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

0
John Cutler
Top achievements
Rank 1
answered on 13 May 2013, 10:05 PM
I have been having this same problem.  You can set the width just fine if you only have a few tabs and your browser window is wide enough, the problem is when you re-size the browser smaller. Instead of the tabs maintaining their width and showing the Left and Right Scroll Button Elements in the RibbonScrollViewerArea it re-sizes the Header Tabs eventually making them all a uniform width.   I would like to be able to fix the width of the some or all of the tabs and have it show the scroll bars rather than re-size the tabs but so far nothing has worked.   

Here is the xaml from a sample application I put together to work on this problem.  Nothing I have tried has been able to fix the width of the tabs, any help with this would be greatly appreciated.  

<UserControl x:Class="RadRibbonView.MainPage"
        mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
    <Grid x:Name="LayoutRoot">
            <Grid.RowDefinitions>
            <RowDefinition Height="151"/>
            <RowDefinition Height="329*"/>
        </Grid.RowDefinitions>
        <telerik:RadRibbonView VerticalAlignment="Top"  >
            <telerik:RadRibbonTab Header="Ribbon Tab 1" Width="130">
                <telerik:RadRibbonGroup Header="RibbonGroup">
                    <telerik:RadRibbonGroup.Variants>
                        <telerik:GroupVariant Priority="0" Variant="Collapsed"/>
                        <telerik:GroupVariant Priority="0" Variant="Small"/>
                        <telerik:GroupVariant Priority="0" Variant="Medium"/>
                        <telerik:GroupVariant Priority="0" Variant="Large"/>
                    </telerik:RadRibbonGroup.Variants>
                </telerik:RadRibbonGroup>
            </telerik:RadRibbonTab>
            <telerik:RadRibbonTab Header="Ribbon Tab 2"  >
                <telerik:RadRibbonGroup Header="RibbonGroup">
                    <telerik:RadRibbonGroup.Variants>
                        <telerik:GroupVariant Priority="0" Variant="Collapsed"/>
                        <telerik:GroupVariant Priority="0" Variant="Small"/>
                        <telerik:GroupVariant Priority="0" Variant="Medium"/>
                        <telerik:GroupVariant Priority="0" Variant="Large"/>
                    </telerik:RadRibbonGroup.Variants>
                </telerik:RadRibbonGroup>
            </telerik:RadRibbonTab>
            <telerik:RadRibbonTab Header="Ribbon Tab 3"   >
                <telerik:RadRibbonGroup Header="RibbonGroup">
                    <telerik:RadRibbonGroup.Variants>
                        <telerik:GroupVariant Priority="0" Variant="Collapsed"/>
                        <telerik:GroupVariant Priority="0" Variant="Small"/>
                        <telerik:GroupVariant Priority="0" Variant="Medium"/>
                        <telerik:GroupVariant Priority="0" Variant="Large"/>
                    </telerik:RadRibbonGroup.Variants>
                </telerik:RadRibbonGroup>
            </telerik:RadRibbonTab>
            <telerik:RadRibbonTab Header="Ribbon Tab 4"   >
                <telerik:RadRibbonGroup Header="RibbonGroup">
                    <telerik:RadRibbonGroup.Variants>
                        <telerik:GroupVariant Priority="0" Variant="Collapsed"/>
                        <telerik:GroupVariant Priority="0" Variant="Small"/>
                        <telerik:GroupVariant Priority="0" Variant="Medium"/>
                        <telerik:GroupVariant Priority="0" Variant="Large"/>
                    </telerik:RadRibbonGroup.Variants>
                </telerik:RadRibbonGroup>
            </telerik:RadRibbonTab>
            <telerik:RadRibbonTab Header="Ribbon Tab 5"   >
                <telerik:RadRibbonGroup Header="RibbonGroup">
                    <telerik:RadRibbonGroup.Variants>
                        <telerik:GroupVariant Priority="0" Variant="Collapsed"/>
                        <telerik:GroupVariant Priority="0" Variant="Small"/>
                        <telerik:GroupVariant Priority="0" Variant="Medium"/>
                        <telerik:GroupVariant Priority="0" Variant="Large"/>
                    </telerik:RadRibbonGroup.Variants>
                </telerik:RadRibbonGroup>
            </telerik:RadRibbonTab>
            <telerik:RadRibbonTab Header="Ribbon Tab 6" >
                <telerik:RadRibbonGroup Header="RibbonGroup">
                    <telerik:RadRibbonGroup.Variants>
                        <telerik:GroupVariant Priority="0" Variant="Collapsed"/>
                        <telerik:GroupVariant Priority="0" Variant="Small"/>
                        <telerik:GroupVariant Priority="0" Variant="Medium"/>
                        <telerik:GroupVariant Priority="0" Variant="Large"/>
                    </telerik:RadRibbonGroup.Variants>
                </telerik:RadRibbonGroup>
            </telerik:RadRibbonTab>
            <telerik:RadRibbonTab Header="Ribbon Tab 7"  >
                <telerik:RadRibbonGroup Header="RibbonGroup">
                    <telerik:RadRibbonGroup.Variants>
                        <telerik:GroupVariant Priority="0" Variant="Collapsed"/>
                        <telerik:GroupVariant Priority="0" Variant="Small"/>
                        <telerik:GroupVariant Priority="0" Variant="Medium"/>
                        <telerik:GroupVariant Priority="0" Variant="Large"/>
                    </telerik:RadRibbonGroup.Variants>
                </telerik:RadRibbonGroup>
            </telerik:RadRibbonTab>
            <telerik:RadRibbonTab Header="Ribbon Tab 8"  >
                <telerik:RadRibbonGroup Header="RibbonGroup">
                    <telerik:RadRibbonGroup.Variants>
                        <telerik:GroupVariant Priority="0" Variant="Collapsed"/>
                        <telerik:GroupVariant Priority="0" Variant="Small"/>
                        <telerik:GroupVariant Priority="0" Variant="Medium"/>
                        <telerik:GroupVariant Priority="0" Variant="Large"/>
                    </telerik:RadRibbonGroup.Variants>
                </telerik:RadRibbonGroup>
            </telerik:RadRibbonTab>
            <telerik:RadRibbonTab Header="Ribbon Tab 9"  >
                <telerik:RadRibbonGroup Header="RibbonGroup">
                    <telerik:RadRibbonGroup.Variants>
                        <telerik:GroupVariant Priority="0" Variant="Collapsed"/>
                        <telerik:GroupVariant Priority="0" Variant="Small"/>
                        <telerik:GroupVariant Priority="0" Variant="Medium"/>
                        <telerik:GroupVariant Priority="0" Variant="Large"/>
                    </telerik:RadRibbonGroup.Variants>
                </telerik:RadRibbonGroup>
            </telerik:RadRibbonTab>
            <telerik:RadRibbonTab Header="Ribbon Tab 10"  >
                <telerik:RadRibbonGroup Header="RibbonGroup">
                    <telerik:RadRibbonGroup.Variants>
                        <telerik:GroupVariant Priority="0" Variant="Collapsed"/>
                        <telerik:GroupVariant Priority="0" Variant="Small"/>
                        <telerik:GroupVariant Priority="0" Variant="Medium"/>
                        <telerik:GroupVariant Priority="0" Variant="Large"/>
                    </telerik:RadRibbonGroup.Variants>
                </telerik:RadRibbonGroup>
            </telerik:RadRibbonTab>
         </telerik:RadRibbonView>
 
    </Grid>
</UserControl>
0
Kiril Vandov
Telerik team
answered on 15 May 2013, 03:21 PM
Hello John,

You could use the MinTabWidth property of the RibbonTabStripPanel and set the desired minimum width, like follows:
xmlns:telerikRibbonViewPrimitives="clr-namespace:Telerik.Windows.Controls.RibbonView.Primitives;assembly=Telerik.Windows.Controls.RibbonView"
...
<telerik:RadRibbonView>    
    <telerik:RadRibbonView.ItemsPanel>
        <ItemsPanelTemplate>
            <telerikRibbonViewPrimitives:RibbonTabStripPanel MinTabWidth="300"/>
        </ItemsPanelTemplate>
    </telerik:RadRibbonView.ItemsPanel>
...
Keep in mind that the MinTabWidth property will prevent the tabs from getting smaller than the set value, but if the text requires less space, the tab width will be reduced. However If you want to make your tabs look uniform you could set the MinWidth property of the RadRibbonTabs to be equal to the MinTabWidth property of the TabStrilPanel.

I hope this information helps. Please let us know if this works for you.

Kind regards,
Kiril Vandov
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Tags
RibbonView and RibbonWindow
Asked by
Willamette
Top achievements
Rank 1
Answers by
Lancelot
Top achievements
Rank 1
Tina Stancheva
Telerik team
DQ
Top achievements
Rank 1
John Cutler
Top achievements
Rank 1
Kiril Vandov
Telerik team
Share this question
or