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

Change selected background color for the RadTabItem header

6 Answers 383 Views
TabControl
This is a migrated thread and some comments may be shown as answers.
Don
Top achievements
Rank 1
Don asked on 05 Apr 2013, 05:59 PM
Hello.

I'm using the RadTabControl with the Expression_DarkTheme.  I want to change the background of the tab headers when selected.  Is there a relatively simple way to do this  or do I have to re-template the whole tab header?

Thanks in advance.

- Don Jordan

6 Answers, 1 is accepted

Sort by
0
Don
Top achievements
Rank 1
answered on 05 Apr 2013, 09:13 PM
This is what I have come up with for now...

I modified these Telerik source files:

C:\RadControlsSource\Core\Controls\Themes\Expression\Dark\Common.xaml

Made a new color definition for "ControlBackground_Active" and gave it a unique name, "ControlBackground_Active_Telestream" so the change won't break anything else.


C:\RadControlsSource\Controls\Navigation\Themes\Expression\TabControl_style.xaml

Commented-out the old "SelectionVisual" Border definition and replaced the Background value with the new color defintion.


            <Border x:Name="SelectionVisual" Opacity="0"
Margin="{StaticResource TabItem_Margin}"
BorderBrush="{StaticResource ControlOuterBorder_Active}"
Background="{StaticResource ControlBackground_Active_Telestream}"
BorderThickness="{StaticResource TabItem_OuterBorderThickness}"
CornerRadius="{StaticResource TabItem_OuterCornerRadius}"/>


Of course, I had to make a special build of the controls.  My next question: Is there a way to do this by overriding  these attributes frcm my application's XAML?

0
Don
Top achievements
Rank 1
answered on 09 Apr 2013, 02:44 AM
I guess there isn't a way to do this by overriding the XAML in my application. A custom build it is!

I had a great conversation with myself. Thank you all for listening! :)
0
Accepted
Pavel R. Pavlov
Telerik team
answered on 10 Apr 2013, 10:36 AM
Hi Don,

An other way to customize your controls without building them is to use implicit styles. You can read more information about this approach here. Please try this approach out and let me know if you have any further questions.

Regards,
Pavel R. Pavlov
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

0
Don
Top achievements
Rank 1
answered on 29 Apr 2013, 08:16 PM
I played with this trying implicit styles, but I can't figure out how to override this border definition to change the background of a selected tab header:

<Border x:Name="SelectionVisual" Opacity="0"
Margin="{StaticResource TabItem_Margin}"
BorderBrush="{StaticResource ControlOuterBorder_Active}"
Background="{StaticResource ControlBackground_Active}"
BorderThickness="{StaticResource TabItem_OuterBorderThickness}"
CornerRadius="{StaticResource TabItem_OuterCornerRadius}"/>

The article you  linked to only shows how to override a property that is already visible at the application level in the XAML. I need to override that the tab control uses as the border named "SelectionVisual".

Any clue would do. :)


0
Pavel R. Pavlov
Telerik team
answered on 30 Apr 2013, 09:02 AM
Hello Don,

In order to achieve your requirement you can change either the StaticResource or the corresponding property in the desired element. In this case I changed the Background property of the "SelectionVisual" Border element to Red so you can easily see and find it in the extracted template.

Please take a look at the attached project and let me know if it works for you.

Regards,
Pavel R. Pavlov
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

0
Don
Top achievements
Rank 1
answered on 30 Apr 2013, 06:01 PM
OK. I see what you mean.  Add the implicit themes XMAL file to my project and modify that.  Thanks.

P.S. I was over-thinking this. :)
Tags
TabControl
Asked by
Don
Top achievements
Rank 1
Answers by
Don
Top achievements
Rank 1
Pavel R. Pavlov
Telerik team
Share this question
or