Change selected background color for the RadTabItem header

[Don]

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

[Don]

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?

[Don]

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! :)

[Pavel R. Pavlov]

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

[Don]

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

[Pavel R. Pavlov]

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

[Don]

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