在 MAUI 中使用 Masa Blazor

1. Masa Blazor 是什麼

在此之前我們已經介紹過什麼是 Masa Blazor，以及如何使用 Masa Blazor，如果還不了解 Masa Blazor 的同學可以看我上篇文章【初識 Masa Blazor】。那麼今天就帶大家探索一下如何在 MAUI 中使用 Masa Blazor，那麼我們先來了解一下什麼是 MAUI？

2. MAUI 是什麼

.NET MAUI 全稱為 .NET Multi-platform App UI ，顧名思義就是.NET 多平台應用程式 UI，是一個跨平台的框架，是 Xamarin.Forms 的演變，其使用C#和XAML建立原生行動和桌面應用程式，這裡的XAML可以替換成RazorView。使用 .NET MAUI，可以開發可在 Android、iOS、macOS 和 Windows、Linux（社群支援）從單一共享程式碼庫執行的應用程式，一套程式碼多端執行。

2.1 MAUI 優點：

從 XAML 和 C# 中的單一共享程式碼庫編寫跨平台 Visual Studio。
跨平台共享 UI 佈局和設計。
跨平台共享程式碼、測試和業務邏輯。
另一個優點是跨框架重複使用 Razor 元件，它可以實作為 Razor 類別庫 (RCL) 並與 Blazor Server 和 WebAssembly 共享。這允許最大限度地重複使用程式碼並從單一程式碼庫產生行動、桌面和 Web 解決方案。

今天我們重點在實作，就不介紹那麼多概念性的東西了。想了解更多關於 MAUI 的同學可以移步官方文件介紹什麼是 .NET MAUI？，本篇文章會帶大家使用MAUI+Masa Blazor做一個行動端常見的時間軸頁面，並加一點切換主題色的小功能，效果圖如下：

接下來讓我們一步步去實現它。首先我們先準備好必備的環境。

註：文章範例示範環境為（Maui 6.0.200-preview.14.5 + Masa.Blazor 0.3.0）

3. MAUI 環境準備

首先要確保安裝了最新版的 Visual Studio，並且安裝了Mobile development with .NET工作負載。

啟用硬體加速才能最大化 Android 模擬器效能，我們可以啟用Hyper-V或HAXM加速，這裡只介紹第一種

在 Windows 搜尋框中輸入「Windows 功能」，然後在搜尋結果中選擇「開啟或關閉 Windows 功能」。在「Windows 功能」對話方塊中，啟用「Hyper-V」和「Windows 虛擬機器監控平台」：

進行這些變更後，重新啟動電腦。

請確保在 Android Device Manager 中建立的虛擬裝置是 x86 64 或基於 x86 的系統映像。如果使用基於 Arm 的系統映像，則不會加速虛擬裝置，並且執行速度會緩慢。啟用 Hyper-v 後，可以執行加速 Android 模擬器。HAXM 加速和詳細設定可參考：如何使用 Android 模擬程式 & 啟用硬體加速

4. 建立 MAUI 應用程式並引入 Masa Blazor

建立專案選擇.NET MAUI Blazor App。這樣的話我們就能使用Blazor View來寫 UI 介面了

在 nuget 中安裝Masa.Blazor，並在MauiProgram.cs檔案中註冊相關服務

builder.Services.AddMasaBlazor();

CreateMauiApp()方法簡單理解：在啟動方法中，呼叫了RegisterBlazorMauiWebView()建構器物件的擴充方法，然後將 BlazorWebView 本身新增到具有該builder.Services屬性的 DI 容器的 Services 集合中。這將執行相依性插入載入特定於平台的檢視以呈現輸出 HTML，因為每個平台都有自己的 Web 引擎，BlazorWebView（從View繼承）控制項，它能夠在執行階段處理 Razor 元件並產生其等效的 HTML。該 HTML 將使用平台的原生 Web 引擎呈現，而無需任何 Web 伺服器的參與。

wwwroot/index.html 中引入樣式、字型、指令碼

<link href="_content/Masa.Blazor/css/masa-blazor.css" rel="stylesheet" />
<link href="_content/Masa.Blazor/css/masa-extend-blazor.css" rel="stylesheet" />
<link
  href="https://cdn.masastack.com/npm/@mdi/font@5.x/css/materialdesignicons.min.css"
  rel="stylesheet"
/>
<link
  href="https://cdn.masastack.com/npm/materialicons/materialicons.css"
  rel="stylesheet"
/>
<link
  href="https://cdn.masastack.com/npm/fontawesome/v5.0.13/css/all.css"
  rel="stylesheet"
/>

<script src="_content/BlazorComponent/js/blazor-component.js"></script>
<script src="https://cdn.masastack.com/npm/echarts/5.1.1/echarts.min.js"></script>
<!-- echarts指令碼檔案不需要可以不引入 -->

注意：

MAUI 專案中需要在index.html中引入這些檔案，而不是像 Blazor 那樣是在Pages/_Layout.cshtml中。

