.NET MAUI Blazor - Best practices for mobile UI
Tags: dotnet, mobile, webdev, css
Published: 2023-01-27 20:15:33

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: 

```scss
*:not(input) {
    user-select: none;
    -webkit-user-select: none;
}
```

## 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:

```scss
* {
    -webkit-tap-highlight-color: transparent;
}
```

## 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: 

```scss
@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);
    }
}
```

## 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
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#512BD4</color>
    <color name="colorPrimaryDark">#2B0B98</color>
    <color name="colorAccent">#2B0B98</color>
</resources>
```

## 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:

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

#if IOS || MACCATALYST
            handler.PlatformView.BackgroundColor = UIKit.UIColor.Clear;
            handler.PlatformView.Opaque = false;
#endif

#if ANDROID
            handler.PlatformView.SetBackgroundColor(Android.Graphics.Color.Transparent);
#endif
        });
```

## Annoying scroll animation

Sometimes you don’t want your app's body (mostly iOS) to have animation when the scroll hits the bottom or top of the page, so you can disable it in the `BlazorWebView` handler we talked about like this:

```csharp
BlazorWebViewHandler.BlazorWebViewMapper.AppendToMapping("CustomBlazorWebViewMapper", (handler, view) =>
        {
#if IOS || MACCATALYST
            handler.PlatformView.ScrollView.Bounces = false;
#endif

#if ANDROID
            handler.PlatformView.OverScrollMode = Android.Views.OverScrollMode.Never;
#endif
        });
```

By the way, I already made a sample repo containing all of the code we discussed. You can have it [from here](https://github.com/mhrastegari/MauiBlazorUIBestPractices). 
Also you can read about the second part of this article which is about Desktop UI [from here](https://dev.to/mhrastegari/net-maui-blazor-best-practices-for-desktop-ui-4peo).

Happy coding ;D