TabView: Add theme resource to style the tab separator more easily

[Felix-Dev]

Description

This PR introduces a theme resource for the TabView's Separator margin to enable easier styling.

Motivation and Context

Closes #2344

How Has This Been Tested?

Tested visually

Additional Note

The theme resource to set the foreground color of the separator is currently named TabViewItemSeparator. To follow naming precedences with theme resources and to properly articulate which property of the separator this theme resource controls I propose to rename it to TabViewItemSeparatorForeground. While this would be a breaking change I think it's worth it for the reasons state directly above. If approved, I could either do it in this PR or create a new one.

[StephenLPeters]

[StephenLPeters]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).

[StephenLPeters]

As for your additional note I think you are right this seems wrong. However I don't think we should introduce a breaking change over this. Instead I think we should introduce a second resource (TabViewItemSeparatorForeground) that points to the original. Or possibly the other way around, the original points to the new.

[Felix-Dev]

@StephenLPeters

I believe you meant something like this:

<StaticResource x:Key="TabViewItemSeparator"                ResourceKey="SystemControlForegroundBaseLowBrush" />
<StaticResource x:Key="TabViewItemSeparatorForeground"      ResourceKey="TabViewItemSeparator" />

I could have also picked the other way around but I want to use the correctly named theme resource in TabView.xaml which is TabViewItemSeparatorForeground so I had that pointed to the original theme resource.

Unfortunately though, this does not seem to work as intended though, as code using the previous TabViewItemSeparator theme resource to set the separator foreground color now longer appears to work. Given the following XAML

<TabView>
    <TabView.Resources>
        <SolidColorBrush x:Key="TabViewItemSeparator" Color="Yellow" />
    </TabView.Resources>
</TabView>

the actual resulting look is this:

yet the expected look is this:

So, as you can see, it appears that this will still cause a breaking change as styling the TabView's separator in XAML markup like the one above using the original TabViewItemSeparator theme resource now no longer works. (And yes, using TabViewItemSeparatorForeground in the XAML markup above instead works as expected.)

Thoughts on how to proceed here then?

[StephenLPeters]

This is because the system starts looking for a resouce at the resource dictionary where the request is located. So in this case the tab view template is looking for TabViewItemSeparatorForeground and doesn't find it until is goes up the tree and eventually reaches the App.xaml where the controls library's theme resources get merged in. When resolving that resource we start a new search for TabViewItemSeparator but that search starts at App.xaml instead of at the tab view and thus we never see this override.

So I think in order to get this to work you would need to have picked the other way around. This has the unfortunate side effect that the template has to have the poorly named resource though.

[Felix-Dev]

@StephenLPeters Unfortunately, it seems the other way around doesn't work as well:

<StaticResource x:Key="TabViewItemSeparator"                ResourceKey="TabViewItemSeparatorForeground" />
<StaticResource x:Key="TabViewItemSeparatorForeground"      ResourceKey="SystemControlForegroundBaseLowBrush" />

Now overriding TabViewItemSeparator changes the separator foreground color, but overriding TabViewItemSeparatorForeground does not any longer.

Did I do something wrong here? I would have thought your explanation why I didn't work the other way around would also apply here...so perhaps I misunderstood you 🤔

[mdtauk]

There is usually a Brush and Color separation, is that needed here?

[StephenLPeters]

@StephenLPeters Unfortunately, it seems the other way around doesn't work as well:

<StaticResource x:Key="TabViewItemSeparator"                ResourceKey="TabViewItemSeparatorForeground" />
<StaticResource x:Key="TabViewItemSeparatorForeground"      ResourceKey="SystemControlForegroundBaseLowBrush" />

Now overriding TabViewItemSeparator changes the separator foreground color, but overriding TabViewItemSeparatorForeground does not any longer.

Did I do something wrong here? I would have thought your explanation why I didn't work the other way around would also apply here...so perhaps I misunderstood you 🤔

Ah you are right, same problem this way.. I feel like there is a way to do this but I'm having trouble figuring it out. I don't think we should block this PR on this though, would you like to open a new issue on this?

[Felix-Dev]

@StephenLPeters Opened a new issue to track this here: #2742