2.從 Masa Blazor0.3.0 開始採用和微軟相同的命名規範（大駝峰），MASA 改成了 Masa 所以升級了 0.3.0 和之後的版本要注意別寫錯了，不然會找不到樣式檔案和 js 檔案

在_Imports.razor檔案中引用Masa.Blazor，BlazorComponent命名空間，這樣我們就不用每個檔案都去引用一遍了

5. 時間軸功能實現

我們先在佈局頁MainLayout.razor中搞出我們頁面的大概佈局，頂部需要一個 Toolbar 工具列，底部是底部導航，中間是我們的子頁面

這樣一種常規的佈局頁面，點選工具列上面的選單我們可以切換主題顏色，我們來用Masa Blazor簡單實現下。

頂部工具列我們主要用到了MToolbar元件和MMenu元件，底部因為BottomNavigation元件官網暫時還沒有，後面版本才會出來，影響不大，我們先用MFooter元件代替。這樣我們佈局範本頁已經搞好了，全域性的顏色我們透過變數存起來，透過MMenu選中的值來進行控制

Mainlayout.razor 完整程式碼：

@inherits LayoutComponentBase

<MApp>
  <MToolbar MaxHeight="64" Color="@_color" Dark>
    <MAppBarNavIcon></MAppBarNavIcon>
    <MSpacer></MSpacer>
    Timeline
    <MSpacer></MSpacer>
    <MMenu Left OffsetY Transition="slide-x-transition" Bottom>
      <ActivatorContent>
        <MButton Icon @attributes="@context.Attrs">
          <MIcon>mdi-dots-vertical</MIcon>
        </MButton>
      </ActivatorContent>
      <ChildContent>
        <MList>
          @foreach (var item in _colors) {
          <MListItem OnClick="()=>{_color = item.Value;}">
            <MListItemTitle>@item.Text</MListItemTitle>
          </MListItem>
          }
        </MList>
      </ChildContent>
    </MMenu>
  </MToolbar>

  <div style="width:100%; height:100%">
    <CascadingValue Value="_color"> @Body </CascadingValue>
  </div>

  <MFooter Color="#FAFAFA" Elevation="2">
    <MRow NoGutters Justify="JustifyTypes.SpaceBetween">
      <MCol Style="display:flex; justify-content:center;">
        <MButton Color="@_color" Icon Class="my-2 white--text">
          <MBadge OverLap Color="error" Content="6">
            <ChildContent>
              <MIcon>mdi-chat</MIcon>
            </ChildContent>
          </MBadge>
        </MButton>
      </MCol>
      <MCol Style="display:flex; justify-content:center;">
        <MButton Color="@_color" Icon Class="my-2 white--text">
          <MIcon>mdi-account-details</MIcon>
        </MButton>
      </MCol>
      <MCol Style="display:flex; justify-content:center;">
        <MButton Color="@_color" Icon Class="my-2 white--text">
          <MIcon>mdi-compass</MIcon>
        </MButton>
      </MCol>
    </MRow>
  </MFooter>
</MApp>

@code{ private string _color = "purple darken-3"; private List<(string Text,
string Value)> _colors = new() { new("pink", "purple darken-1"), new("indigo",
"indigo"), new("teal", "teal"), new("deep-purple", "deep-purple darken-1"),
new("yellow", "yellow darken-4"), }; }

接下來我們再來實現 Body 頁面，Body 頁面就是我們的主要內容了。這裡我們可以去Masa Blazor官網找一下Timelines元件直接使用，剛好官網有行動端Timeline的範例 demo，只是範例沒有改變顏色的功能，沒關係我們拿過來改一改。

我們把程式碼 Copy 過來，去掉他頂部的工具列，因為我們頂部已經在佈局頁面裡寫過了，而且是應用在每個子頁面的，所以這裡就不用再寫了。但是這裡要考慮怎麼把_color參數傳到Timeline頁面裡面，這裡我們用到了級聯參數，透過 CascadingValue 來把參數傳遞給子頁面，子頁面透過CascadingParameter來接收，這樣我們在子頁面裡就可以拿到顏色變數了。

Timeline.razor 完整程式碼：

@page "/"

