Masa Blazor是什么

在此之前我们已经介绍过什么是Masa Blazor，以及如何使用Masa Balzor，如果还有不了解Masa Blazor的同学可以看我上篇文章【初识Masa Blazor】。那么今天就带大家探索一下如何在MAUI中使用Masa Blazor,那么我们先来了解一下什么是MAUI？

MAUI是什么

.NET MAUI全称为 .NET Multi-platform App UI ，顾名思义就是.NET多平台应用 UI，是一个跨平台的框架，是 Xamarin.Forms 的演变，其使用C#和XAML创建本机移动和桌面应用，这里的XAML可以替换成RazorView。 使用 .NET MAUI，可以开发可在 Android、iOS、macOS 和 Windows从单个共享代码库运行的应用，一套代码多端运行。

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）

MAUI环境准备

  1. 首先要确保安装了最新版的 Visual Studio，并且安装了Mobile development with .NET工作负载。

  2. 启用硬件加速才能最大化 Android 模拟器性能，我们可以启用Hyper-V或HAXM加速，这里只介绍第一种

    • 在 Windows 搜索框中输入“Windows 功能”，然后在搜索结果中选择“打开或关闭 Windows 功能” 。 在“Windows 功能”对话框中，启用“Hyper-V”和“Windows 虚拟机监控程序平台” ：

    进行这些更改后，重新启动计算机。

    请确保 在 Android Device Manager 中创建 的虚拟设备是 x86 64 或基于 x86的系统映像。 如果使用基于 Arm 的系统映像，则不会加速虚拟设备，并且运行速度会缓慢。启用 Hyper-v 后，可以运行加速 Android 仿真器。HAXM加速和详细设置可参考：如何使用 Android 仿真程序 & 启用硬件加速

创建MAUI应用并引入Masa Blazor

  1. 创建项目选择.NET MAUI Blazor App。这样的话我们就能使用Blazor View来写UI界面了

  2. 在nuget中安装Masa.Blazor，并在MauiProgram.cs文件中注册相关服务

    1. builder.Services.AddMasaBlazor();

    CreateMauiApp()方法简单理解：在启动方法中，调用了RegisterBlazorMauiWebView()构建器对象的扩展方法，然后将 BlazorWebView 本身添加到具有该builder.Services属性的 DI 容器的 Services 集合中。这将执行依赖注入加载特定于平台的视图以呈现输出 HTML，因为每个平台都有自己的 Web 引擎，BlazorWebView（从View继承）控件，它能够在运行时处理 Razor 组件并生成其等效的 HTML。该 HTML 将使用平台的本机 Web 引擎呈现，而无需任何 Web 服务器的参与。

  3. wwwroot/index.html 中引入样式、字体、脚本

    1. <link href="_content/Masa.Blazor/css/masa-blazor.css" rel="stylesheet">
    2. <link href="_content/Masa.Blazor/css/masa-extend-blazor.css" rel="stylesheet">
    3. <link href="https://cdn.masastack.com/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
    4. <link href="https://cdn.masastack.com/npm/materialicons/materialicons.css" rel="stylesheet">
    5. <link href="https://cdn.masastack.com/npm/fontawesome/v5.0.13/css/all.css" rel="stylesheet">
    7. <script src="_content/BlazorComponent/js/blazor-component.js"></script>
    8. <script src="https://cdn.masastack.com/npm/echarts/5.1.1/echarts.min.js"></script><!-- echarts脚本文件不需要可以不引入 -->

    注意：1.MAUI项目中需要在index.html中引入这些文件，而不是像Blazor那样是在Pages/_Layout.cshtml中。

    2.从Masa Blazor0.3.0开始采用和微软相同的命名规范（大驼峰），MASA改成了Masa所以升级了0.3.0和之后的版本要注意别写错了，不然会找不到样式文件和js文件

  4. 在_Imports.razor文件中引用Masa.Blazor，BlazorComponent命名空间，这样我们就不用每个文件都去引用一遍了

时间轴功能实现

我们先在布局页MainLayout.razor中搞出我们页面的大概布局，顶部需要一个Toolbar工具条，底部是底部导航，中间是我们的子页面

