RadTabItem SelectedItem Stying Issue

[Rakesh]

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..

Thanks
Rakesh

[Petar Mladenov]

Hello Rakesh,

 You can check the following approaches, especially the workaround from Tina:
TabHeaderShapeRequest
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
Regards,
Petar Mladenov
the Telerik team