WPF Tab View, Custom Templates and Accessibility
I am having a problem with the WPF view control, I was hoping someone here could help me.
I want the tab control to use rounded corners for the tab titles because I think rounded tabs look better.
To do this, I changed the default control template for the tab using the Edit Copy command in Expression Blend. Then I just set the corner radius for the "border" of the tab title.
However, the problem with this approach is that the Edit Copy command generates literal color values for the gradient brushes used to display the Active and Mouse Over background tabs.
This causes problems when hi contrast is enabled. Instead of switching to a contrasting color scheme like other controls, the resized tab will use the literal color values specified in the gradient brushes for the active and muscle tabs. This causes these tabs to be unreadable because the text in the tab title changes to "white" when the OS switches to contrast mode (white text on a gray background is unreadable).
I thought I could switch back to square tabs when hi-contrast is on, which would fix this particular issue. However, I suppose there will be problems with users who have custom Windows themes installed.
So I'm wondering:
- Is there a way to change the gradients to point to system resources rather than literal values so that colors are updated correctly when contrast mode is enabled.
- Or, is there a way 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 candid about what I'm looking for. I want a tab control that behaves exactly like the default tab control, except that the corners of the tab header are rounded. By default, a tab control will use gradients for the background of the tab and will “highlight” inactive tabs as the user swipes over them. It will also react correctly and change its color, and it hovers over the behavior when the OS switches to contrast mode. I still need this behavior.
Making a copy of the default control template in Blend creates a control template that does not work properly in contrast mode. I want to know what I need to do with the control template or code in my window in order to get this generated control template to work correctly in high contrast mode.
source to share
There is no way to make rounded corners of tabs without creating a custom template for the TabItem. Doing "Edit Copy" in blend I believe creates a default template based on the current window theme you have (I may be wrong. I assume you are dumping the controltemplate, it gets the current control template which is system defined theme. as in presentation. aero or something like that). However, if you want to specify the colors that the system will use when changes change them this way in your template:
Color="{DynamicResource {x:Static SystemColors.XXXX}"
This will use the system colors to style the control and will update to reflect changes to the system theme.
source to share
Add a simple control style to your window in Blend. This will add SimpleStyles.xaml including one for the tab control.
Take a look at Family.Show and how they perform black and silver themes.
Between the two, you should have a good example of how to customize your tab control and handle different themes.
source to share