DEV Community: Mohammad Hossein Rastegarinia

Develop .NET MAUI Apps Using VS Code Without Traditional IDEs

Mohammad Hossein Rastegarinia — Fri, 18 Oct 2024 19:44:20 +0000

.NET MAUI (Multi-platform App UI) is a powerful cross-platform framework by Microsoft, often used with full-featured IDEs. However, you can now build and debug .NET MAUI apps using VS Code alone! This guide provides a step-by-step approach to setting up your environment and developing .NET MAUI apps without relying on traditional IDEs.

Step 1: Install Required Tools

Download and Install .NET SDK
Get the latest .NET SDK (version 8 or 9rc) from the .NET website.
Install Visual Studio Code
Download and install VS Code from here.
Install the .NET MAUI Extension for VS Code
Install the .NET MAUI extension from the VS Code marketplace. This extension also installs the C# Dev Kit and C# extensions for debugging and building .NET projects.

Step 2: Install .NET MAUI Templates and Workloads

Open a new terminal and write these to install Microsoft's .NET MAUI project templates

dotnet new install Microsoft.Maui.Templates

Write the following command to create a new .NET MAUI project:

dotnet new maui -n MyMauiApp

Run the following command to install the required workloads:

dotnet workload install maui

This ensures that your system is ready to build and run MAUI projects.

Step 3: Setup Android Development

Setting up Android development without full-featured IDEs can be tricky. Below are the steps to configure Android tools manually.

Install Microsoft OpenJDK 17
Download the latest version of Microsoft OpenJDK 17 here.
Install Android Dependencies
Use the following command to install the Android SDK and related dependencies:

dotnet build -t:InstallAndroidDependencies -f:net8.0-android -p:AndroidSdkDirectory="C:\Program Files (x86)\Android\android-sdk" -p:JavaSdkDirectory="C:\Program Files\Microsoft\jdk-17.0.16.8-hotspot\bin" -p:AcceptAndroidSDKLicenses=True

Configure the required environment variables:

setx ANDROID_HOME "C:\Program Files (x86)\Android\android-sdk"
setx JAVA_HOME "C:\Program Files\Microsoft\jdk-17.0.16.8-hotspot\bin"
setx PATH "%PATH%;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;%JAVA_HOME%\bin"
setx PATH "%PATH%;C:\Program Files (x86)\Android\android-sdk\cmdline-tools\11.0\bin"
setx PATH "%PATH%;C:\Program Files (x86)\Android\android-sdk\platform-tools"

Step 4: Install and Configure the Android Emulator

Check which system images are available:

sdkmanager --list | findstr /i system-images

Install a System Image For example install the Google Play system image for Android API 34:

sdkmanager "system-images;android-34;google_apis_playstore;x86_64"

Install the Android Emulator:

sdkmanager --install "emulator"

Add the emulator to your system PATH:

setx PATH "%PATH%;C:\Program Files (x86)\Android\android-sdk\emulator"

Create an Android virtual device, for example Pixel 6 Pro:

avdmanager create avd -n Pixel_6_Pro_API_34_Play -k "system-images;android-34;google_apis_playstore;x86_64" --device "pixel_6_pro"

Launch the Emulator:

emulator -avd Pixel_6_Pro_API_34_Play

Step 5: Delete an Emulator (Optional)

If you no longer need a virtual device, delete it with:

avdmanager delete avd -n Pixel_6_Pro_API_34_Play

A Note on iOS/macOS and Windows Development

iOS/macOS:
Developing for iOS/macOS requires macOS, as Apple’s tooling, such as Xcode and simulators, is only available on macOS. Once configured, you can deploy and debug your MAUI app to iOS devices or simulators directly from VS Code by setting up remote build hosts.
Windows (WinUI):
For Windows apps, ensure that you have the required Windows SDKs installed. Building and running MAUI apps on Windows is straightforward since the necessary tools are included with the .NET SDK.
For insuring about WindowsAppSDK install you can run this command:

dotnet add package Microsoft.WindowsAppSDK --version 1.5.2

Conclusion

Using VS Code to develop .NET MAUI apps offers a lightweight alternative to traditional IDEs. While configuring Android development can be tricky, following the steps outlined in this guide will set you up for success.

With your environment properly configured, you can build cross-platform apps targeting Android, iOS/macOS, and Windows all from the comfort of VS Code!

Happy coding! 🚀

Optimizing startup UX in .NET MAUI Blazor with a simple preloading 🚀