<MCard Elevation="0" Class="mx-auto">
  <MCard Dark Flat>
    <MButton Absolute Bottom Color="@Color" Right Fab>
      <MIcon>mdi-plus</MIcon>
    </MButton>
    <MImage
      Src="https://cdn.masastack.com/stack/images/website/masa-blazor/cards/forest.jpg"
      Gradient="to top, rgba(0,0,0,.44), rgba(0,0,0,.44)"
      Dark
    >
      <MContainer Class="fill-height">
        <MRow Align="@AlignTypes.Center">
          <strong class="text-h1 font-weight-regular mr-6">8</strong>
          <MRow Justify="@JustifyTypes.End">
            <div class="text-h5 font-weight-light">Monday</div>
            <div class="text-uppercase font-weight-light">February 2015</div>
          </MRow>
        </MRow>
      </MContainer>
    </MImage>
  </MCard>
  <MCardText Class="py-0">
    <MTimeline AlignTop Dense>
      <MTimelineItem Color="pink" Small>
        <MRow Class="pt-1">
          <MCol Cols="3">
            <strong>5pm</strong>
          </MCol>
          <MCol>
            <strong>New Icon</strong>
            <div class="text-caption">Mobile App</div>
          </MCol>
        </MRow>
      </MTimelineItem>

      <MTimelineItem Color="@Color" Small>
        <MRow Class="pt-1">
          <MCol Cols="3">
            <strong>3-4pm</strong>
          </MCol>
          <MCol>
            <strong>Design Stand Up</strong>
            <div class="text-caption mb-2">Hangouts</div>
            <MAvatar>
              <MImage
                Src="https://avataaars.io/?avatarStyle=Circle&topType=LongHairFrida&accessoriesType=Kurt&hairColor=Red&facialHairType=BeardLight&facialHairColor=BrownDark&clotheType=GraphicShirt&clotheColor=Gray01&graphicType=Skull&eyeType=Wink&eyebrowType=RaisedExcitedNatural&mouthType=Disbelief&skinColor=Brown"
              ></MImage>
            </MAvatar>
            <MAvatar>
              <MImage
                Src="https://avataaars.io/?avatarStyle=Circle&topType=ShortHairFrizzle&accessoriesType=Prescription02&hairColor=Black&facialHairType=MoustacheMagnum&facialHairColor=BrownDark&clotheType=BlazerSweater&clotheColor=Black&eyeType=Default&eyebrowType=FlatNatural&mouthType=Default&skinColor=Tanned"
              ></MImage>
            </MAvatar>
            <MAvatar>
              <MImage
                Src="https://avataaars.io/?avatarStyle=Circle&topType=LongHairMiaWallace&accessoriesType=Sunglasses&hairColor=BlondeGolden&facialHairType=Blank&clotheType=BlazerSweater&eyeType=Surprised&eyebrowType=RaisedExcited&mouthType=Smile&skinColor=Pale"
              ></MImage>
            </MAvatar>
          </MCol>
        </MRow>
      </MTimelineItem>

      <MTimelineItem Color="pink" Small>
        <MRow Class="pt-1">
          <MCol Cols="3">
            <strong>12pm</strong>
          </MCol>
          <MCol>
            <strong>Lunch break</strong>
          </MCol>
        </MRow>
      </MTimelineItem>

      <MTimelineItem Color="@Color" Small>
        <MRow Class="pt-1">
          <MCol Cols="3">
            <strong>9-11am</strong>
          </MCol>
          <MCol>
            <strong>Finish Home Screen</strong>
            <div class="text-caption">Web App</div>
          </MCol>
        </MRow>
      </MTimelineItem>
    </MTimeline>
  </MCardText>
</MCard>

@code{ [CascadingParameter] public string Color { get; set; } }

然後我們把這個頁面想要隨著主題色變動的顏色改成透過 Color 變數控制就好了。

這樣我們就完成了一個時間軸頁面並且可以切換主題色，這裡我們還可以基於這個範例加一些功能，比如點選這個＋號按鈕去彈窗再去新增一個時間任務去渲染到頁面上，也是挺簡單的，就不做示範了。本篇文章主要介紹了在MAUI中如何使用Masa Blazor，並做了一個小 demo。拋磚引玉，大家也可以嘗試用MAUI + Blazor去做一些應用體驗一下。

完整範例程式碼：codding-y/Maui.MasaBlazor (github.com)

開源地址

MASA.BuildingBlocks：https://github.com/masastack/MASA.BuildingBlocks
MASA.Contrib：https://github.com/masastack/MASA.Contrib
MASA.Utils：https://github.com/masastack/MASA.Utils
MASA.EShop：https://github.com/masalabs/MASA.EShop
MASA.Blazor：https://github.com/BlazorComponent/MASA.Blazor

如果你對我們的 MASA Framework 感興趣，無論是程式碼貢獻、使用、提 Issue，歡迎聯繫我們

在 MAUI 中使用 Masa Blazor

1. Masa Blazor 是什麼

2. MAUI 是什麼

2.1 MAUI 優點：

3. MAUI 環境準備

4. 建立 MAUI 應用程式並引入 Masa Blazor

5. 時間軸功能實現

延伸閱讀

Maui Blazor 使用攝影機實現

在 MAUI Blazor 裡顯示本地圖片的最佳選擇？-支援 Windows\macOS\Android\iOS

MAUI 使用 Masa Blazor 元件庫

MAUI 與 Blazor 共享一套 UI，媲美 Flutter，實現 Windows、macOS、Android、iOS、Web 通用 UI