Xamarin.forms: [Suggestion] Opinionated cross-platform theme

[weitzhandler]

Title

Create a theme or library, that when applied to an existing XF project, the app will be styled and rendered strictly the same on all platforms, using unified view sizes, docking, padding etc.

Rationale

Xamarin.Forms has been great for consumer apps. For LoB apps it's a hard time.
LoB apps', especially in-company apps, have a very strong bias towards productivity and layout of apps vs. their design and graphics which are 2nd level priority.

You often need adaptive screens that can run both on mobile and laptops or tablets, and on any platform.

With this in mind, it doesn't always make sense to have the UI render differently per platform given the screen sizes are equal (thus requiring you to fine-tune it specifically to each platform).
The important feature would be adaptivity and responsiveness, not 'native look and feel'.

Difficulty

Intermediate

Related: #2415.

[rogihee]

Please take a look at #2415 and #2452, I think that will cover your wishes.

[legistek]

I agree with this goal but I don't think it requires any changes to the core Xamarin Forms project. Using custom renderers you could accomplish this on your own. Just pick a theme - Material Design, Fluent, whatever - and run with it.

[weitzhandler]

@rogihee

Please take a look at #2415 and #2452, I think that will cover your wishes.

They're not. they are related but do something else. It was actually mentioned in my post.

---

@pmoorelegistek

Just pick a theme - Material Design, Fluent, whatever - and run with it.

Pick? from where? I'm asking for official embracement here.

[legistek]

Maybe I'm not sure what you're asking for exactly. Do you want MS to design a brand new uniform app look and feel and program it into the Xamarin Forms platforms? Why can't you do this on your own?

[weitzhandler]

I'm asking Xamarin to provide a theme or anything else, that makes a Xamarin.Forms app render equally on all platforms.

[MelbourneDeveloper]

