[ Fluent ] Fix TabControl Style

[dipeshmsft]

Description

This is a subissue to track the progress of TabControl Style fix.

Here are the broad categories of tasks that need to be done for this:

1. Match resource usage in control styles with WinUI resources where possible
2. Add animations for controls where required to match WinUI.
3. Compare Fluent styles with Aero2 styles to match
   3.a. Properties like HorizontalAlignment, VerticalAlignment
   3.b. TemplateBinding comparison with Aero2 styles
4. Compare WPF Fluent styles with WinUI styles :
   4.a. Convert ControlTemplate Triggers to VisualStates ( to simplify animation's and bring parity with WinUI styles )
   4.b. Convert StaticResource's to DynamicResource for properties where customization is needed.
   4.c. Define resources for CornerRadius, Thickness, etc. for the controls where it is needed

Links of related open TabControl Issues

• Fluent2 TabItem MinWidth Is Too Large #9889

[andreaCosm]

As requested, copying note over from #10393

Thank you for your efforts, just found this ticket while trying to understand the new Fluent controls, having just switched to the newest version of WPF. I want single out that the tab control needs better states and contrast. There's no hover animation; the selection also doesn't seem update the color with selection either although I do see that working in the example. Are we supposed to use a specific background color with it?

                    <TabControl>
                        <TabItem Header="Audio">
                            <TextBlock Text="Audio Settings" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                        </TabItem>
                        <TabItem Header="Video">
                            <TextBlock Text="Video Settings" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                        </TabItem>
                    </TabControl>