VisualState does not obey style hierarchy rules

[lendres]

Description

When using VisualStates they do not appear to obey the rules of style hierarchies. Styles defined at the page level do not seem to correctly override styles defined at the app level.

Steps to Reproduce

1. Clone and compile the repository specified below (use the main branch).
2. Note that there are Label and Picker styles defined in the Styles.xaml document as well as at the top of the MainPage.
3. Run the app and note the appearance of the controls. The styles in the MainPage do not seem to override those defined in the Styles.xaml for the VisualStates. If correct, the text should be red. The styles that are directly assigned using x:Key function as expected.
   
4. Toggle the Switch to enable the controls. Note that style properties set without the use of VisualStates do override those in the Styles.xaml document (all the text is green).
   

Based on the documentation, I would expect styles defined at the page level to override those at the app level. I would expect that for the visual states as well and the result would be both sets of controls (Override and Assigned) to function the same.

Link to public reproduction project repository

https://github.com/lendres/MauiPickerVisualStates

Version with bug

9.0.50 SR5

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

No response

Affected platforms

Windows

Affected platform versions

Windows 10.0.19041.0

Did you find any workaround?

The styles can be explicitly set using the Style or StyleClass attributes.

Relevant log output

[mattleibow]

Are you able to test a control like Button to see if Picker has an issue, or if the styles are broken.

[lendres]

The example includes both a Label and a Picker. Both exhibit the same behavior. I don't understand how adding a third control would help to clarify? The example repository also includes 2 ways of applying the same styles. One works, one does not. I think if you try the example repository, it will be clear.

[LogishaSelvarajSF4525]

This issue has been verified in Visual Studio 17.14.0 Preview 2.0 (versions 9.0.50, 9.0.0, & 8.0.100). It can be reproduced on the Windows, Android, iOS and MacCatalyst platforms.

[lendres]

I've noticed an additional issue. Given the following conditions:

• The IsEnabled is bound to another control's state (as opposed to being bound to a ViewModel). E.g., a Switch's IsToggled.
• The IsToggled is set to true on startup, like in the constructor.

In these cases, it seems like the visual states are not initially triggered. See the control-binding-default-is-enabled branch of the repository. That version uses EnabledSwitch.IsToggled = true; in the constructor of the Mainpage to set the Switch to on.

1. At startup, you see:
   
2. Toggle the switch to off gives:
   
3. Toggle the switch back to on gives the expected on result:
   

I have not filed a separate issue on this because I have suspicions it is related to this issue. The controls that have the style explicitly set exhibit the expected behavior and the controls that use the hierarchy inheritance do not.

Interestingly, if the controls are bound to a ViewModel (instead of another control), they work as expected. Perhaps because of differences in the timing of the binding?