Maui uses Masa blazor component library

Last one (

Click here to read

) We did UI stay Web End (Blazor Server/Wasm) And the client (Windows/macOS/Android/iOS) share , I add  

Masa Blazor

Reference to component library , And put the last few months to write

Timestamp conversion

Tools plus .

1.  Pre knowledge

About Masa Blazor Please click on

Masa Blazor Official website

understand ：

MASA Blazor

be based on Material Design and BlazorComponent Provides a standard base component library . Provide such as layout 、 Bullet frame standard 、Loading、 Preset components for standard scenarios such as global exception handling .

2.  Reference to component library

Add reference of component library

Masa Official website

, Write it here

Dotnet9 backstage

Add records ：

2.1 UI Modification of shared library -

Dotnet9.WebApp

• UI Shared library  
  Dotnet9.WebApp
    add to
  Maas.Blazor
  package , Just today （21 Number ）Masa Released
  0.5.0-preview.3
  edition , We download and use ：

Install-Package Masa.Blazor -Version 0.5.0-preview.3


• encapsulation
  Maas.Blazor
  Component references

Add files

./MasaExtensions/MasaSetup.cs

, The code is as follows ：

using Microsoft.Extensions.DependencyInjection;

namespace Dotnet9.WebApp.MasaExtensions;

public static class MasaSetup
{
    public static void AddMasaSetup(this IServiceCollection services)
    {
        if (services == null) throw new ArgumentNullException(nameof(services));

        services.AddMasaBlazor();   //  This key code
    }
}


There is only one line of critical code

services.AddMasaBlazor();

, The extension class is added for function extension , For the convenience of other projects ...

• _Imports.razor
    introduce
  Masa.Blazor
  Namespace

@using Masa.Blazor


Is this 3 Step by step  

Dotnet9.WebApp

Modification of .

2.2  Cross platform project modification -Dotnet9.MAUI

• modify
  MauiProgram.cs
  file , Add the extension method encapsulated above
  AddMasaSetup()
  :

using Dotnet9.WebApp.MasaExtensions;    //  The first 1 It's about ： Add this namespace

namespace Dotnet9.MAUI;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.UseMauiApp<App>()
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.ConfigureFonts(fonts&nbsp;=>&nbsp;{&nbsp;fonts.AddFont(&quot;OpenSans-Regular.ttf&quot;,&nbsp;&quot;OpenSansRegular&quot;);&nbsp;});

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;builder.Services.AddMauiBlazorWebView();
#if&nbsp;DEBUG
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;builder.Services.AddBlazorWebViewDeveloperTools();
#endif
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;builder.Services.AddMasaSetup();&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp; The first 2 Outside ： Add an extension method to introduce Masa&nbsp;Blazor

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;builder.Build();
&nbsp;&nbsp;&nbsp;&nbsp;}
}


• add to
  Masa.Blazor
  Resource file

modify

wwwwroot/index.html

file , Add the following styles （ Direct copy  

Masa.Blazor

 

Blazor WebAssembly

Resource files used ）

<link&nbsp;href=&quot;_content/Masa.Blazor/css/masa-blazor.css&quot;&nbsp;rel=&quot;stylesheet&quot;&nbsp;/>
<link&nbsp;href=&quot;_content/Masa.Blazor/css/masa-extend-blazor.css&quot;&nbsp;rel=&quot;stylesheet&quot;&nbsp;/>

<link&nbsp;href=&quot;https://cdn.masastack.com/npm/@mdi/[email protected]/css/materialdesignicons.min.css&quot;&nbsp;rel=&quot;stylesheet&quot;>
<link&nbsp;href=&quot;https://cdn.masastack.com/npm/materialicons/materialicons.css&quot;&nbsp;rel=&quot;stylesheet&quot;>
<link&nbsp;href=&quot;https://cdn.masastack.com/npm/fontawesome/v5.0.13/css/all.css&quot;&nbsp;rel=&quot;stylesheet&quot;>

<script&nbsp;src=&quot;_content/BlazorComponent/js/blazor-component.js&quot;></script>


2.3 Blazor WebAssembly Project modification -Dotnet9.Wasm

• modify
  Program.cs
  file , Add the extension method encapsulated above
  AddMasaSetup()
  :