Mohammad Hossein Rastegarinia — Sat, 25 Nov 2023 17:56:47 +0000

Developing a .NET MAUI Blazor app involves optimizing various aspects for an enhanced user experience, and preloading is one of the key elements in this endeavor. Unlike preloading in websites, where you might preload carefully, focusing on specific assets in your main page can significantly improve performance without overwhelming the process.

In this context, leveraging the <head> tag in the index.html file allows for strategic preloading of essential resources, like images and fonts, which directly impact the initial visual and typographic aspects of the app. For instance:

<head>
    <link rel="preload" href="images/my-logo.svg" as="image">
    <link rel="preload" href="fonts/my-font.ttf" as="font">
</head>

This approach ensures that crucial visual elements, such as logos or key images, and necessary fonts, load swiftly when users access the main page, contributing to a smoother and more engaging user experience.

However, it's crucial to strike a balance between what's preloaded and what's dynamically loaded during runtime. Overloading the preload might bloat the initial loading time, defeating the purpose of optimization. Therefore, identifying and prioritizing critical assets that significantly impact the initial user interaction is key.

By implementing selective preloading strategies within the <head> tag, you can optimize resource loading, offering users a faster and more seamless experience without compromising on app functionality or speed.

Why is Blazor Hybrid's file input crashing on iOS?!

Mohammad Hossein Rastegarinia — Mon, 28 Aug 2023 13:59:31 +0000

On Android and WinUI input tag with type of file is working fine when trying to capture image/video with the camera, but on iOS doing weird stuff like crashing on a real device or showing a black screen when you want to upload an image or video from the camera! so no worries we're here to fix them all.

Crashing on opening camera

Why it's happening only on the Hybrid app?
Because unlike PWA or SPA, it's basically an actual app accessing all the native stuff + Web UI and the crashing is because you need to give it the right permissions just like a native app!
So go to YOURPROJECTNAME\Platforms\iOS\Info.plist and add these lines:

<key>NSCameraUsageDescription</key>
<string>This app uses camera for...</string>
<key>NSMicrophoneUsageDescription</key>
<string>This app uses microphone to record videos for...</string>

Camera view is black!

I don't know if this is on BlazorWebView or not but when you open the camera from an input tag it shows a black screen! so I read WKWebView's docs and found the AllowsInlineMediaPlayback property and we have to enable it in our BlazorWebView!
In your MainPage.xaml.cs add these lines:

BlazorWebViewHandler.BlazorWebViewMapper.AppendToMapping("CustomBlazorWebViewMapper", (handler, view) =>
{
#if IOS
    var configs = handler.PlatformView.Configuration;
    configs.AllowsInlineMediaPlayback = true;
#endif
});

So that was all you needed to fix the input tag on a Blazor Hybrid iOS app!
Luckily we've covered these in BitPlatform templates and more!

Happy coding ;D

Animate your .NET MAUI Windows app

Mohammad Hossein Rastegarinia — Fri, 26 May 2023 10:44:17 +0000

If you're new to Windows development with .NET MAUI, you may not be familiar with some of the native tricks available. However, developers experienced in UWP and WinUI have knowledge of these tricks! Currently, .NET MAUI uses WinUI for Windows development, and there are a lot of impressive animations in WinUI that we can incorporate into our .NET MAUI apps. Let's explore some of them.

Animate moving elements

One of the animations available is the RepositionThemeTransition, which works when an element moves, such as when you resize your window or when certain events occur in your C# code. You can also utilize Triggers and VisualStates in XAML to trigger this animation. I'm absolutely enamored by this animation, It's truly remarkable. You just need to have a responsive design to witness its magic.
To animate any layout by targeting a Panel, you can use the following XAML code snippet:

    <maui:MauiWinUIApplication.Resources>
        <Style TargetType="Panel">
            <Setter Property="ChildrenTransitions">
                <Setter.Value>
                    <TransitionCollection>
                        <RepositionThemeTransition />
                    </TransitionCollection>
                </Setter.Value>
            </Setter>
        </Style>
    </maui:MauiWinUIApplication.Resources>

You can also animate individual elements like Button by specifying the target type accordingly.

Changing Page Navigation Animation

If you wish to modify the default page animation in .NET MAUI for Windows, which is the SlideNavigationTransition, here's the code you need:

    <maui:MauiWinUIApplication.Resources>
        <Style TargetType="Page">
            <Setter Property="Transitions">
                <Setter.Value>
                    <TransitionCollection>
                        <EdgeUIThemeTransition Edge="Bottom" />
                    </TransitionCollection>
                </Setter.Value>
            </Setter>
        </Style>
    </maui:MauiWinUIApplication.Resources>