I think you're missing the point of the Xamarin.Forms library. It's not intended to look exactly the same on all platforms. Silverlight was an attempt to create a graphics engine that has pixel for pixel graphics rendering on all supported platforms. It basically achieved that. Xamarin.Forms is a library that allows for native apps to be created for multiple platforms with their native look and feel, control behaviour, transitions, and so on. However, there are multiple projects underway including Avalonia (https://github.com/AvaloniaUI/Avalonia). WPF is also coming to .NET Core 3.0 and that may at some point in the future work on platforms other than Windows.

You should also check this out. It is an implementation of UWP's rendering engine on wasm:
http://platform.uno/

[Mike-E-angelo]

It's not intended to look exactly the same on all platforms

Indeed, it might have been intended as such, but what makes that the "right" way to render an application? I think the ask here is more of an improvement in this thinking/assumption.

I myself have always considered it a very short-sighted approach (not to mention _incredibly_ expensive). UX paradigms don't last very long. It seems like 5-6 years. Looking at a WinForms or WPF app, each look dated these days in their own respects. iOS/Droid have been in the lead for about that range of time now and are starting to look and feel a little stale in their own right.

Great UX is great UX. It doesn't need to be tied to a platform, look, or feel. The web demonstrates this plainly.

[weitzhandler]

@MelbourneDeveloper

I think you're missing the point of the Xamarin.Forms library.

Have you read my post? I know very well what native look and feel is. Native look and feel is not always ideal. For instance, in LoB apps, or other non-consumer productivity apps.
So I'm asking Xamarin to provide a means to turn a Xamarin app into an equally rendered app, not via graphics/drawing, but rather by theming etc.

---

@Mike-EEE

Great UX is great UX. It doesn't need to be tied to a platform, look, or feel. The web demonstrates this plainly.

Precisely! That's what I'm trying to convince the XF guys with.

[legistek]

Again I agree with the sentiment of having apps with common UX across all platforms. But there are multiple ways to achieve that.

Way 1 is to make custom renderers for each platform that render the controls with the look you want. You'd still be using the native platform's framework for the actual rendering but you could customize the look to your heart's content. And you could do this now without any changes to Xamarin Forms.

Way 2, which may be what is being suggested, would be to have totally loiokless controls and have all the rendering logic done in the cross platform layer. The individual platforms would merely provide a means of drawing primitives and receiving user input. This is what WPF does, wrapping Direct3D, and UWP does, wrapping DirectConposition.

For better or worse Xamarin Forms uses way 1. Other projects like Avalonia, use way 2. I suspect way 1 was employed with XF originally back in the day because doing all UI rendering in managed code on mobile devices might have been infeasible at the time. Not entirely sure though. Regardless, dependency on the native platform for control rendering seems pretty deeply embedded into XF, not merely philosophically but also architecturally. Asking them to move to a single renderer system at this point would I suspect be a non starter.

But way 1 is still perfectly viable and I'm not sure why someone who wanted a common UX for all platforms couldn't achieve this in a matter of weeks if not days.

[Mike-E-angelo]

I think you summarized that quite well @pmoorelegistek. 👍 Way 1 does seem like a lot of work, especially when you consider that what we are talking about is easily achievable in WPF by simply applying a theme.

It does make me wonder though, if XF acquires WebAssembly support, which platform will it render? 🤔 Will someone create a new look and feel altogether? Again I get back to theming, which may be another request here but would certainly provide value to XF development.

[weitzhandler]

@pmoorelegistek @Mike-EEE

Not quite. What I'm asking is for Xamarin to merely create a theme and perhaps some additional functionality that will be 'dressed' upon the current XF project, that will ensure all controls are styled and measured the same in all platforms.

[Mike-E-angelo]

Yeah I am with you @weitzhandler ... I am not so confident that we are going to get it, however. Sounds like the cement has settled already here. I would like to be pleasantly surprised, however. 🎉

[jassmith]

Im sorry I dont see how MaterialShell + DrawingSpec don't handle this?

MaterialShell (not Shell, MaterialShell) will use the Drawing spec to produce consistent cross-platform UI.

[jassmith]

@weitzhandler

Have you read my post? I know very well what native look and feel is. Native look and feel is not always ideal. For instance, in LoB apps for example, or other non-consumer productivity apps.
So I'm asking Xamarin to provide a means to turn a Xamarin app into an equally rendered app, not via graphics/drawing, but rather by theming etc.

Yes this is what MaterialShell does. Yes it does it by drawing, but of course it does, how else would we get the buttons to look the exact same everywhere. The idea is MaterialShell provides default templates which do the drawing and thus everything looks the same for all controls inside a MaterialShell (in particular they look Material Design).

[jassmith]

Please feel free to leave comments on those specs if you feel they dont address your concerns.

[weitzhandler]

In my earlier comment I said:

@rogihee
Please take a look at #2415 and #2452, I think that will cover your wishes.

They're not. they are related but do something else. It was actually mentioned in my post.

After reading your response @jassmith looks like I'm the one who misunderstood MaterialShell. Now that's truly amazing, and I'm so glad it's coming to Xamarin! For me, this is a clear game changer.
Native look and feel took too much of development time having to fine-tune all the controls to each platform.
I thought MaterialShell only provides outer navigation, and preset layout, and I'm so glad it also comes to target style. I'd encourage you to emphasize it in your post #2415, would be good to make a TL;DR section or title on top that summarizes its contents.
So thank you XF guys for the hard work, and sorry @rogihee for being harsh.

What it doesn't target tho, is adaptive design, see my other issue #2723.

[rogihee]

Good to hear @weitzhandler, I was also a bit confused by the word "Shell" myself, and what it meant precisely. No worries!

[Mike-E-angelo]

Wow, looks like I have been pleasantly surprised after all. 😆 👍

Nice work with all the passion, suggestions, and issues, @weitzhandler! I don't envy @jassmith's task to wrangle it all into a manageable, actionable subset but he's doing a fine job at that as well. 😄

[legistek]

Wow I didn't know about this either. Looks like a big step in the "lookless" direction. Very glad to see this!

[legistek]

@Mike-EEE
'It does make me wonder though, if XF acquires WebAssembly support, which platform will it render?"

Blazor I assume? I've been tempted to experiment with this when I can find some time. Should be attainable right now though and I'd be shocked if TPTB aren't quietly working on this.

[Mike-E-angelo]

Ah @pmoorelegistek by "platform" I meant "platform theme" sorry for the confusion there. It would indeed be rendered via WebAssembly, but what will it _look_ like? All platforms to date each have their own theme/look/feel as we have been discussing, but the web doesn't. So... how will it look? Sounds like there's a whole lot more in the works here so it's not something to worry about, IMO.

[legistek]

Ohh I see. Excellent question!

Material Design would be the place to start IMHO. It already has huge adoption on both mobile and web and even starting to on desktop.

[Mike-E-angelo]

Indeed @pmoorelegistek as I said, great UX is great UX. It has no boundaries and can neither be constrained nor contained. This is also how innovation carries forward, without imposed, perceived, or imagined limits.

[jassmith]

No chance you guys would want to help stand up material theme drawings once I got the vertical slice done?

[legistek]

@jassmith count me in!

[weitzhandler]

@legistek commented on [May 17]:(https://github.com/xamarin/Xamarin.Forms/issues/2721#issuecomment-389849444)
Blazor I assume?

I reckon Blazor wouldn't be the choice as it's not really a rendering engine.