Will the UI elements look same on different platforms? #50
Replies: 57 comments 32 replies
-
Xamarin users mostly want identical UI. The ability to make breaking changes now would allow defaults for standard controls that appear as close as possible on different platforms. Taking a dependency on SkiaSharp would allow some controls to have a single renderer which would automatically display identically across platforms, and improve the maintainability of the XF repo. Image-related controls including Icons, Images, Shapes would be particularly good candidates. |
Beta Was this translation helpful? Give feedback.
-
I have the opposite view, I want a droid button to look like a droid button on droid devices, and an iOS button to look like an iOS button on iOS devices. Users prefer a native experience, and a native look and feel. |
Beta Was this translation helpful? Give feedback.
-
It sounds like the best solution would be to support both and the developer can choose |
Beta Was this translation helpful? Give feedback.
-
I would prefer they fix existing issues rather than split development efforts. I am all for MAUI, as long as they resolve the basic, fundamental problems that XF has. This is a good time to introduce breaking changes to course correct the platform. |
Beta Was this translation helpful? Give feedback.
-
Just for reference @JohnH-FF a lot of companies want their 'branding' be known everywhere, hence the same look and feel on each platform ( look at the Facebook app or other major brands ). So this is actually a high valued request to have easy same design parity on each platform. @Clancey showed his SKIA proposal yesterday during the MAUI overview Twitch stream, so if they decide to add it in the main repo, this would be awesome! |
Beta Was this translation helpful? Give feedback.
-
@Depechie Branding, absolutely. Icons, fonts, colours. Buttons though? What a user expects and what a company think they want are not always the same. |
Beta Was this translation helpful? Give feedback.
-
I like it when it keeps the native UI look. And if you want identical UI you can achieve it with Visual. Visual will probably be part of MAUI and it will be good if more visuals are added. But Visual is also a great way for third-parties to add "themes" to Xamarin.Forms/MAUI. |
Beta Was this translation helpful? Give feedback.
-
I realise this is descending into sharing anecdotes, but here is my experience:
As a developer paid to build apps for others, I'd have to lean towards consistent cross platform controls. |
Beta Was this translation helpful? Give feedback.
-
It looks like MAUI is bring back Templated Controls and raw visual elements. From WPF. I'm still browsing around but I saw a reference to Themes as well so best of both worlds...custom look and feel for those who want it. Platform specific themes who want that. |
Beta Was this translation helpful? Give feedback.
-
I hope to make a real-world case for the "identical ui on all platforms" view:
Historically we have lived in a divide of Apple vs Google vs Microsoft user loyalty, whereby individuals want all apps to follow the specific style of their preferred company. I feel the future lies not in greater divide, but in a focus on designing the best user experience as the designer imagined it, pixel-perfect down to the user's preferred physical device. |
Beta Was this translation helpful? Give feedback.
-
Maybe i'm missing something, but now i'm already able to get the same look and feel on ios and android just using styles (with or without material theme) & some platform effect. I like to have a general look and feel of the app wich is almost the same, then there are the "functional" details wich are specific to the platform: like the app bar if i choose the native one, the native dialogs & pickers. But thats fine because that are small functional parts that use the OS pradigms that users are used to. Btw with all the new things that are coming (appbar, tabview, path, shapes, shadows) the process to streamline the look and feel will be easier. Moreover, with the new acritecture it will be much easier to create and integrate custom control with skia! i'm sure that a lot of third party control will raise if the community will needs them :) |
Beta Was this translation helpful? Give feedback.
-
Don't read too much into that. So far MAUI is almost a complete copy of Xamarin Forms and That said I agree I would like to have the option of lookless/templated controls. |
Beta Was this translation helpful? Give feedback.
-
Coming from a WPF/Silverlight/UWP background, it would be very valuable to support WPF-like ControlTemplates along with content DataTemplates. Those mechanisms make it so easy to customize UI rendering. |
Beta Was this translation helpful? Give feedback.
-
I want to look at this discrimination from different angle. The root reason why business wants every page/control to look same is they are not aware of design guidelines for each platform and they think having 1 consistent UI will cost them a lot less than adjusting/supporting every visual element for different platforms. This is wrong and it is not Xamarin's or MAUI's job to fix. Coming from Xamarin and UWP background, I personally prefer to have native feel for each platform. However, I also expect that button I put on the view must be treated well by the framework (Xamarin or MAUI in this case) that I should not create extra margins, different renderer-like classes to support to fix this layout issues. I put it there, it is native, it's not identical between platforms but it is similar as highly it can get in terms of layout, it is not rendered by Skia, it has all the effects/shadows that native platform provides, it respects the OS version I am in and it does position itself well with other controls or UI containers I put into. This may seem a lot, but this is something I observe from the Xamarin's history. They tried to achieve this and came a long way. Thrust me, you were not able to just create a single basic page and make it perfectly layout in different platforms 4-5 years ago. Personally, their biggest mistake was to support both stupid business ideas and develop new features as the framework develops. They forced themselves too much behind this 'supporting business by making platform highly customizable in order to lower development effort' idea, that eventually made the platform lose in the competition. And this lose was caused by the nature of Xamarin Forms. This nature relies highly on the platform specific and nature feeling of controls. You can't deny this fact of the framework by saying "Here you go all the redundant stuff that is highly against our platform's core nature we wasted team effort on instead of strengthening our framework core that can be super efficient for the developers that know what they are doing". :) Other platforms that powered by graphics libraries are not good candidates for this approach. Because they intended to be "Same feeling on all platforms" approach. But Xamarin or MAUI is not, and should not because it is not an efficient way to support 'design and develop' approach. TLDR; the problem is not the framework itself, it is the business and no framework should change it's core for the sake of supporting stupid business ideas... |
Beta Was this translation helpful? Give feedback.
-
LOL. The essence of what's wrong with so many developers. You think the business and the users should adapt to you and not the other way around. Maybe you haven't noticed but the overwhelming majority of apps are WEB FIRST now and when they do have native versions they go out of their way to make the native version look and feel just like the web version. This is thanks to React Native and Ionic, etc., that allow you to use the same markup and code in every platform. That's why React Native and Ionic have been dominating while XF - not to mention any native app platform including Android/Java and iOS/Swift - have been falling behind HTML/Javascript. Businesses WANT uniformity for brand recognition, consistency, and user familiarity. You get the same experience from the application no matter what device you're on. That's what modern users expect. Point me to a major modern application that looks substantially different between web v. iOS v. Android v. Windows. Facebook? Netflix? Slack? Microsoft Office? Nope. nope, nope, and nope. Native mobile apps in general are becoming irrelevant now too. The only native platforms I actually care about are Windows and MacOS and I want my app to look identical between them. I'd like to be able to use the same codebase for web too but if I have to have a separate one, then I'll make it mobile friendly and publish it to iOS and Android as a PWA or use React Native. Users don't know or care about the difference between a native app and PWA. Bottom line is yes my "stupid business" requirements dictate a uniform experience and maximal sharing of designs and code across platforms. |
Beta Was this translation helpful? Give feedback.
-
Remove the word MAUI from your sentence and then yes! I want to clarify a bit that this isn't a Maui thing this is a by the end of the year as part of Forms thing. All of the features I'm talking about are on the XF roadmap https://github.com/xamarin/Xamarin.Forms/wiki/Feature-Roadmap We're still figuring out the best way to expose this idea out. Whether it should be through a Visual or adding ControlsTemplates to everything. Adding ControlTemplates to everything is a bit weird because then what about native controls? We have a spec here about ways we want to customize visuals A neat idea @jsuarezruiz had is that we could introduce a VisualTemplate that would be specific to the visual you specify. So users could possibly do something like this <Button>
<VisualTemplate>
<ButtonControlTemplate>
<grid><label></grid>
</ButtonControlTemplate>
</VisualTemplate>
</Button>
|
Beta Was this translation helpful? Give feedback.
-
@PureWeen The downside and bad part of the example at the bottom (in my opinion) is that users have to write alot more code. I personally think if there's a way to make controls just a single liner, that would make the process of developing apps ALOT faster, while also being streamlined. If you mean that the syntax is for making the actual Controls for the Visual= thing, then that could probably work yes, but for the users that just want to "Create Project" and then just start coding in XAML, they shouldn't have to type the above, simply to make controls look the same on each platform :) IMO :) |
Beta Was this translation helpful? Give feedback.
-
@kevinjpetersen right! All I'm articulating is how users would customize. Visual propagates through your entire hierarchy so you can set a Page to Page Visual="MakeItAllTheSamePlease" At which point all your controls will just use the visual setup for that which renderers the controls using xplat elements BUT I also want to emphasize this isn't something we're directly promising yet :-) If we're actually going to build all these controls. We'll start with appbar/tabview and then probably start building out from there. And then once we have the mechanisms for building these controls we'll take any PRs from people that want to create the symmetrical xplat controls. So the main thing I'm wanting to know from everyone. What are the limitations of these specs https://github.com/xamarin/Xamarin.Forms/wiki/Feature-Roadmap Where do they fall short of achieving the points brought up on this issue? |
Beta Was this translation helpful? Give feedback.
-
Agreed not everything would be derived from I'm not sure I see the value in a special template for each control? At minimum we would need to be able to make our own so the base for
This (xamarin/Xamarin.Forms#6452) is definitely a blocker right now because it prevents doing this "xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation". There are also issues with Finally input events, bubbling, and coordinate transformation, as well as matrix-based transformations and animations, need to be added in at the framework level so a spec is needed for that. I assume we want the platform to just do the bare compositing of primitives without necessarily having to be aware of the visual tree, and provide low level screen/mouse input events to the framework, letting the framework do the routing. Otherwise I think it's just a matter of writing the renderers for the primitives and settling on what they will be. All my contributions to the XF repo have really been with this eventual goal in mind so please I'm very willing and happy to help further to steer it this direction if that's where it's going. |
Beta Was this translation helpful? Give feedback.
-
I was assuming from the example that Furthermore I would assume/hope this could be incorporated into a Basically I just hope/want it to be cross-platform WPF. Ok? I proudly admit it. :D |
Beta Was this translation helpful? Give feedback.
-
Yes
Hehe.. I'm a really big fan of WPF control templates. Anytime I have to customize a control natively UWP is typically the least headache. I'm hoping we can bring a lot of that ease to the table with our current road map!! |
Beta Was this translation helpful? Give feedback.
-
There are a lot of useful informations in this thread, i love it :) |
Beta Was this translation helpful? Give feedback.
-
I must agree this was a major time sink to get our enterprise app to look the same on both IOS and Android. In our case, the clients want the same look and feel across the board. |
Beta Was this translation helpful? Give feedback.
-
I am a UWP developer, and therefore in the process of learning and converting my apps for Android, iOS, and probably at some point WinUI. While attempting to learn & use Xamarin one of my biggest frustrations has been a consistent UI (regardless of claims, shared code does not always look the same, so I felt like I was just writing 99% of the apps separately anyway). What I would like to see is markup that can detect the platform or use a specific one. For example, a button might have the following elements available: |
Beta Was this translation helpful? Give feedback.
-
I can't believe people are still discussing this. Having the exactly same ui on every platform is the reason why flutter is popular. Not having the same ui on all device is why XF is not popular. flutter is killing XF. If this new solution won't have same ui on every device, then flutter will kill this one too. This is the basic need of cross platform. If you offer different UI, then you are not fully cross platform. If this is still under discussion, then this solution is already halfway dead. |
Beta Was this translation helpful? Give feedback.
-
We want to allow both Native UI Elements, and Identical UI on all platforms. As well as a hybrid that is a mix of both. At the end of the day the developer should have the choice to choose how the toolkit looks and behaves. Even at the control level. |
Beta Was this translation helpful? Give feedback.
-
I have experienced Flutter for windows, and the experience is good. I wish MAUI is a thing just like C#/Xaml version of Flutter. Otherwise, I think I might give up using c# to develop UI. |
Beta Was this translation helpful? Give feedback.
-
I think that, the most interesting .NET MAUI's feature will became that developers can be choose if use Native's UI or Draw's UI component. With Native's components, thanks to Xamarin.Android and Xamarin.iOS, we have 100% or less (iOS Swift) native API, and access to native UI, for example new iOS 14 picker, immediately, and i thinks also at iOS Gestures, that are different from Android With Draw's component we have a more faster UI, Customized, and i thinks with less BUGS, why logic is written by Microsoft and not by Apple or Google, using Skia, but also native Graphics API.... So developers can choose if use Draw component or Native UI. |
Beta Was this translation helpful? Give feedback.
-
When we define the buttons, if we do not set style it, it will display by default in any operating system with the same default style. Now, if we want all styles in all operating systems to be the same style, use the following method: If we want to have a separate style for each control in each operating system, this way: And in Visual Studio in the design section be an option to show us the UI output in each operating system |
Beta Was this translation helpful? Give feedback.
-
Let's not forget there is already a unified UI called browser, which is available via BlazorWebView, if you are gonna build a custom styling process to draw abstract UI that's unified accross platform you are sabotaging the browser basically, although it would be impressive because instead of relying on the browser imagine you can use css for drawing your UI and it gets turned into native platform codes it must be good for performance, but if microsoft is not intending to kill the web by making MAUI into a browser that runs .NET instead of javascript, then what they are doing right now with [GraphicsControls] https://github.com/dotnet/GraphicsControls) is something far from doing unified custom UI |
Beta Was this translation helpful? Give feedback.
-
Does MAUI look different on different platforms, just like xamarin.forms?
I wish MAUI can keep the same UI on all platforms.
Beta Was this translation helpful? Give feedback.
All reactions