That's all there is to it! Just remember to include these code snippets in the Platforms/Windows/App.xaml file of your project. Additionally, I've created a sample repository where you can access the code here.
Also you can learn more about Windows animations from here.

I hope you find these animations useful and enjoy enhancing your .NET MAUI Windows app with delightful visual effects!

Entering into the Multiverse of Blazor with Bit Platform templates

Mohammad Hossein Rastegarinia — Sun, 26 Mar 2023 17:00:35 +0000

Looking for a solution to create both Web and App projects in a single shared codebase? Look no further than Bit Platform's templates!

Bit Platform's Boilerplate is a comprehensive solution that utilizes ASP.NET Core, Identity, Web API, and EF Core for the server-side, and Blazor for the client-side. With this powerful combination, you can build a wide variety of applications from a single codebase, including:

Blazor Modes

Blazor Server: Ideal for fast development and debugging
Blazor WebAssembly: Perfect for SPA and PWA (for production)
Blazor Hybrid: Provides Android, iOS, Mac Catalyst, Tizen, and WinUI apps with full access to platform native features using .NET MAUI!

Features

With pre-configured options for Android, iOS, macOS, Windows, and Linux apps, as well as PWA (for offline-capable web apps) and SPA with/without pre-rendering, Bit Platform's templates offer unparalleled flexibility and startup speed. These templates also utilize Bit Blazor UI components, which are fast, lightweight (less than 200KB), and perfect for building even complex applications like e-commerce sites.

Demos

Bit Platform has already developed and published several websites and apps using these templates, including:

Support

In addition to offering a convenient and streamlined development process, Bit Platform's Boilerplate also comes with excellent documentation and support. Their team of experts is always ready to answer questions and provide guidance, making it easy for developers of all levels to use their platform effectively.

Don't let the complexity of building web and app projects separately hold you back. Try Bit Platform's templates and start building your next project today!

You can also find more information about Bit Platform's Boilerplate at https://bitplatform.dev/templates and components at https://blazorui.bitplatform.dev/

Happy coding ;D

.NET MAUI Blazor - Best practices for Desktop UI

Mohammad Hossein Rastegarinia — Sat, 18 Feb 2023 17:49:13 +0000

.NET MAUI Blazor is an open-source framework that lets you create cross-platform apps with web UI components and C# code. It uses BlazorWebView to render Razor components on mobile and desktop. So, like the last article which mostly was for mobile, this time I’m going to show you some handy tips for Desktop UI.

Disable refresh with the `F5` key and zoom with the mouse wheel

In your MainPage.xaml use the Loaded event of the ContentPage tag to override BlazorWebView’s default settings like the code down below:

   public MainPage()
    {
        InitializeComponent();
        Loaded += ContentPage_Loaded;
    }

    private async void ContentPage_Loaded(object sender, EventArgs e)
    {
#if WINDOWS && RELEASE
        var webView2 = (blazorWebView.Handler.PlatformView as Microsoft.UI.Xaml.Controls.WebView2);
        await webView2.EnsureCoreWebView2Async();

        var settings = webView2.CoreWebView2.Settings;
        settings.IsZoomControlEnabled = false;
        settings.AreBrowserAcceleratorKeysEnabled = false;
#endif
    }

Disable context menu

By default Windows context menu is disabled but macOS is not, so we need to disable it with a little bit of JavaScript in your index.html file:

window.addEventListener('contextmenu', (event) => event.preventDefault());

Change Windows Titlebar colors

In the Platforms/Windows/App.xaml add these lines and change the colors to whatever you want.

<maui:MauiWinUIApplication
    x:Class="YouProject.Client.App.Platforms.Windows.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:maui="using:Microsoft.Maui">
    <maui:MauiWinUIApplication.Resources>
        <ResourceDictionary>
            <SolidColorBrush x:Key="WindowCaptionForeground">#512bdf</SolidColorBrush>
            <SolidColorBrush x:Key="WindowCaptionBackground">#ffffff</SolidColorBrush>
            <SolidColorBrush x:Key="WindowCaptionForegroundDisabled">#512bdf</SolidColorBrush>
            <SolidColorBrush x:Key="WindowCaptionBackgroundDisabled">#ffffff</SolidColorBrush>
        </ResourceDictionary>
    </maui:MauiWinUIApplication.Resources>