这样一种常规的布局页面，点击工具条上面的菜单我们可以切换主题颜色，我们来用Masa Blazor简单实现下。

顶部工具条我们主要用到了MToolbar组件和MMenu组件，底部因为BottomNavigation组件官网暂时暂时还没有，后面版本才会出来，影响不大，我们先用MFooter组件代替。这样我们布局模板页已经搞好了，全局的颜色我们通过变量存起来，通过MMenu选中的值来进行控制

Mainlayout.razor完整代码：

  1. @inherits LayoutComponentBase
  3. <MApp>
  4.     <MToolbar MaxHeight="64" Color="@_color" Dark>
  5.         <MAppBarNavIcon></MAppBarNavIcon>
  6.         <MSpacer></MSpacer>
  7.         Timeline
  8.         <MSpacer></MSpacer>
  9.         <MMenu Left
  10.                OffsetY
  11.                Transition="slide-x-transition"
  12.                Bottom>
  13.             <ActivatorContent>
  14.                 <MButton Icon @attributes="@context.Attrs">
  15.                     <MIcon>mdi-dots-vertical</MIcon>
  16.                 </MButton>
  17.             </ActivatorContent>
  18.             <ChildContent>
  19.                 <MList>
  20.                     @foreach (var item in _colors)
  21.                     {
  22.                         <MListItem OnClick="()=>{_color = item.Value;}">
  23.                             <MListItemTitle>@item.Text</MListItemTitle>
  24.                         </MListItem>
  25.                     }
  26.                 </MList>
  27.             </ChildContent>
  28.         </MMenu>
  29.     </MToolbar>
  31.     <div style="width:100%; height:100%">
  32.         <CascadingValue Value="_color">
  33.             @Body
  34.         </CascadingValue>
  35.     </div>
  37.     <MFooter Color="#FAFAFA" Elevation="2">
  38.         <MRow NoGutters Justify="JustifyTypes.SpaceBetween">
  39.             <MCol Style="display:flex; justify-content:center;">
  40.                 <MButton Color="@_color" Icon Class="my-2 white--text">
  41.                     <MBadge OverLap Color="error" Content="6">
  42.                         <ChildContent>
  43.                             <MIcon>mdi-chat</MIcon>
  44.                         </ChildContent>
  45.                     </MBadge>
  46.                 </MButton>
  47.             </MCol>
  48.             <MCol Style="display:flex; justify-content:center;">
  49.                 <MButton Color="@_color" Icon Class="my-2 white--text">
  50.                     <MIcon>mdi-account-details</MIcon>
  51.                 </MButton>
  52.             </MCol>
  53.             <MCol Style="display:flex; justify-content:center;">
  54.                 <MButton Color="@_color" Icon Class="my-2 white--text">
  55.                     <MIcon>mdi-compass</MIcon>
  56.                 </MButton>
  57.             </MCol>
  58.         </MRow>
  59.     </MFooter>
  61. </MApp>
  63. @code{
  64.         private string _color = "purple darken-3";
  65.         private List<(string Text, string Value)> _colors = new()
  66.         {
  67.             new("pink", "purple darken-1"),
  68.             new("indigo", "indigo"),
  69.             new("teal", "teal"),
  70.             new("deep-purple", "deep-purple darken-1"),
  71.             new("yellow", "yellow darken-4"),
  72.         };
  73. }

接下来我们再来实现Body页面，Body页面就是我们的主要内容了。这里我们可以去Masa Blazor官网找一下Timelines组件直接使用，刚好官网有移动端Timeline的示例demo，只是示例没有改变颜色的功能，没关系我们拿过来改一改。

我们把代码Copy过来，去掉他顶部的工具条，因为我们顶部已经在布局页面里写过了，而且是应用在每个子页面的，所以这里就不用在写了。但是这里要考虑怎么把_color参数传到Timeline页面里面，这里我们用到了级联参数，通过 CascadingValue 来把参数传递给子页面，子页面通过CascadingParameter来接收，这样我们在子页面里就可以拿到颜色变量了。

