Vertical Tabs with Horizontal Headertitles

11 posts, 0 answers
  1. Bruno
    Bruno avatar
    54 posts
    Member since:
    Jul 2012

    Posted 06 Jul 2011 Link to this post

    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.

  2. Bruno
    Bruno avatar
    54 posts
    Member since:
    Jul 2012

    Posted 11 Jul 2011 Link to this post

    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.
  3. DevCraft banner
  4. Eric
    Eric avatar
    6 posts
    Member since:
    Apr 2011

    Posted 28 Jul 2011 Link to this post

    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?
  5. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 02 Aug 2011 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get now >>

  6. Viki
    Viki avatar
    20 posts
    Member since:
    Dec 2010

    Posted 23 Oct 2011 Link to this post

    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?
  7. Viki
    Viki avatar
    20 posts
    Member since:
    Dec 2010

    Posted 23 Oct 2011 Link to this post

    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

     

  8. Joan
    Joan avatar
    7 posts
    Member since:
    Apr 2013

    Posted 13 May 2013 Link to this post

    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?
  9. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 16 May 2013 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  10. Joan
    Joan avatar
    7 posts
    Member since:
    Apr 2013

    Posted 16 May 2013 Link to this post

    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.
  11. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 16 May 2013 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  12. Joan
    Joan avatar
    7 posts
    Member since:
    Apr 2013

    Posted 16 May 2013 Link to this post

    Perfect. Thanks.
Back to Top
DevCraft banner