DEV Community

Cover image for .NET MAUI Blazor - Best practices for mobile UI
MH Rastegari
MH Rastegari

Posted on • Updated on


.NET MAUI Blazor - Best practices for mobile UI

Both Blazor and .NET MAUI are great and Powerful frameworks. Using .NET MAUI, you can build fully native cross-platform apps and build web apps completely in C# with Blazor.
But when you combine them with the MAUI Blazor template, you need to know that it should feel like a mobile app, not a web page! So, in this article, I will show you some tips and tricks.

Disable selecting content and texts

There is no need to select all texts and contents in your app! So, you can disable it in your CSS with these properties:

user-select: none;
-webkit-user-select: none;
Enter fullscreen mode Exit fullscreen mode

Remove the default tapping effect

Mostly in mobile devices, when you tap on clickable elements like a tag, it shows some effects. In my experience, Android was showing an ugly blue color and in iOS was a gray one. So, give it your own beautiful effect using active selector in CSS and remove the default one with this CSS property:

-webkit-tap-highlight-color: transparent;
Enter fullscreen mode Exit fullscreen mode

Annoying scroll animation

Sometimes you don’t want your app (mostly iOS) to have animation when the scroll hits the end of it, so you can disable it with this CSS property:

overscroll-behavior: none;
Enter fullscreen mode Exit fullscreen mode

Handling Safe areas

Don’t worry it’s not Blazor or MAUI’s fault that your content is in the Status bar or Home bar. You can fix it in CSS like this:

@supports (-webkit-touch-callout: none) {
    body {
        padding-top: env(safe-area-inset-top);
        padding-right: env(safe-area-inset-right);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
Enter fullscreen mode Exit fullscreen mode

Changing Android default colors

For those who are not familiar with native stuff, you can change the accent color and status bar color of your Android app from YOURPROJECTNAME\Platforms\Android\Resources\values\colors.xml.

<?xml version="1.0" encoding="utf-8"?>
    <color name="colorPrimary">#512BD4</color>
    <color name="colorPrimaryDark">#2B0B98</color>
    <color name="colorAccent">#2B0B98</color>
Enter fullscreen mode Exit fullscreen mode

Annoying startup background

When you run your app, you see a “Loading…” text with a white background so let’s fix that!
For “Loading…” text you need to remove it from a div tag with app id in your index.html, then access the BlazorWebView’s handler in your MainPage.xaml.cs and change the default background color of the platforms that you need like this:

BlazorWebViewHandler.BlazorWebViewMapper.AppendToMapping("CustomBlazorWebViewMapper", (handler, view) =>
            //Workaround for WinUI splash screen
            if (AppInfo.Current.RequestedTheme == AppTheme.Dark)
                handler.PlatformView.DefaultBackgroundColor = Microsoft.UI.Colors.Black;

            handler.PlatformView.BackgroundColor = UIKit.UIColor.Clear;
            handler.PlatformView.Opaque = false;

Enter fullscreen mode Exit fullscreen mode

By the way, I already made a sample repo containing all of the code we discussed. You can have it from here.
Also you can read about the second part of this article which is about Desktop UI from here.

Happy coding ;D

Top comments (7)

amsmart profile image
Emmanuel Oluwagbemiga Adebiyi (Smart)

Great post!

Don't you think for the last one, we could just build the Splash Screen with HTML and CSS in the index.html file?

mhrastegari profile image
MH Rastegari

Yeah! I had this in my mind few days ago, but what about MAUI Splash Screen?
Can we remove it? or if we want it to be the same as MAUI how do we get the splash size? I mean you may know that MAUI Splash Screen has deferent sizes in each Android device and OS version.

msynk profile image
Saleh Yusefnejad

great job Mohammad jaan 👍

can't you do something about colorizing the code samples?

mhrastegari profile image
MH Rastegari • Edited

Done, Thanks for the suggestion dear Saleh! ❤️

rezajananfar profile image
Amirreza Jananfar

Wow! Such a fascinating article...

mhrastegari profile image
MH Rastegari

Thanks dear Amirreza ❤️

mrfarzam profile image
Info Comment hidden by post author - thread only accessible via permalink


Some comments have been hidden by the post's author - find out more

We are hiring! Do you want to be our Senior Platform Engineer? We're hiring for a Senior Platform Engineer and would love for you to apply.

Head here to learn more about who we're looking for.