Timeline.razor完整代码：

  1. @page "/"
  3. <MCard Elevation="0" Class="mx-auto">
  4.     <MCard Dark
  5.            Flat>
  6.         <MButton Absolute
  7.                  Bottom
  8.                  Color="@Color"
  9.                  Right
  10.                  Fab>
  11.             <MIcon>mdi-plus</MIcon>
  12.         </MButton>
  13.         <MImage Src="https://cdn.masastack.com/stack/images/website/masa-blazor/cards/forest.jpg"
  14.                 Gradient="to top, rgba(0,0,0,.44), rgba(0,0,0,.44)" Dark>
  15.             <MContainer Class="fill-height">
  16.                 <MRow Align="@AlignTypes.Center">
  17.                     <strong class="text-h1 font-weight-regular mr-6">8</strong>
  18.                     <MRow Justify="@JustifyTypes.End">
  19.                         <div class="text-h5 font-weight-light">
  20.                             Monday
  21.                         </div>
  22.                         <div class="text-uppercase font-weight-light">
  23.                             February 2015
  24.                         </div>
  25.                     </MRow>
  26.                 </MRow>
  27.             </MContainer>
  28.         </MImage>
  29.     </MCard>
  30.     <MCardText Class="py-0">
  31.         <MTimeline AlignTop
  32.                    Dense>
  33.             <MTimelineItem Color="pink"
  34.                            Small>
  35.                 <MRow Class="pt-1">
  36.                     <MCol Cols="3">
  37.                         <strong>5pm</strong>
  38.                     </MCol>
  39.                     <MCol>
  40.                         <strong>New Icon</strong>
  41.                         <div class="text-caption">
  42.                             Mobile App
  43.                         </div>
  44.                     </MCol>
  45.                 </MRow>
  46.             </MTimelineItem>
  48.             <MTimelineItem Color="@Color"
  49.                            Small>
  50.                 <MRow Class="pt-1">
  51.                     <MCol Cols="3">
  52.                         <strong>3-4pm</strong>
  53.                     </MCol>
  54.                     <MCol>
  55.                         <strong>Design Stand Up</strong>
  56.                         <div class="text-caption mb-2">
  57.                             Hangouts
  58.                         </div>
  59.                         <MAvatar>
  60.                             <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>
  61.                         </MAvatar>
  62.                         <MAvatar>
  63.                             <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>
  64.                         </MAvatar>
  65.                         <MAvatar>
  66.                             <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>
  67.                         </MAvatar>
  68.                     </MCol>
  69.                 </MRow>
  70.             </MTimelineItem>
  72.             <MTimelineItem Color="pink"
  73.                            Small>
  74.                 <MRow Class="pt-1">
  75.                     <MCol Cols="3">
  76.                         <strong>12pm</strong>
  77.                     </MCol>
  78.                     <MCol>
  79.                         <strong>Lunch break</strong>
  80.                     </MCol>
  81.                 </MRow>
  82.             </MTimelineItem>
  84.             <MTimelineItem Color="@Color"
  85.                            Small>
  86.                 <MRow Class="pt-1">
  87.                     <MCol Cols="3">
  88.                         <strong>9-11am</strong>
  89.                     </MCol>
  90.                     <MCol>
  91.                         <strong>Finish Home Screen</strong>
  92.                         <div class="text-caption">
  93.                             Web App
  94.                         </div>
  95.                     </MCol>
  96.                 </MRow>
  97.             </MTimelineItem>
  98.         </MTimeline>
  99.     </MCardText>
  101. </MCard>
  103. @code{
  104. 		[CascadingParameter]
  105.         public string Color { get; set; }
  106. }

