TabViewItem should consume Foreground/Background properties

Describe the bug The TabViewtem currently ignores the Foreground and Background properties. While, for example, overriding theme resources such as TabViewItemHeaderBackground can be used to set the background color of tabs, developers rightfully expect to be able to use the aforementioned properties as well.

See for example the following XAML:

<muxc:TabView>
    <muxc:TabView.TabItems>
        <muxc:TabViewItem Header="Tab 1">
            <muxc:TabViewItem.IconSource>
                <muxc:SymbolIconSource Symbol="Home" />
            </muxc:TabViewItem.IconSource>
        </muxc:TabViewItem>
        <muxc:TabViewItem Header="Tab 2" Foreground="Orange" Background="Green">
            <muxc:TabViewItem.IconSource>
                <muxc:SymbolIconSource Symbol="Emoji" />
            </muxc:TabViewItem.IconSource>
        </muxc:TabViewItem>
    </muxc:TabView.TabItems>
</muxc:TabView>

The expected look would be:

but the actual look is this (neither Foreground nor Background value is respected):

Version Info

NuGet package version: Microsoft.UI.Xaml2.5.0-prerelease.200609001

Open Questions I based the Foreground property affecting both the icon and the Tab header on the fact that they are “content” to be set by the user and the precedence set by the MenuFlyoutItem and the NavigationViewItem:

<muxc:TabViewItem.ContextFlyout>
    <MenuFlyout>
        <MenuFlyoutItem Text="123" Foreground="Red" Icon="Accept"/>
    </MenuFlyout>   
</muxc:TabViewItem.ContextFlyout>

with the corresponding image:

And the NavigationViewItem XAML as follows:

<muxc:NavigationViewItem Content="Menu Item 1" Icon="Home" Foreground="Red">
    <muxc:NavigationViewItem.MenuItems>
        <muxc:NavigationViewItem Content="Menu Item 1.1" Icon="Emoji"/>
    </muxc:NavigationViewItem.MenuItems>
</muxc:NavigationViewItem>

with the resulting look:

I think it is worth thinking about creating a consistent foreground styling behavior here. The specific issue with the TabViewItem compared to the above two controls is that it has an explicit TabViewItemIconForeground theme resource to enable independent icon styling from the rest of the TabViewItem content (like the header). I would like to see some consistency here between all three controls so that either

• setting Foreground affects both Icon and Content/Header/Text in TabViewItem/MenuFlyoutItem/NavigationViewItem or
• we can set the Icon foreground value independently in all three cases (for example via theme resources) and the Foreground property would only affect the Content/Header/Text

Scenario 1 would mean that the specific TabViewItemIconForeground* theme resources would no longer be useful (to prevent a breaking change I would keep them in the resource dictionary with an added comment that they are no longer in use) whereas Scenario 2 should mean that both MenuFlyoutItem and NavigationViewItem will get specific MenuFlyoutItemIconForeground*/NavigationViewItemIconForeground* theme resources and the Foreground API will no longer effect their Icon foreground color.

[stmoy]

Thanks for the reminder - let me ping the team. The biggest question is related to “is this a breaking change, and if it is, should we hold off?” - it’s a philosophical question so it is taking longer than I’d hope 😅

[stmoy]

CC: @StephenLPeters

One idea that was floated was moving the unused brush to a separate resource dictionary (like “DeprecatedResources” or something) so that it’s still technically accessible while being in a place that clearly marks that it will be removed soon. This would be just another theme dictionary that gets merged in similar to TabViewThemeResources_RS1.xaml.

@Felix-Dev I think you’re good to move forward with a PR and we can discuss further there if there are more concerns.