RadTabItem SelectedItem Stying Issue

2 posts, 1 answers
  1. Rakesh
    Rakesh avatar
    19 posts
    Member since:
    Feb 2012

    Posted 18 Apr 2012 Link to this post

    I modified the ControlTemplate of RadTabItem to look like the image I provided.

    In RadTabItem Template we have 3 Borders(Normal, MouseOver, Selected), So I replaced with Paths to look like this.
    But I have to problems.
    1) The Unselected Item should be behind the previous item (i.e tab2 should be behind tab1).
    2) When we select an Item it should appear front. here tab4 is over tab3.

    I looked for all the solutions, I don't find any.
    Is there anyway we can  do this.

    Looking forward for someone to help..

  2. Answer
    Petar Mladenov
    Petar Mladenov avatar
    2882 posts

    Posted 21 Apr 2012 Link to this post

    Hello Rakesh,

     You can check the following approaches, especially the workaround from Tina:
    which uses SelectionChangedEvent and the ZIndex attached property:

    void tabControl_PreviewSelectionChanged(object sender, Telerik.Windows.Controls.SelectionChangedEventArgs e)
        if (e.AddedItems.Count != 0)
            RadTabItem newSelectedItem = e.AddedItems[0] as RadTabItem;
            newSelectedItem.SetValue(Canvas.ZIndexProperty, 2);
        if (e.RemovedItems.Count != 0)
            RadTabItem oldSelectedItem = e.RemovedItems[0] as RadTabItem;
            oldSelectedItem.SetValue(Canvas.ZIndexProperty, 0);
    You may also find this project useful:
    Enclosed tab Style
    Petar Mladenov
    the Telerik team

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

  3. DevCraft R3 2016 release webinar banner
Back to Top