using Dotnet9.WebApp;
using Dotnet9.WebApp.MasaExtensions;        //  The first 1 It's about ： Add this namespace
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<Main>(&quot;#app&quot;);
builder.RootComponents.Add<HeadOutlet>(&quot;head::after&quot;);

builder.Services.AddMasaSetup();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp; The first 2 Outside ： Add an extension method to introduce Masa&nbsp;Blazor
builder.Services.AddScoped(sp&nbsp;=>&nbsp;new&nbsp;HttpClient&nbsp;{&nbsp;BaseAddress&nbsp;=&nbsp;new&nbsp;Uri(builder.HostEnvironment.BaseAddress)&nbsp;});

await&nbsp;builder.Build().RunAsync();


• add to
  Masa.Blazor
  Resource file

Same as

Dotnet9.MAUI

2.4 Blazor Server Project modification -Dotnet9.Server

• modify
  Program.cs
  file , Add the extension method encapsulated above
  AddMasaSetup()
  :

using Dotnet9.WebApp.MasaExtensions;        //  The first 1 It's about ： Add this namespace

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddMasaSetup();            //  The first 2 Outside ： Add an extension method to introduce Masa Blazor

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();

app.UseStaticFiles();

app.UseRouting();

app.MapBlazorHub(); 
app.MapFallbackToPage("/_Host");

app.Run();


• add to
  Masa.Blazor
  Resource file

modify

Pages/_Layout.cshtml

file , Add the following styles （ Copy  

Masa.Blazor

 

Blazor Server

Resource files used ）

<!--&nbsp;masa&nbsp;blazor&nbsp;css&nbsp;style&nbsp;-->
<link&nbsp;href=&quot;_content/Masa.Blazor/css/masa-blazor.css&quot;&nbsp;rel=&quot;stylesheet&quot;&nbsp;/>
<link&nbsp;href=&quot;_content/Masa.Blazor/css/masa-extend-blazor.css&quot;&nbsp;rel=&quot;stylesheet&quot;&nbsp;/>

<!--icon&nbsp;file,import&nbsp;need&nbsp;to&nbsp;use-->
<link&nbsp;href=&quot;https://cdn.masastack.com/npm/@(&quot;@mdi&quot;)/[email protected]/css/materialdesignicons.min.css&quot;&nbsp;rel=&quot;stylesheet&quot;>
<link&nbsp;href=&quot;https://cdn.masastack.com/npm/materialicons/materialicons.css&quot;&nbsp;rel=&quot;stylesheet&quot;>
<link&nbsp;href=&quot;https://cdn.masastack.com/npm/fontawesome/v5.0.13/css/all.css&quot;&nbsp;rel=&quot;stylesheet&quot;>

<!--js(should&nbsp;lay&nbsp;the&nbsp;end&nbsp;of&nbsp;file)-->
<script&nbsp;src=&quot;_content/BlazorComponent/js/blazor-component.js&quot;></script>


Be careful

：MAUI Blazor and Blazor WebAssembly Two projects are introduced Masa Blazor The code of the resource file is the same ,Blazor Server The main difference from the former two is

materialdesignicons.min.css

file ：

Here's about

Masa.Blazor

The introduction of , Summarize the three key steps ：

• add to
  Masa.Blazor
   Nuget package ：
  Install-Package Masa.Blazor
  ;

• Masa.Blazor
  Component registration use ：
  services.AddMasaBlazor();
  ;

• add to
  Masa.Blazor
  Resource file ：Wasm yes
  wwwwroot/index.html
  , blazor server yes
  _Layout.cshtml
  , Note the difference between adding resource files .

3.  Add timestamp function

Doing it Blazor Server Version web site , There was an introduction to the development of timestamp function (

Click here to read

), The code is simple , I won't go into details here , No more water ....

4.  summary

Masa.Blazor

The component library has been added , And the timestamp function is restored , next step , Is to continue to build the website background , Use

Masa.Blazor

Build a framework .

• this paper Blazor Server Site Preview ：https://server.dotnet9.com/

• this paper Blazor Wasm Site Preview ：https://wasm.dotnet9.com/

• MAUI(Android\Windows\macOS\iOS) preview ：https://github.com/dotnet9/Dotnet9/tree/develop/src/Dotnet9.MAUI（ No release document is made , You need to compile the source code yourself ）