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

Change Style of Tab Item

2 Answers 719 Views
TabControl
This is a migrated thread and some comments may be shown as answers.
Thomas
Top achievements
Rank 1
Iron
Thomas asked on 18 Jun 2018, 07:13 AM
Hello,

we're currently using VS2015 and the latest Telerik WPF controls (no XAML). Our project is made with MVVM in mind.
What is the right way of changing the "Tab Item" style? We tried to change the style but this doesn't seem to work as the changes are not applied. Then we tried to create a new DataTemplate which also doesn't work the way we expected it.

Our RadTabControl is set to show the tabs on the left side and we're using the Office2016 template at the moment.

We just want to change three things:

1. Set the text align to left
2. Add more "inner space" (padding) around the text
3. Change the background color of the "Tab Item" (header) to a specific color and also change the hover and selected color of the tab.

How can we change that? Is it only possible to locate the information in the template XAML files an copy all the stuff over and change it or is there a simpler method for this?

Thank you in advance for your help.

Best Regards,
Thomas

2 Answers, 1 is accepted

Sort by
0
Accepted
Vicky
Telerik team
answered on 18 Jun 2018, 01:24 PM
Hi Thomas,

in order to achieve the desired changes, you need to override RadTabItem's style. You must also change item's ControlTemplate a bit in order to customize the hover and selected states of each item.

As you are using Implicit Styles, after you have successfully applied the theme (in your case Office2016) and merged the required by RadTabControl dictionaries, you must create a new style, based on the RadTabItemStyle, and override its Template property (needed for hover and selected states), as well as the properties that you mentioned, i.e. HorizontalContentAlignment (responsible for each tab's text alignment), Padding (responsible for the space around tab's text) and Background.

Please, check the attached sample that demonstrates the described above approach, and let me know if it helps.

Regards,
Viktoria Grozdancheva
Progress Telerik
Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
0
Thomas
Top achievements
Rank 1
Iron
answered on 21 Jun 2018, 08:36 AM
Works perfectly! Thank you Viktoria. Best Regards, Thomas
Tags
TabControl
Asked by
Thomas
Top achievements
Rank 1
Iron
Answers by
Vicky
Telerik team
Thomas
Top achievements
Rank 1
Iron
Share this question
or