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

Tabs in multiple rows

7 Answers 227 Views
TabControl
This is a migrated thread and some comments may be shown as answers.
Ivan Kopcanski
Top achievements
Rank 1
Ivan Kopcanski asked on 07 Dec 2009, 04:07 PM
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>

 

 

 

 

 

 

 

 

 

 

7 Answers, 1 is accepted

Sort by
0
Accepted
Kiril Stanoev
Telerik team
answered on 08 Dec 2009, 12:18 PM
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.
0
Ivan Kopcanski
Top achievements
Rank 1
answered on 08 Dec 2009, 04:31 PM
Thank you for your answer, it is a quick and simple solution.
0
James
Top achievements
Rank 1
answered on 16 Dec 2009, 05:28 AM
I also look forward to this feature, the RadWrapPanel almost does the trick!
Regards,
James.
0
Jay
Top achievements
Rank 1
answered on 21 Dec 2009, 06:43 AM
Hi Kiril Stanoev

What is solution for selected tab will go down?

Thanks & Regards
Jaysukh
0
Miroslav
Telerik team
answered on 21 Dec 2009, 12:36 PM
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.
0
James
Top achievements
Rank 1
answered on 24 May 2010, 03:00 AM
Hello,

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

It would be a great feature!

James.
0
Miroslav
Telerik team
answered on 26 May 2010, 07:46 AM
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.
Tags
TabControl
Asked by
Ivan Kopcanski
Top achievements
Rank 1
Answers by
Kiril Stanoev
Telerik team
Ivan Kopcanski
Top achievements
Rank 1
James
Top achievements
Rank 1
Jay
Top achievements
Rank 1
Miroslav
Telerik team
Share this question
or