Tabs in multiple rows

[Ivan Kopcanski]

Hi,

       I have custom templated RadTabControl with RadTabItems. The control has fixed width and tab items are all in the same line.
If there is too many tab items the text in tab headers are cut from the right. It can't be seen whole. The only solution for me is to
split tab items into the two lines, but I don't know how. I tried with placing RadTabItems in two horizontal stack panels one beneath the other with no luck. In such situation the RadTabItem content is not shown at all. Could you help me with this issue? 

 

 

<!--Tab Item Top Template-->

<ControlTemplate x:Key="TabItemTopTemplate"

TargetType="telerikNav:RadTabItem">

<Grid x:Name="wrapper">

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="CommonStateGroup">

<VisualState x:Name="MouseOver">

<Storyboard>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetProperty="Border.Background"

Storyboard.TargetName="InnerFill">

<DiscreteObjectKeyFrame KeyTime="0:0:0.0"

Value="{StaticResource TabItemMouseOverBackground}" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Normal" />

<VisualState x:Name="Selected">

<Storyboard>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetProperty="Border.Background"

Storyboard.TargetName="InnerFill">

<DiscreteObjectKeyFrame KeyTime="0:0:0.0"

Value="{StaticResource TabItemSelectInnerBorder}" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames

Storyboard.TargetProperty="Foreground"

Storyboard.TargetName="HeaderElement">

<DiscreteObjectKeyFrame KeyTime="0:0:0.0"

Value="{StaticResource TabItemSelectForeground}" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Disabled">

<Storyboard>

<DoubleAnimation Storyboard.TargetProperty="Opacity"

Storyboard.TargetName="HeaderElement" To="0.5"

Duration="0:0:0.0" />

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="FocusStates">

<VisualState x:Name="Unfocused" />

<VisualState x:Name="Focused" />

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Border x:Name="InnerFill"

BorderBrush="{StaticResource TabItemInnerBorder}" BorderThickness="1"

Background="{StaticResource TabItemBackground}">

<!--Content-->

<navPrimitive:TabItemContentPresenter x:Name="HeaderElement"

Content="{TemplateBinding Header}"

ContentTemplate="{TemplateBinding HeaderTemplate}"

HorizontalAlignment="Stretch" VerticalAlignment="Stretch"

Foreground="{TemplateBinding Foreground}"

Margin="{TemplateBinding Padding}" />

</Border>

</Grid>

</ControlTemplate>

<!--Tab Control Template-->

<ControlTemplate x:Key="TabControlTopTemplate"

TargetType="telerikNav:RadTabControl">

<Grid>

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="CommonStates">

<VisualState x:Name="Disabled">

<Storyboard />

</VisualState>

<VisualState x:Name="Normal" />

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Grid.RowDefinitions>

<RowDefinition Height="auto" />

<RowDefinition Height="*" />

</Grid.RowDefinitions>

<!--Content-->

<Border BorderThickness="0"

BorderBrush="{StaticResource TabControlDarkerBorder}"

CornerRadius="0"

Grid.Row="1">

<ContentPresenter x:Name="ContentElement"

Content="{TemplateBinding SelectedContent}"

ContentTemplate="{TemplateBinding SelectedContentTemplate}" />

</Border>

<!--TabStrip-->

<ItemsPresenter Margin="2 3 0 0"

x:Name="ItemsPresenterElement" />

</Grid>

</ControlTemplate>

 

This is the RadTabControl with tabs that should be shown in two lines:

 

<

 

telerik:RadTabControl x:Name="tbcAdvancedSearchFields"

 

 

Style="{StaticResource AdvancedSearchFieldsTabControl}">

 

 

 

 

<!--Debtor fields-->

 

 

 

 

<telerik:RadTabItem x:Name="tbciAdvancedSearchFields"

 

 

Header="{Binding DebtorsFieldsHeaderText}"

 

 

Style="{StaticResource AdvancedSearchFieldsTabItemStyle}">

 

 

 

<custom:AdvancedListBox x:Name="lbFields"

 

 

ItemsSource="{Binding DebtorsFields}"

 

 

SelectedItem="{Binding SelectedField, Mode=TwoWay}"

 

 

DisplayMemberPath="ColumnDef.HeaderName"

 

 

IsItemEnabledPath="IsFieldEnabled" />

 

 

 

 

</telerik:RadTabItem>

 

 

 

<!--Debtor free fields-->

 

 

 

 

<telerik:RadTabItem x:Name="tbciAdvancedSearchUserFields"

 

 

Header="{Binding DebtorsFreeFieldsHeaderText}"

 

 

Style="{StaticResource AdvancedSearchFieldsTabItemStyle}">

 

 

 

 

<custom:AdvancedListBox x:Name="lbUserFields"

 

 

