TabView is not following fluent design style in WinUI 3 when scaling is not 100% (WindowsAppSDK 1.0)

[harvinders]

Describe the bug

The TabView is not following the fluent design

Steps to reproduce the bug

Add a TabView with TabViewItem in WinUI 3 desktop app (WindowsAppSDK 1.0 preview 2)

Expected behavior

No response

Screenshots

NuGet package version

WinUI 3 - Windows App SDK 0.8: 0.8.0 (If you're seeing your issue in older previews of WinUI 3, please try this release)

Windows app type

• UWP
• Win32

Device form factor

Desktop

Windows version

October 2020 Update (19042)

Additional context

Please discard the nuget version above, the actual version is WindowsAppSDK 1.0 preview 2

[harvinders]

I could still see the issue in preview 3

[devlead]

Indeed noticed the same.

A lead might be that the control doesn't seem to be present in Themes so maybe that's the issue, noticed when looking at what controls are themed in NuGet package
https://nuget.info/packages/Microsoft.WindowsAppSDK/1.0.0-preview3

Looking at generic xaml then i.e. TabViewItemHeaderBackground, TabViewItemIconForeground etc. isn't present.

As a test I added this to my theme and now it more follows my theme

                    <!-- TabView -->
                    <SolidColorBrush x:Key="TabViewItemHeaderBackground" Color="{StaticResource SolidBackgroundFillColorBase}" />
                    <SolidColorBrush x:Key="TabViewItemIconForeground" Color="{StaticResource SystemBaseHighColor}" />
                    <SolidColorBrush x:Key="TabViewItemHeaderForeground" Color="{StaticResource SystemBaseHighColor}" />
                    <SolidColorBrush x:Key="TabViewItemHeaderForegroundPointerOver" Color="{StaticResource SystemBaseHighColor}" />
                    <SolidColorBrush x:Key="TabViewItemHeaderForegroundSelected" Color="{StaticResource SystemBaseHighColor}" />
                    <SolidColorBrush x:Key="TabViewItemHeaderBackgroundSelected" Color="{StaticResource SystemBaseHighColor}" Opacity="0.3" />
                    <SolidColorBrush x:Key="TabViewItemHeaderBackgroundPointerOver" Color="{StaticResource SystemBaseHighColor}" Opacity="0.2" />
                    <SolidColorBrush x:Key="TabViewItemHeaderBackgroundDisabled" Color="Transparent" />

Keys can i.e. be found here

microsoft-ui-xaml/dev/TabView/TabView.xaml

Line 342 in f4d71ea

<Style TargetType="local:TabViewItem">

[gabbybilka]

@MikeHillberg what is the status of this bug for 1.0 servicing?

@harvinders added a bit more context here: #6310 (comment)

[harvinders]

@StephenLPeters, Also, note the focus on tab item is also showing properly. On both edges you would see grey gradient.

[harvinders]

@gabbybilka, @StephenLPeters @ojhad The issue comes only when the Scaling is set to anything other 100%, which is most of the time as the screen resolution generally is high these days and OS sets the scaling to 125% or 150%.

The focus also works fine with 100% scaling

[gabbybilka]

Fixed as part of 1.1-preview2 🎉 (https://aka.ms/windowsappsdk/1.1/1.1.0-preview2/release-notes)

[dotMorten]

Ugh I wish I had seen this earlier. Drove me nuts for hours yesterday. Thanks for fixing. Will this be in 1.0.4 too?

[gabbybilka]

Ugh I wish I had seen this earlier. Drove me nuts for hours yesterday. Thanks for fixing. Will this be in 1.0.4 too?

@dotMorten It's currently targeting 1.1 stable and we're not planning on servicing it in 1.0.