受欢迎的博客标签

“.NET MAUI App” vs “.NET MAUI Blazor App”?

Published

.NET MAUI replaces Xamarin, is a name for a new upgrade solution as a Multi-platform App UI framework for building native cross-platform apps with .NET for Android, iOS, macOS, and Windows.

.NET MAUI provides a single framework for building the UIs for mobile and desktop apps.

.NET Multi-platform App UI (MAUI) is a cross-platform framework for creating native mobile and desktop apps with C# and XAML. Using MAUI, you can develop apps that can run on Android, iOS, macOS, and Windows from a single shared code-base.

.NET MAUI is open-source and is the evolution of Xamarin.Forms, extended from mobile to desktop scenarios, with UI controls rebuilt from the ground up for performance and extensibility. If you’ve previously used Xamarin.Forms to build cross-platform user interfaces, you’ll notice many similarities with .NET MAUI. However, there are also some differences. Using .NET MAUI, you can create multi-platform apps using a single project, but you can add platform-specific source code and resources if necessary. One of the key aims of .NET MAUI is to enable you to implement as much of your app logic and UI layout as possible in a single code-base.

.NET MAUI Reaches General Availability, Replacing Xamarin.Forms(2022.05.22)

Blazor with Maui, WinUI with Webview2 , Electron with Blazor

NET MAUI App runs on XAML 

.NET MAUI Blazor App  on runs on XAML,Through a BlazorWebView component call blazor.

.NET MAUI  App

 

 

 

How MAUI works


First, MAUI unifies Android, iOS, macOS, and Windows APIs into a single API that allows a write-once run-anywhere developer experience, while additionally providing deep access to every aspect of each native platform.

So, .NET6 provides a series of platform-specific frameworks for creating apps for Android, iOS, macOS, and Windows UI (WinUI) Library.

These frameworks all have access to the same .NET 6 Base Class Library (BCL). This library abstracts the details of the underlying platform away from your code. The BCL depends on the .NET runtime to provide the execution environment for your code. For Android, iOS, and macOS, the environment is implemented by Mono, an implementation of the .NET runtime. On Windows, WinRT performs the same role, except it’s optimized for the Windows platform.

While the BCL enables apps running on different platforms to share common business logic, the various platforms have different ways of defining the user interface for an app, and they provide varying models for specifying how the elements of a user interface communicate and interoperate. You can craft the UI for each platform separately using the appropriate platform-specific framework (.NET for Android, one for iOS, one for macOS, or WinUI), but this approach then requires you to maintain a code-base for each individual family of devices.

 .NET toolchain (SDK) and base class library (BCL)

NET MAUI uses native UI via app toolkits provided by each platform, and the dev team ships workloads to create applications that exclusively target Android, Android Wear, CarPlay, iOS, macOS, and tvOS directly using the native toolkits from .NET, and the supporting libraries AndroidX, Facebook, Firebase, Google Play Services and SkiaSharp

Windows 上的 .NET MAUI

.NET MAUI on Windows is based on WinUI 3.

由 WinUI 3 提供支持,WinUI 3 是 Windows 应用 SDK 附带的原生 UI 组件。

1.NET MAUI

Multi-platform App UI, a framework to develop  cross-platform, native mobile and desktop applications for Android, iOS, macOS (via Mac Catalyst), and Windows from a single codebase.

1.1 .NET MAUI API

.NET MAUI unifies Android, iOS, macOS, and Windows APIs into a single API .

.NET MAUI provides a set of technologies that enable apps to run on Web, desktop, and mobile.

.NET 6 provides a series of platform-specific frameworks for creating apps: .NET for Android, .NET for iOS, .NET for macOS, and Windows UI (WinUI) Library.

These frameworks all have access to the same .NET 6 Base Class Library (BCL). 

.NET MAUI 提供了简单的 API 来访问每个平台的服务和功能,例如加速计、应用操作、文件系统、通知等。

1.2 BlazorWebView component

In addition to native UI frameworks, .NET MAUI also introduces the BlazorWebView. Through a BlazorWebView component, MAUI apps can use the Blazor Web framework creating a .NET MAUI Blazor application.

.NET MAUI features the BlazorWebView control, which permits rendering Razor components into an embedded Web View. By using .NET MAUI and Blazor together.

.Net 8.x

Host a Blazor web app in a .NET MAUI app using BlazorWebView.

https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/blazorwebview?view=net-maui-8.0

2 .NET MAUI app

In a .NET MAUI app, you write code that primarily interacts with the .NET MAUI API,  .NET MAUI then directly consumes the native platform APIs.