ItemsSource="{Binding DebtorsFreeFields}"

 

 

SelectedItem="{Binding SelectedField, Mode=TwoWay}"

 

 

DisplayMemberPath="ColumnDef.HeaderName"

 

 

IsItemEnabledPath="IsFieldEnabled" />

 

 

 

 

</telerik:RadTabItem>

 

 

 

<!--Selections-->

 

 

 

 

<telerik:RadTabItem x:Name="tbciSelections"

 

 

Header="{Binding SelectionsHeaderText}"

 

 

Style="{StaticResource AdvancedSearchFieldsTabItemStyle}">

 

 

 

 

<custom:AdvancedListBox x:Name="lbSelections" ItemsSource="{Binding Selections}"

 

 

SelectedItem="{Binding SelectedSelection, Mode=TwoWay}"

 

 

DisplayMemberPath="DisplayName"

 

 

IsEnabled="{Binding IsSelectionEnabled}" />

 

 

 

 

</telerik:RadTabItem>

 

 

 

 

<!--Grid specific fields-->

 

 

 

 

<telerik:RadTabItem Header="{Binding GridSpecificFieldsHeaderText}"

 

 

Visibility="{Binding IsGridSpecificVisible, Converter={StaticResource VisibilityConverter}}"

 

 

Style="{StaticResource AdvancedSearchFieldsTabItemStyle}">

 

 

 

 

<custom:AdvancedListBox x:Name="lbGridSpecificFields"

 

 

ItemsSource="{Binding GridSpecificFields}"

 

 

SelectedItem="{Binding SelectedField, Mode=TwoWay}"

 

 

DisplayMemberPath="ColumnDef.HeaderName"

 

 

IsItemEnabledPath="IsFieldEnabled" />

 

 

 

</telerik:RadTabItem>

 

 

 

<!--Grid specific free fields-->

 

 

 

 

<telerik:RadTabItem Header="{Binding GridSpecificFreeFieldsHeaderText}"

 

 

Visibility="{Binding IsGridSpecificVisible, Converter={StaticResource VisibilityConverter}}"

 

 

Style="{StaticResource AdvancedSearchFieldsTabItemStyle}">

 

 

 

 

<custom:AdvancedListBox x:Name="lbGridSpecificFreeFields"

 

 

ItemsSource="{Binding GridSpecificFreeFields}"

 

 

SelectedItem="{Binding SelectedField, Mode=TwoWay}"

 

 

DisplayMemberPath="ColumnDef.HeaderName"

 

 

IsItemEnabledPath="IsFieldEnabled" />

 

 

 

</telerik:RadTabItem>

 

 

 

 

</telerik:RadTabControl>

 

 

 

 

 

 

 

 

 

 

[Kiril Stanoev]

Hi Ivan,

 Thank you for your feedback. We have considered this scenario and we will implement it, but for the moment I cannot bind to a specific date. A little trick you can do in this case is, instead of using StackPanel, to use Telerik's WrapPanel(located in Telerik.Windows.Controls.dll), as shown bellow:

<telerikNavigation:RadTabControl x:Name="tabControl1" Width="500" Height="500" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
    <telerikNavigation:RadTabControl.ItemsPanel>
        <ItemsPanelTemplate>
            <telerik:RadWrapPanel />
        </ItemsPanelTemplate>
    </telerikNavigation:RadTabControl.ItemsPanel>
</telerikNavigation:RadTabControl>

The problem is that if you select an item, the selected tab will not go automatically down:

Let me know if this works for you.

Regards,

Kiril Stanoev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Ivan Kopcanski]

Thank you for your answer, it is a quick and simple solution.

[James]

I also look forward to this feature, the RadWrapPanel almost does the trick!
Regards,
James.

[Jay]

Hi Kiril Stanoev

What is solution for selected tab will go down?

Thanks & Regards
Jaysukh

[Miroslav]

Hi Jay,

Currently using a wrap panel will not automatically adjust the row of the selected item as expected.

Unfortunately our TabPanel does not currently support automatic breaking.

Sincerely yours,
Miroslav
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[James]

Hello,

Just out of curiosity, is this feature likely to be implemented soon?

It would be a great feature!

James.

[Miroslav]

Hello James,

Yes, it is already implemented. You can use the OverflowMode property like so:

<telerik:RadTabControl OverflowMode="Wrap">
    <telerik:RadTabItem Header="Tab Item 1" />
    <telerik:RadTabItem Header="Tab Item 2" />
    <telerik:RadTabItem Header="Tab Item 3" />
    <telerik:RadTabItem Header="Tab Item 4" />
    <telerik:RadTabItem Header="Tab Item 5" />
    <telerik:RadTabItem Header="Tab Item 6" />
</telerik:RadTabControl>

Regards,
Miroslav
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.