Vertical Tabs with Horizontal Headertitles

[Bruno]

Hello,

I'm trying to create vertically aligned tabs with horizontal headers, the same layout as Word 2010 uses. An example is given in wordtab.png. I'm aware of the TabStripPlacement and TabOrientation properties and they almost do what I'm looking for. However the tabs are always vertically aligned at the bottom, as verticaltabs_bottomalignment.png illustrates. What I'm looking for is something like the following:

• 1 ControlTemplate which describes the wordlike tabs if TabStripPlacement is set to "Left" and the normal tab layout if the TabStripPlacement is set to "Top"

Can someone provide me an example for this? Some more Informations about my setup:

• Version: 2011.1.526.1040
• Using the default TabControl/TabItem Templates. No changes made.

Thank you for the help.

[Bruno]

This Problem is solved. In case anyone is interested, I simply made two addtional named styles which reference two brand new control templates. These redefine the default appearance of the TabControl/TabItem to show vertical items with horizontal labels. It never really looked well using the TabStripPlacement and it made maintenance a mess.

[Eric]

Bruno, this is exactly what I'm looking at doing now.  Can you post the code you used to get the left tabs aligned at the top?

[Tina Stancheva]

Hello Eric,

You can implement the desired look by controlling the RadTabControl Align, TabStripPlacement and TabOrientation properties:

<telerik:RadTabControl TabStripPlacement="Left" TabOrientation="Vertical" Align="Right">
    <telerik:RadTabItem Header="RadTabItem 1">
        <Grid Background="Transparent"/>
    </telerik:RadTabItem>
    <telerik:RadTabItem Header="RadTabItem 2">
        <Grid Background="Transparent"/>
    </telerik:RadTabItem>
    <telerik:RadTabItem Header="RadTabItem 3">
        <Grid Background="Transparent"/>
    </telerik:RadTabItem>
    <telerik:RadTabItem Header="RadTabItem 4">
        <Grid Background="Transparent"/>
    </telerik:RadTabItem>
    <telerik:RadTabItem Header="RadTabItem 5">
        <Grid Background="Transparent"/>
    </telerik:RadTabItem>
</telerik:RadTabControl>

Give this a try and let us know if it works for you.

Regards,
Tina Stancheva
the Telerik team

[Viki]

Hi,

I have the same case, in addition I need that the header text will be left aligned,
by default it's center aligned, as in the attached file, how can I do it?

[Viki]

I found it:

<telerikNavigation:RadTabItem Name="GeneralTab" Header="General" VerticalAlignment="Top" TabIndex="0">

VerticalAlignment

="Top" - this is what I needed
the result can be seen in the attached file

 

[Joan]

I noticed that the background highlighting of the selected tab does not extend the full length of the tab - only its text length. Is there any way to fix this?

[Tina Stancheva]

Hi Joan,

Unfortunately I wasn't able to reproduce this issue but I feel I might be missing something. Can you please elaborate a bit more on the issue? If you can send over a snapshot or a screencast demonstrating this behavior, we will be able to further investigate it and suggest a solution.

All the best,
Tina Stancheva
the Telerik team

[Joan]

Apologies if it's a difference between Silverlight and WPF. I just found nearly the answer I was looking for in this forum and went with it.

I want the tabs headers to be "left" aligned so I used the following code:

<telerik:RadTabControl Grid.Row="0" Grid.ColumnSpan="5"  TabStripPlacement="Left" TabOrientation="Vertical" Align="Right" >
    <telerik:RadTabItem Header="Short" VerticalAlignment="Top">
        <Grid Background="Transparent"/>
    </telerik:RadTabItem>
    <telerik:RadTabItem Header="Not So Short" VerticalAlignment="Top">
        <Grid Background="Transparent"/>
    </telerik:RadTabItem>
    <telerik:RadTabItem Header="Even Longer Than That" VerticalAlignment="Top">
        <Grid Background="Transparent"/>
    </telerik:RadTabItem>

You can see in the attached screenshot that when the header is not the maximum length, the "tab" part is not drawn so that it connects to the page.

[Tina Stancheva]

Hi Joan,

Thank you for getting back to us and elaborating on your RadTabControl definition. I understand why you set the RadTabItem VerticalAlignment to Top but you need to have in mind that this property will be applied on the entire RadTabItem, not only on its content. I believe that in your case the HorizontalContentAlignment property is the better choice:

<telerik:RadTabControl Grid.Row="0" Grid.ColumnSpan="5"  TabStripPlacement="Left" TabOrientation="Vertical" Align="Right" >
    <telerik:RadTabItem Header="Short"  HorizontalContentAlignment="Left">
        <Grid Background="Transparent"/>
    </telerik:RadTabItem>
    <telerik:RadTabItem Header="Not So Short" HorizontalContentAlignment="Left">
        <Grid Background="Transparent"/>
    </telerik:RadTabItem>
    <telerik:RadTabItem Header="Even Longer Than That" HorizontalContentAlignment="Left">
        <Grid Background="Transparent"/>
    </telerik:RadTabItem>
</telerik:RadTabControl>

Please give this a try and let me know if it helps.

Kind regards,
Tina Stancheva
the Telerik team

[Joan]

Perfect. Thanks.