在MAUI中使用Masa Blazor

这篇具有很好参考价值的文章主要介绍了在MAUI中使用Masa Blazor。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Masa Blazor是什么

在此之前我们已经介绍过什么是Masa Blazor,以及如何使用Masa Blazor,如果还有不了解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中使用Masa Blazor

MAUI优点:

  • 从 XAML 和 C# 中的单个共享代码库编写跨平台Visual Studio。
  • 跨平台共享 UI 布局和设计。
  • 跨平台共享代码、测试和业务逻辑。
  • 另一个优点是跨框架重用 Razor 组件,它可以实现为 Razor 类库 (RCL) 并与 Blazor Server 和 WebAssembly 共享。这允许最大限度地重用代码并从单个代码库生成移动、桌面和 Web 解决方案。

今天我们重点在实操,就不介绍那么多概念性的东西了。想了解更多关于MAUI的同学可以移步官方文档介绍 什么是 .NET MAUI?,本篇文章会带大家使用MAUI+Masa Blazor做一个移动端常见的时间轴页面,并加一点切换主题色的小功能,效果图如下:

在MAUI中使用Masa Blazor

在MAUI中使用Masa Blazor

接下来让我们一步步去实现它。首先我们先准备好必备的环境。

注:文章示例演示环境为(Maui 6.0.200-preview.14.5 + Masa.Blazor 0.3.0)

MAUI环境准备

  1. 首先要确保安装了最新版的 Visual Studio,并且安装了Mobile development with .NET工作负载。 在MAUI中使用Masa Blazor

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

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

    在MAUI中使用Masa Blazor

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

    请确保 在 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文件中注册相关服务

    builder.Services.AddMasaBlazor();
    

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

  3. wwwroot/index.html 中引入样式、字体、脚本在MAUI中使用Masa Blazor

    <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脚本文件不需要可以不引入 -->
    

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

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

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

时间轴功能实现

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

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

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

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,只是示例没有改变颜色的功能,没关系我们拿过来改一改。

在MAUI中使用Masa Blazor

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

在MAUI中使用Masa Blazor

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

这样我们就完成了一个时间轴页面并且可以切换主题色,这里我们还可以基于这个示例加一些功能,比如点击这个+号按钮去弹窗再去添加一个时间任务去渲染到页面上,也是挺简单的,就不做演示了。本篇文章主要介绍了在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,欢迎联系我们文章来源地址https://www.toymoban.com/news/detail-489042.html

到了这里,关于在MAUI中使用Masa Blazor的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • MAUI+Blazor混合应用开发示例

    笔者之前在公司搭建过一套生产管理系统,该系统要求能和硬件进行串口通信,同时又要方便后台进行信息查询。笔者给出的解决方案就是: MAUI + Blazor ,这样只需要提供一套UI,就能满足桌面端、移动端和Web端三种不同应用场景。今天要介绍的是基于桌面端的开发实现(实

    2024年02月11日
    浏览(32)
  • MAUI+Blazor:windows 打包踩坑

    最近打算研究一下MAUI+Blazor,争取在今年年底之前彻底搞懂MAUI+Blazor的安装模式, Windows 4种安装程序格式MSI,EXE、AppX和MSIX优缺点对比以及后缀为 .msixbundle的文件怎么安装? 我们windows一般用exe文件进行安装,exe是最普遍的安装文件格式,原因是exe对于开发者具有最高的自定义

    2024年02月13日
    浏览(27)
  • bh002- Blazor hybrid / Maui 保存设置快速教程

    1. 建立工程 bh002_ORM 源码 2. 添加 nuget 包 3. 添加命名空间引用 _Imports.razor @using BootstrapBlazor.Components 4. 添加服务 MauiProgram.cs 在 return builder.Build(); 之前加入这句 5. 添加代码后置文件 Pages/Index.razor.cs Index.razor.cs 6. 添加 UI Index.razor 7. 执行效果 8. 添加清除按钮 Index.razor Index.razor.c

    2024年02月11日
    浏览(36)
  • Maui Blazor windows程序无法通过双击 bin 文件夹中的 exe打开程序的解决办法

    ​ 使用Visual Studio创建了一个.NET Maui Blazor 应用,通过Visual Studio调试Windows应用时,需要打开开发者模式 打开开发者模式,调试一切正常,但如果直接运行bin文件夹下对应目录的exe时,没有任何反应,事件查看器中,会有这样的提示: Exception Info: System.DllNotFoundException: Unable

    2024年02月04日
    浏览(45)
  • ChatGPT热炒之前 搜索引擎SEO算法已经悄然改变

    2022年4月起,某度算法有了新的调整,这对于靠SEO获得流量的公司简直可以说是灭顶之灾。原本SEO从业者还指望跟之前一样,等算法调整稳定后,网站的自然排名还会再回来,但等到了10月份,仍然没有回暖的迹象,大家这才不得不面对现实,总结这次算法调整后的特点。 特

    2023年04月23日
    浏览(48)
  • 【独立闯天下】Prime新传奇!💥原团队的Blazor版本迟迟无音,合并请求石沉大海。于是,我们决定单干!加入Prime Blazor版项目,一起开创崭新的旅程吧!🌟📚

    共建Prime的Blazor版:为开源社区注入新活力 Prime组件库作为一款广受欢迎的开源组件库,一直以来都备受开发者们的青睐。然而,随着技术的不断发展和更新,原团队的Blazor版本似乎已经逐渐失去了活力,长时间没有得到更新和维护。在这样的背景下,一群热爱开源、热衷于

    2024年02月03日
    浏览(73)
  • TeamView: 为了进一步增强安全性,在发起连接之前,我们希望您先验证您的账户

    TeamViewPC端远程连接另外一台电脑 弹出窗口:为了进一步增强安全性,在发起连接之前,我们希望您先验证您的账户 电脑浏览器自动跳转到手机号验证页面,输入正确的手机号后,点击验证却一直提示 手机号无效、手机号未知等异常。 复制验证链接到手机 https://login.teamviewer.

    2024年02月14日
    浏览(63)
  • 如何在现有项目中使用`Masa MiniApi`?

    首先我们现有创建一个空的 WebApi 的项目模板,这个项目模板和 MasaFramework 本身没有任何关联,我们本博客只是使用的 MasaFramework 的 MiniApi 的包 创建 Asp.NET Core 空 的项目模板 项目名称 MFMiniApi 其他信息看图,取消 Https 配置,也可以选择, 这就是一个空的项目模板 安装 Masa

    2023年04月18日
    浏览(31)
  • Matlab编程中常用到各种数学符号和特殊字符,如希腊字母、上下标、箭头符号等。在此,我们介绍如何在Matlab中快速输入这些符号,并提供相应的源代码示例。

    Matlab编程中常用到各种数学符号和特殊字符,如希腊字母、上下标、箭头符号等。在此,我们介绍如何在Matlab中快速输入这些符号,并提供相应的源代码示例。 希腊字母: Matlab中快速输入希腊字母,可以使用latex风格的命令。例如: alpha 输入alpha,即可输入希腊字母α beta

    2024年02月14日
    浏览(41)
  • 明明我们已经安装了第三方库,可是import时却ModuleNotFoundError报错的解决办法

    明明我们已经安装了第三方库,可是用IDLE进行import时却ModuleNotFoundError: No module named \\\'requests’报错 这是因为大家的第三方库多是通过pycharm进行安装的,他的安装位置和python软件的安装位置不一致,而pycharm是按照项目来管理第三方库的。 解决办法就是: 第一步:先找到pytho

    2024年02月11日
    浏览(68)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包