Thursday, May 22, 2025

Improve .NET MAUI's AppThemeBinding?

 The AppThemeBinding in .NET MAUI is great. But wouldn't it be better if it required a lot less text?

<Label Text="default way (verbose)" TextColor="{AppThemeBinding Light={StaticResource Primary},Dark={StaticResource White}}" />  <Label Text="my way (shorter)" TextColor="{lightDark:Primary_White}" />

I'm a massive fan of code that is clear, expressive, and as short as possible without obscuring any important details.

The default syntax in the top AppThemeBinding example above is indicative of what you'd expect from regular XAML use. It does everything you need, the names are clear, and anyone familiar with XAML will not struggle to read it.

But, I look at it and think:

  • That's a lot of text
  • Why the repetition?
  • Why are so many braces needed? (I know why but wish they weren't.)
  • Can't there be a better, simpler way of telling both the compiler/framework and any developer looking at the code in the future what I want to happen?


As you can see from the picture above, I have a better way, and you can see an example of it there.


Of course, I don't have all possible color combinations pre-defined. I used a Source Generator to create what I wanted by including this attribute somewhere in my code.

[AppThemeColorResource(AppColors.Primary, AppColors.White)]

This example also uses my RapidXaml.CodeGen.Maui library to generate constants for the names of the color resources defined in the Resource Dictionary. I could use hard-coded strings for the names, but that risks other possible maintainability issues.


I also have other variants of the attribute, so I can also do things like this:

[AppThemeNamedColor(nameof(Colors.Aqua), nameof(Colors.HotPink))]

[AppThemeHexColor("#FF00FF", "#8B0057", "PinkOrPurple")]

[AppThemeNamedBrush(AppBrushes.SecondaryBrush, AppBrushes.Gray200Brush)]


Each generates a MarkupExtension that can be used in place of an AppThemeBinding and is named based on the names of the provided brushes or a specifically provided name. (As in the AppThemeHexColor example above.)



The above example uses 'lightDark' as the xmlns alias. I tried various naming styles and conventions for the alias and the generated MarkupExtension but currently prefer this best. I think it communicates the maximum amount of helpful information with the least amount of text.

Examples of other things I've experimented with include:
{ifLight:WhiteElseBlack}
{color:PrimayIfLight_PrimaryDarkIfDark}
{if:LightUseFF0000_DarkUseDD3333}
{appThemeBrush:Green_ifLightElse_DarkGreen}

What would you use?


If you see something like the above, you might be tempted to think, "Yes, it's shorter and easier to read, but what's the downside? I bet it's slower."

If you've never measured how long it actually takes to load different XAML content, that is a reasonable assumption.

Previously, I would have thought the same too. However, I recently built a test harness that makes it easy to measure how long it takes to load different XAML files, and the results shocked me.

I created two pages. Each contains 100 Labels (in a VerticalStackLayout). In one page, each label uses the AppThemeBinding as shown above. The other page uses my syntax. 

In a quick test, loading each page multiple times and in a variety of scenarios, the version of the page that used my syntax loaded 25% faster!


So, my version:

  • is shorter
  • is easier to read/understand
  • has exactly the same functionality
  • and is faster!!!


Now, tell me why you wouldn't want to do this?



NOTE: If you're looking to hire someone to help you build apps with .NET MAUI and you appreciate code that is easy to read, understand, and maintain. Get in touch as I'm looking for work.



0 comments:

Post a Comment

I get a lot of comment spam :( - moderation may take a while.