Tab header shape request

[Ben Hayat]

Hi Team;
If you look at the demo of Docking with "Summer" theme, you see the header shape of the tab pages uses the same shape as Expression Blend uses for it's tabs. Attached pic.

Can we have the same shape tab header for Tab and Docking control for "Expression_Dark" Theme please?
Thanks!
..Ben

[Tina Stancheva]

Hello Ben Hayat,

You can modify the default Expression_Dark theme following the approach described here.

I prepared a sample project to get you started, illustrating how to customize the Expression_Dark theme RadTabControl style. I added the modified Telerik.Windows.Themes.Expression_Dark.dll in the Referenced Assemblies folder and I also added the RadTabItem modified style to the MainPage Resources so that you can track the changes that should be applied to the TabControl.xaml defined in the Expression_Dark theme project.

Following the same approach you can customize the RadDocking Expression_Dark theme style as well. Let us know if you need more info.

Regards,
Tina Stancheva
the Telerik team

[Ben Hayat]

Hi Tina;
I don't see any sample project. with your post.

After a long discussion with myself ;-), I've decided to use "Summer" theme than "Expression_Dark". So the docking are already done in the Summer, but I need to do them for Tab control.

Thanks!

[Tina Stancheva]

Hello Ben,

Please accept my apology. Indeed I left out the attachment. Please find it bellow.

Kind regards,
Tina Stancheva
the Telerik team

[Ben Hayat]

Thank you very much;
You're great AS ALWAYS!
..Ben

[Bruno]

Hi Tina

Thank you for this nice sample.
Just one question: How can I get the selected Tab in front of the 'not selected'?
In the sample, the selected Tab (left) seems to be cutted off at the lower right corner (see screenshot).

Thank you.

[Tina Stancheva]

Hello Bruno,

If you want the RadTAbItems to be styled not to overlap each other at all:

You can define a Margin foe each item:
<Setter Property="Margin" Value="3,0" />

If, however, you want the SelectedItem to overlap the unselected item, you need to add some custom logic. For example you can handle the PreviewSelectionChanged() event like so:

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);
    }
}

Give this a try and let us know if it helps or if you need more info.

Regards,
Tina Stancheva
the Telerik team

[Bruno]

Hi Tina

Thank you for your 'overlap' solution. The code works perfect.
However befor Q1.2011 it worked without the PeviewSelectionChanged trick.

Thanks again!

[George]

Hi Bruno,

Your remarks are correct and we will definitely look in this bug. I am glad to update your telerik points. Sorry for any inconvenience caused.


Greetings,
George
the Telerik team

[Ken]

Where does this code snippet go exactly, for instance i'm using a grid and not a canvas.

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);
    }
}

[Petar Mladenov]

Hello Ken,

 The Canvas.ZIndex is attached property and you don't need Canvas defined in XAML in order to use it. Please check out the attached sample and let us know if it satisfies you.

Regards,
Petar Mladenov
the Telerik team