然后我们把这个页面想要随着主题色变动的颜色改成通过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

    MASA Blazor是一个Blazor的UI组件库.就像大家写前端熟知的Bootstrap, Ant Design一样. MASA Blazor官网地址:https://blazor.masasta ...

  2. MASA Blazor入门这一篇就够了

    1.什么是Blazor? 有什么优势? ASP.NET Core Blazor 简介 Blazor 是一个使用 Blazor 生成交互式客户端 Web UI 的框架: 使用 C# 代替 JavaScr ...

  3. 使用MASA Blazor开发一个标准的查询表格页

    前言 大家好,我是开源项目 MASA Blazor 主要开发者之一,如果你还不了解MASA Blazor,可以访问我们的 官网 和博客 <初识MASA Blazor> 一探究竟.简单来说, ...

  4. 体验了一把最近很火的开源项目-MASA Blazor

    前言 很惭愧直到去年底才接触到Blazor.那什么是Blazor呢?相信大家都看过官方文档的详细说明,另外MASA团队也有不错的说明介绍 .用官方的话说Blazor是一个交互式客户端Web UI的框架 ...

  5. Masa Blazor in Blazor Day

    2022年第一场Blazor中文社区的开发者分享活动,我们的团队也全程参与其中,在议程中,也分享了我们团队的Blazor 管理后台模板,针对于Blazor,先科普一波,避免有些朋友不了解,Blazor ...

  6. Masa Blazor自定义组件封装

    前言 实际项目中总能遇到一个"组件"不是基础组件但是又会频繁复用的情况,在开发MASA Auth时也封装了几个组件.既有简单定义CSS样式和界面封装的组件(GroupBox),也有 ...

  7. [mobile angular ui]MAUI中的font awesome图标

    MAUI中用font awesome替换了glyphicon,但是FA中都有哪些可用的图标呢,在网上搜了一张font awesome的对照表,使用时记着把其中的icon-xxx替换为fa-xxx就可以 ...

  8. [MAUI] 在.NET MAUI中结合Vue实现混合开发

    ​ 在MAUI微软的官方方案是使用Blazor开发,但是当前市场大多数的Web项目使用Vue,React等技术构建,如果我们没法绕过已经积累的技术,用Blazor重写整个项目并不现实. Vue是当前流 ...

  9. 如何在 .NET MAUI 中加载 json 文件？

    引言: 按core传统方式添加 AddJsonFile("appsettings.json") 在windows平台和ssr工作正常,但是在 ios 和 android 无法用这种 ...

随机推荐

  1. Android中的Coroutine协程原理详解

    前言 协程是一个并发方案.也是一种思想. 传统意义上的协程是单线程的,面对io密集型任务他的内存消耗更少,进而效率高.但是面对计算密集型的任务不如多线程并行运算效率高. 不同的语言对于协程都有不同的实 ...

  2. kafka 学习（二--前言）

    kafka 现在在企业应用和互联网项目中的应用越来越多了,本篇文章就从 kafka 的基础开始带你一展 kafka 的宏图 1. 什么是 Kafka Kafka 是一个分布式流式平台,它有三个关键能力 ...

  3. Dubbo 配置文件是如何加载到 Spring 中的？

    Spring 容器在启动的时候,会读取到 Spring 默认的一些 schema 以及 Dubbo 自 定义的 schema,每个 schema 都会对应一个自己的 NamespaceHandler, ...

  4. Oracle入门基础（十二）一一储存过程及触发器

    1.第一个存储过程 打印Hello World 调用存储过程: 1.exec sayhelloworld(); 2.begin sayhelloworld(); sayhelloworld(); en ...

  5. 学习saltstack （六）

    Slatstack 介绍 官网:https://saltstack.com/ 官方源:http://repo.saltstack.com/  (介绍各操作系统安装方法) centos 6源 ? 1 y ...

  6. 学习openstack（五）

    OpenStackOpenStack介绍OpenStack是一种免费的开源平台,帮助服务提供商实现类似于亚马逊EC2和S3的基础设施服务.OpenStack当前有三个核心项目:计算(Nova),对象存 ...

  7. DASCTF Oct吉林工师web

    迷路的魔法少女 进入环境给出源码 <?php highlight_file('index.php'); extract($_GET); error_reporting(0); function ...

  8. html5中常被忘记的标签，属性

    placeholder placeholder是input中的属性,就是默认输入的text,当用户输入时,text会被清空. 用法 <input type ="text" p ...

  9. HTML+CSS基础课程-imooc-【更新完毕】

    6-1 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小.颜色.字体加粗等 ...

  10. 翻译：HTML5与HTML4的区别

    本文选译自:W3C Working Group Note: HTML5 Differences from HTML4. 解释一下W3C Working Group Note,作为"工作组笔记 ...