This is a migrated thread and some comments may be shown as answers.

Tab header shape request

10 Answers 110 Views
TabControl
This is a migrated thread and some comments may be shown as answers.
Ben Hayat
Top achievements
Rank 2
Ben Hayat asked on 05 Mar 2011, 02:48 PM
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

10 Answers, 1 is accepted

Sort by
0
Tina Stancheva
Telerik team
answered on 10 Mar 2011, 10:33 AM
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
Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
0
Ben Hayat
Top achievements
Rank 2
answered on 10 Mar 2011, 03:38 PM
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!
0
Accepted
Tina Stancheva
Telerik team
answered on 10 Mar 2011, 03:48 PM
Hello Ben,

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

Kind regards,
Tina Stancheva
the Telerik team
Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
0
Ben Hayat
Top achievements
Rank 2
answered on 10 Mar 2011, 03:50 PM
Thank you very much;
You're great AS ALWAYS!
..Ben
0
Bruno
Top achievements
Rank 1
answered on 04 Apr 2011, 11:48 AM
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.
0
Tina Stancheva
Telerik team
answered on 07 Apr 2011, 11:40 AM
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
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
0
Bruno
Top achievements
Rank 1
answered on 07 Apr 2011, 12:31 PM
Hi Tina

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

Thanks again!
0
George
Telerik team
answered on 12 Apr 2011, 01:44 PM
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
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
0
Ken
Top achievements
Rank 1
answered on 23 Dec 2011, 07:11 PM
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);
    }
}
0
Petar Mladenov
Telerik team
answered on 28 Dec 2011, 04:46 PM
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

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

Tags
TabControl
Asked by
Ben Hayat
Top achievements
Rank 2
Answers by
Tina Stancheva
Telerik team
Ben Hayat
Top achievements
Rank 2
Bruno
Top achievements
Rank 1
George
Telerik team
Ken
Top achievements
Rank 1
Petar Mladenov
Telerik team
Share this question
or