Vertical Tab Alignment

7 posts, 0 answers
  1. Frustrated Dev
    Frustrated Dev avatar
    35 posts
    Member since:
    Oct 2006

    Posted 12 Mar 2010 Link to this post

    Hello,

    I have been using the Telerik RadTabControl in my application for a while. I just upgraded to the latest release. In the process, I noticed that my tabs are not aligned as they previously were. Before the upgrade, my tabs used TabStripPlacement="Left". The tabs were placed beginning in the upper left corner. After the upgrade though, the tabs moved to the lower left corner.

    How do I get my tabs back to the upper left corner?

    Thank you,
  2. Andrew Katz
    Andrew Katz avatar
    1 posts
    Member since:
    Feb 2008

    Posted 16 Mar 2010 Link to this post

    I have the same exact problem, as of the latest Q1, 2010 release.

    You can see the problem, even in the demo:


    Just select Postion: Left, Orientation: Vertical and you will see how they are now flush to the bottom.  I have been browsing the source control, and it seems to be an issue with Visual State transformations changing the orientation of the ItemsPanelTemplate:

    <VisualState x:Name="HorizontalLeft">
    <Storyboard>
    <ObjectAnimationUsingKeyFrames
    Storyboard.TargetName="OrientationTransform"
    Storyboard.TargetProperty="LayoutTransform" Duration="0">
    <DiscreteObjectKeyFrame KeyTime="0">
    <DiscreteObjectKeyFrame.Value>
    <RotateTransform Angle="180" />
    </DiscreteObjectKeyFrame.Value>
    </DiscreteObjectKeyFrame>
    </ObjectAnimationUsingKeyFrames>
    </Storyboard>
    </VisualState>

    I think this causes the TabWrapPanel's TabStripPlacement property to inverse.  However, even when I try to counteract the process by setting my own TabControl's ItemsPanelTemplate:

    <telerikNavigation:RadTabControl.Resources>
    <ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
    <telerikPrimitives:TabWrapPanel TabStripPlacement="Bottom" /> <!-- equivalent to "Top" when inversed? -->
    </ItemsPanelTemplate>
    </telerikNavigation:RadTabControl.Resources>
    ...

    It doesn't seem to work.  I presume it is because is because the ItemsPanelTemplate gets overridden somehow when the TabStripPlacement is set to "Left".

    Please provide a viable workaround!  Thanks.


  3. DevCraft banner
  4. Dimitrina
    Admin
    Dimitrina avatar
    442 posts

    Posted 17 Mar 2010 Link to this post

    Hi Andrew Katz,

    If you want RadTabItem to be placed  in the upper left corner , you have to set : Align="Right" .

    If you have further questions please do not hesitate to ask us.

    I hope this will help you.

    Greetings,
    Dimitrina
    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.
  5. Phillip Hamlyn
    Phillip Hamlyn avatar
    26 posts
    Member since:
    Jul 2009

    Posted 04 May 2010 Link to this post

    I have a similar problem having upgraded - a Tab control with TabStripPlacement="Right". This used to show the tab strip on the right hand side of my application with the tabs flowing from top to bottom, with the text and tab items horizontally aligned similar to a vertical stack panel.

    After upgrading the tab strip is still shown on the right, but all the tab items have become rotated through 90 degrees. A very pretty effect, but not one I want to have. I cannot see a way of restoring my UI so that the tab items are horizontally displayed - can you help ?
  6. Dimitrina
    Admin
    Dimitrina avatar
    442 posts

    Posted 06 May 2010 Link to this post

    Hi Phillip,

    In order to implement the your scenario you need to set the following properties:
     TabOrientation="Vertical"
     Align="Right"

    If you have further questions please do not hesitate to ask us.

    I hope this will help you.

    Sincerely yours,
    Dimitrina
    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.
  7. Terry Foster
    Terry Foster avatar
    60 posts
    Member since:
    Sep 2009

    Posted 08 Mar 2012 Link to this post

    I was very frustrated by this as well.  There is no mention of the 'Align' property in your documentation.  In fact, you show screen shots that no longer accurately reflect the accompanying code.  Please update your documentation.

    Terry
  8. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 09 Mar 2012 Link to this post

    Hi Terry,

     We understand your frustration , the link describing the Align property is not easy to find. We will log this as a bug in our documentation.  Thank you for your cooperation.

    Greetings,
    Petar Mladenov
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
Back to Top
DevCraft banner