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

RadTabControl Item Wrapping

6 Answers 199 Views
TabControl
This is a migrated thread and some comments may be shown as answers.
Brandmuscle
Top achievements
Rank 1
Brandmuscle asked on 28 Apr 2009, 09:17 PM
When I am adding tabs to my tabcontrol I noticed that the tabs size according to the size of the control (their parent).  Is there any way to have the tabs actually wrap onto a 2nd (or even 3rd) level?

For example: In your demo, you have an "Add Tab" button, but you can only add so many tabs....  If you keep adding tabs you will start to see that the tabs get VERY small and unreadable.  Is there a way to have them "Auto Wrap" onto a 2nd tier of some sort?  Could this be something that is thought about for future enhancements?

Thanks a bunch

6 Answers, 1 is accepted

Sort by
0
Brandmuscle
Top achievements
Rank 1
answered on 28 Apr 2009, 09:24 PM
Or even some scroll buttons to let me scroll through tabs would be nice too.
0
Miroslav
Telerik team
answered on 29 Apr 2009, 02:31 PM
Hello Dan,

Currently, the row breaking has to be set explicitly, with IsBreak.

We are planning to add both automatic breaking and scrollbars, though I cannot put a timestamp on these features.

As a workaround currently you can use the default TabPanel, with the twist that you need to mark selected items explicitly, so that it will rearrange them when selected.

Please find the sample code below:

private void RadTabControl_SelectionChanged(object sender, RoutedEventArgs e)  
{  
    SetIsSelected(sender);  
}  
 
private static void SetIsSelected(object sender)  
{  
    var itemControl = sender as ItemsControl;  
 
    foreach (var item in itemControl.Items)  
    {  
        var visual = itemControl.ItemContainerGenerator.ContainerFromItem(item)  
            as RadTabItem;  
        if (visual != null)  
        {  
            Selector.SetIsSelected(visual, visual.IsSelected);  
        }  
    }  
}  
 
private void tabControl_Loaded(object sender, RoutedEventArgs e)  
{  
    //Change the selection so that the Panel will start working.  
    tabControl.SelectedIndex = 1;  
}  
 


<Window x:Class="TabControlAutoWrap.Window1" 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" 
        xmlns:primitives="clr-namespace:System.Windows.Controls.Primitives;assembly=PresentationFramework" 
        Title="Window1" Height="300" Width="300">  
    <Grid> 
        <telerik:RadTabControl x:Name="tabControl" SelectedIndex="0" 
                ReorderTabRows="False" 
                SelectionChanged="RadTabControl_SelectionChanged" 
                Loaded="tabControl_Loaded">  
            <telerik:RadTabControl.ItemsPanel> 
                <ItemsPanelTemplate> 
                    <primitives:TabPanel /> 
                </ItemsPanelTemplate> 
            </telerik:RadTabControl.ItemsPanel> 
            <telerik:RadTabItem Header="Long Tab Header" /> 
            <telerik:RadTabItem Header="Long Tab Header" /> 
            <telerik:RadTabItem Header="Long Tab Header" /> 
            <telerik:RadTabItem Header="Long Tab Header" /> 
            <telerik:RadTabItem Header="Long Tab Header" /> 
        </telerik:RadTabControl> 
    </Grid> 
</Window> 

Hopefully this will work for you,

All the best,
Miroslav
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Murali
Top achievements
Rank 1
answered on 20 Mar 2014, 06:20 AM
Hello Telerik Team,

Has there been any progress on this feature?  I have been looking to find out how to wrap the tab well for a couple of hours and finally got to this post - only to find that it wasn't working back in 2012 and there is hope to see this working, I wonder if you have some good news to share...
0
Kiril Vandov
Telerik team
answered on 24 Mar 2014, 09:46 AM
Hello Murali,

We have implemented this feature and you could use it by setting the OverflowMode property of the RadTabControl to "Wrap".

I hope this information helps.

Kind regards,
Kiril Vandov
Telerik
 

Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

 
0
Daniel
Top achievements
Rank 1
answered on 12 Dec 2019, 08:01 PM

The official documentation doesn't mention this new property. It says the way to go is to set IsBreak. I just wasted 2 hours implementing auto wrapping myself and after I was done I stumbled upon OverflowMode accidentally.

Please do update the documentation.

https://docs.telerik.com/devtools/wpf/controls/radtabcontrol/styling-and-appearance/controlling-layout

0
Dilyan Traykov
Telerik team
answered on 17 Dec 2019, 11:34 AM

Hello Daniel,

Thank you for your feedback and I do apologize for the time you spent on this. As a thank you for bringing this to our attention, I've awarded you with some Telerik points.

I have also logged a new documentation item in our backlog and can assure you we will document this property at our earliest convenience, hopefully by the end of the week.

If I can assist you with anything else, please let me know.

Regards,
Dilyan Traykov
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
TabControl
Asked by
Brandmuscle
Top achievements
Rank 1
Answers by
Brandmuscle
Top achievements
Rank 1
Miroslav
Telerik team
Murali
Top achievements
Rank 1
Kiril Vandov
Telerik team
Daniel
Top achievements
Rank 1
Dilyan Traykov
Telerik team
Share this question
or