RadTabControl Item Wrapping

[Brandmuscle]

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

[Brandmuscle]

Or even some scroll buttons to let me scroll through tabs would be nice too.

[Miroslav]

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.

[Murali]

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...

[Kiril Vandov]

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

 

 

[Daniel]

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

[Dilyan Traykov]

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