[1] Android apps built using .NET MAUI compile from C# into intermediate language (IL), which is then just-in-time (JIT) compiled to a native assembly when the app launches.
[2] iOS apps built using .NET MAUI are fully ahead-of-time (AOT) compiled from C# into native ARM assembly code.
[3] macOS apps built using .NET MAUI use Mac Catalyst, a solution from Apple that brings your iOS app built with UIKit to the desktop and augments it with additional AppKit and platform APIs, as required.
[4] Windows apps built using .NET MAUI use Windows UI Library (WinUI) 3 and WinRT execution to create native apps that can target the Windows desktop and the Universal Windows Platform (UWP).

 

 

BlazorWebView

it’s implemented as a control, inherits from View, which is capable of processing Razor components during runtime and generating its equivalent HTML which will get rendered using the platform’s native Web engine without the involvement of any web server. This has the capability of running truly offline. And at the meantime, it can talk to a remote API and other Web services to bring in data and content for further processing.

In addition to native UI frameworks, MAUI also introduces the BlazorWebView. Through a BlazorWebView component, MAUI apps can use the Blazor Web framework creating a .NET MAUI Blazor application.

Blazor

a framework for full-stack web development with C# and Razor.

 

.NET MAUI Blazor App

Bringing Blazor to the Desktop

If you’re targeting web, we recommend Blazor for that, and then bringing those components to desktop and mobile with .NET MAUI and BlazorWebView.

.NET MAUI Options in Visual Studio 2022 17.3

.NET MAUI Blazor App  on runs on XAML,Through a BlazorWebView component call blazor.

step 1: create a  .NET MAUI app project

step 2:create a  Asp .net Core Blazor project

step 3:uses a BlazorWebView component that  within a .NET MAUI app

step 4:Through a BlazorWebView component, .NET MAUI app 

.NET MAUI Blazor app= .NET MAUI app + BlazorWebView control + call Blazor web

 

Running .NET MAUI Blazor App on the desktop, it looks like this:

you can embed  BlazorWebView controls as needed.And here is the MainPage.xaml with the embedded BlazorWebView:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:b="clr-namespace:Microsoft.AspNetCore.Components.WebView.Maui;assembly=Microsoft.AspNetCore.Components.WebView.Maui"
             xmlns:local="clr-namespace:MauiBlazorApp"
             x:Class="MauiBlazorApp.MainPage"
             BackgroundColor="{DynamicResource PageBackgroundColor}">

    <b:BlazorWebView HostPage="wwwroot/index.html">
        <b:BlazorWebView.RootComponents>
            <b:RootComponent Selector="app" ComponentType="{x:Type local:Main}" />
        </b:BlazorWebView.RootComponents>
    </b:BlazorWebView>

</ContentPage>

A breakdown of .NET MAUI Blazor project folders and files

File or Folder	Purpose
/Pages	Razor component-based pages or features that will be rendered within a WebView component.
/Platforms	Platform-specific files, including resources, configurations, native business logic, or native UI components.
/Resources	Global application resources and static files.
/Shared	Common Razor components and Layout components used in Blazor WebViews.
/wwwroot	Web resources used in Blazor Webviews. Ex: CSS, fonts, and images.
_imports.razor	Global Using statements for Razor components and Pages.
App.xaml(.cs)	The root-level application view.
Main.razor	The root-level Blazor view and router.
MainPage.xaml	The default view rendered by the root (App.xaml).
Startup.cs	Application entry point, bootstrapping, and configuration.
/Pages/Counter.razor	A sample component that counts button `click` events.
/Pages/FetchData.razor	A sample component that fetches and displays data.

 

WinUI with WebView2

run an Android app

running an Android app in a device

running an Android app emulator 

run a new MAUI application to the Windows Subsystem for Android.

use Windows Subsystem for Android to debug applications without any emulator! 

(https://www.puresourcecode.com/tools/windows/android-debugging-with-windows-subsystem/)

 

Bringing Blazor to the Desktop

Useful links

https://zhuanlan.zhihu.com/p/684480009

.Net MAUI Study resources

.NET MAUI  Current release (https://github.com/dotnet/maui/releases)

  May 23, 2022 - .NET MAUI GA( https://github.com/dotnet/maui/wiki/News)

 

.NET MAUI Learning Path (https://docs.microsoft.com/learn/paths/build-apps-with-dotnet-maui/?WT.mc_id=dotnet-67511-masoucou)

.NET MAUI website (https://dotnet.microsoft.com/apps/maui?WT.mc_id=dotnet-67511-masoucou)

Let's Learn .NET MAUI (https://docs.microsoft.com/en-us/dotnet/maui/what-is-maui)

.NET MAUI Samples (https://github.com/dotnet/maui-samples) Latest News Migrating to .NET

Maui Samples(https://github.com/drasticactions/DrasticMauiSamples)

https://github.com/dotnet/maui-samples/tree/main/8.0