Question

I’m having a problem with the WPF Tab View control that I was hoping someone here might be able to help me with.

I want my tab view control to use rounded corners for the tab headers, because I think rounded tabs look better.

To do this I modified the default control template for the tab by using the ‘Edit Copy’ command in Expression Blend. I then just set the corner radius for the ‘border’ of the tab header.

The problem with this approach, however, is that the ‘Edit Copy’ command ends up generating literal color values for the gradient brushes used to display the ‘Active’ and ‘Mouse Over’ tab backgrounds.

This causes problems when ‘hi contrast’ mode is enabled. Rather than switching to the hi contrast color scheme, like the other controls, the tab with the modified template will use the literal color values specified in the gradient brushes for the active and mouse-over tabs tabs. This ends up making those tabs unreadable, because the text on the tab header gets changed to ‘white’ when the OS switches to hi contrast mode (white text on a gray background is unreadable).

I figured I might be able to switch back to square tabs when hi-contrast mode is enabled, That would fix this particular problem. However, I imagine there will be similar issues with users that have custom windows themes installed.

So, what I’m wondering is:

1. Is there any way I can change the gradients to point to system resources rather than literal values so that the colors will be updated correctly when hi-contrast mode is enabled
2. Or, is there a way for me to set the corner radius on the border of the tab header without creating a new control template?

Edit:

I think I should be a little more explicit about what I’m looking for. I want a tab control that behaves exactly like the default tab control, except that the tab header corners are rounded. By default, a tab control will use gradients for the tab backgrounds and will ‘highlight’ inactive tabs when the user mouses over them. It will also respond correctly and change it’s colors and it’s mouse over behavior when the OS switches to hi contrast mode. I still need this behavior.

Creating a copy of the default control template in Blend creates a control template that does not work correctly in hi contrast mode. I want to know what I need to do to the control template, or the code in my window, to get that generated control template to work correctly in hi-contrast mode.

Answer 1

There is no way to make rounded tab corners without creating a custom template for TabItem. Doing the ‘Edit Copy’ in blend I believe creates default template based on the current theme of windows you have (I may be wrong however. I beleive that wehn you do a controltemplate dump it get’s the current control template which is determined by the system theme. like in presentation.aero or something like that). However if you want to supply colors that the system will use when the changes then sepcify them like this in your template:

Color='{DynamicResource {x:Static SystemColors.XXXX}' 

This will use the system colors to style the control and will be updated to reflect changes in the system theme.