</maui:MauiWinUIApplication>

Learn more from Microsoft documentation.

Common HTML/CSS tricks

1. Disable dragging images and selecting texts
Well, I guess we all agree that not every image should be draggable also not every text should be selected so all you need to add these:

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

2. Have some tooltips
Remember tooltips in developing desktop apps? You can do it with the title attribute on any HTML element.
For example:

<button class="close-button" title="Close" @onclick="Close()"></button>

3. Change mouse cursor
For different elements and components the mouse cursor can be changed, here is an example of using the cursor property to change the cursor to a pointer when hovering over a div tag with the class of item:

.item {
    cursor: pointer;
}

4. Add some active and hover effects
By default in some of the Native controls there are some hover and active(click) effects that change the color, So we can do it on the web like this:

  .item {
       background-color: white;
    }

  .item:active {
       background-color: whitesmoke;
    }

  .item:hover {
       background-color: lightgray;
    }

Get window size

Sometimes you need to have the window size to do some calculations in your C# code so you can do it with JavaScript like this:

In your Razor component add these lines of code

public partial class YourComponent : ComponentBase
{
    public int WindowWidth { get; set; }
    private string _resizeEventListenerId = string.Empty;
    private DotNetObjectReference<YourComponent>? _dotnetObjectReference;

    [Inject] private IJSRuntime JSRuntime { get; set; } = default!;

    protected override async Task OnInitializedAsync()
    {
        _dotnetObjectReference = DotNetObjectReference.Create(this);
        await base.OnInitializedAsync();
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("UpdateWindowWidth", _dotnetObjectReference);
            await InitWindowWidthListener();
        }

        await base.OnAfterRenderAsync(firstRender);
    }

    [JSInvokable]
    public void UpdateWindowWidth(int windowWidth)
    {
        WindowWidth = windowWidth;
        StateHasChanged();
    }

    private async Task InitWindowWidthListener()
    {
        _resizeEventListenerId = Guid.NewGuid().ToString();
        await JSRuntime.InvokeVoidAsync("AddWindowWidthListener", _dotnetObjectReference, _resizeEventListenerId);
    }
}

And put these in a JavaScript file and add it in your index.html

let windowEventListeners = {};

function AddWindowWidthListener(objReference, id) {
    let eventListener = () => UpdateWindowWidth(objReference);
    window.addEventListener("resize", eventListener);
    windowEventListeners[id] = eventListener;
}

function RemoveWindowWidthListener(id) {
    window.removeEventListener("resize", windowEventListeners[id]);
    delete windowEventListeners[id];
}

function UpdateWindowWidth(objReference) {
    objReference.invokeMethodAsync("UpdateWindowWidth", window.innerWidth);
}

Well, I guess it would be better to have both Mobile and Desktop best practices in one project, So I updated the sample repo containing all of the code that we discussed. You can have it from here.

Happy coding ;D

.NET MAUI Blazor - Best practices for mobile UI

Mohammad Hossein Rastegarinia — Fri, 27 Jan 2023 20:15:33 +0000

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:

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

* {
    -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:

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

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:

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.
Also you can read about the second part of this article which is about Desktop UI from here.

Happy coding ;D

DEV Community: Mohammad Hossein Rastegarinia

Develop .NET MAUI Apps Using VS Code Without Traditional IDEs

Step 1: Install Required Tools

Step 2: Install .NET MAUI Templates and Workloads

Step 3: Setup Android Development

Step 4: Install and Configure the Android Emulator

Step 5: Delete an Emulator (Optional)

A Note on iOS/macOS and Windows Development

Conclusion

Optimizing startup UX in .NET MAUI Blazor with a simple preloading 🚀

Why is Blazor Hybrid's file input crashing on iOS?!

Crashing on opening camera

Camera view is black!

Animate your .NET MAUI Windows app

Animate moving elements

Changing Page Navigation Animation

Entering into the Multiverse of Blazor with Bit Platform templates

Blazor Modes

Features

Demos

Support

.NET MAUI Blazor - Best practices for Desktop UI

Disable refresh with the F5 key and zoom with the mouse wheel

Disable context menu

Change Windows Titlebar colors

Common HTML/CSS tricks

Get window size

.NET MAUI Blazor - Best practices for mobile UI

Disable selecting content and texts

Remove the default tapping effect

Handling Safe areas

Changing Android default colors

Annoying startup background

Annoying scroll animation

Disable refresh with the `F5` key and zoom with the mouse wheel