Style values are being applied too early

[mavispuford]

Description

Styles seem to be applied before Elements with x:Name values have been initialized by MAUI. This can cause a NullReferenceException and other undesired effects. This is a common use case for us (same control with multiple Styles, for example), and it causes our styling to be wrong (or instability if we aren't null checking).

See my public repo for screenshots

Steps to Reproduce

1. Clone my public repo
2. Launch the app
3. Notice that both of the top labels have different text (they should have the same value)

If starting from scratch:

• Create a custom control (Right click in project, Add -> New item... -> .NET MAUI ContentView) with:
  • A Label with an x:Name value
  • A Text bindable property which sets the Label's Text in the code behind (make sure you null check the Label)
• Put the above control in your main page
• Create a Style in Styles.xaml with a TargetType that matches your control, add a setter for the above Text bindable property and choose a unique string
• Make sure the Style has a Key
• Reference the Style's Key in your custom control
• Run the app and notice that the Style isn't properly applied (it attempts to, but the Label is null when it's referenced by its x:Name

Link to public reproduction project repository

https://github.com/mavispuford/MauiStyleValuesAppliedTooEarly

Version with bug

7.0 (current)

Last version that worked well

Unknown/Other

Affected platforms

iOS, Android, Windows, I was not able test on other platforms

Affected platform versions

Android 13, iOS 16.2, Windows 10.0.19044 Build 19044

Did you find any workaround?

Yes (it's not pretty) - See my public repo. I basically do some null checks/Task.Delay() calls in a Task.Run(), then I set the value. Another (untested) possible solution could be to do a Task.Run() (not awaited) after InitializeComponent() in the constructor, and set the control's Style value after a Task.Delay().

Relevant log output

No response

[drasticactions]

@StephaneDelcroix Is this work that #13818 would handle?

[StephaneDelcroix]

@drasticactions no

[StephaneDelcroix]

All is applied in the correct order. you should apply the Style on a fully build control, by doing <FancyControl Style={StaticResource FancyControlStyle1}/>, and not on one being currently build.

[mavispuford]

So if I understand you correctly, we shouldn't be specifying the style inside the xaml of the control itself, but outside on the page/parent control instead? Is that right?

[mavispuford]

@StephaneDelcroix I should note that this is functionality that was working in Xamarin Forms. We migrated our code to .NET MAUI, and now it's broken. You can see a possible workaround in my public repo, but it's pretty ugly so we'd rather not have to do that.

[StephaneDelcroix]

another workaround would be to apply the Style at the end of the XAML (as element value, not attribute on the top). it's still a workaround, you should probably stick to wha tI said earlier, apply Style on fully build controls

[XamlTest]

Verified this on Visual Studio Enterprise 17.7.0 Preview 2.0. Repro on Windows 11, Android 13.0-API33 and iOS 16.4 with below Project:
StyleValuesAppliedTooEarly.zip

[BrianEnee]

This is also an issue with CollectionViews on Android. If you add a x:Name to a collection view, headers and empty views appear off centred. The empty view will be all the way to the right and cut-off.

[StephaneDelcroix]

need to revisit this now that the SetterSpecificity branch was merged

[StephaneDelcroix]

I revisited this issue, and everything works as expected. you definitely should not apply the style to the control being build, that would not work in c# either.