首页 > 其他分享 >学习.NET MAUI Blazor（三）、创建.NET MAUI Blazor应用并使用AntDesignBlazor

学习.NET MAUI Blazor（三）、创建.NET MAUI Blazor应用并使用AntDesignBlazor

时间：2022-12-29 17:47:26浏览次数：46  
标签：settings transform webkit MAUI NET Blazor

大致了解了Blazor和MAUI之后，尝试创建一个.NET MAUI Blazor应用。
需要注意的是： 虽然都叫MAUI，但.NET MAUI与.NET MAUI Blazor 并不相同，MAUI还是以xaml为主，而MAUI Blazor则是以razor为主。

这个系列还是以MAUI Blazor为主，要创建一个MAUI Blazor应用，需要安装Visual Studio 2022 17.3 或更高版本，并在安装程序上，勾选.NET Multi-platform App UI 开发！最好是升级到最新的.NET 7。
在这里插入图片描述

目录

创建.NET MAUI Blazor应用

打开Visual Studio 2022，选择创建新项目

在这里插入图片描述
在搜索框输入MAUI，选择.NET MAUI Blazor应用，点下一步！

在这里插入图片描述
给项目起一个好听的名字，选择项目存在的位置，点下一步！

在这里插入图片描述
选择目标框架，这里选择的是.NET 7，点击创建。
在这里插入图片描述
等待创建项目及其依赖项还原。完成后的目录结构如下：
在这里插入图片描述

.NET MAUI Blazor 需要注意的地方

.NET MAUI Blazor 运行在WebView2上，WebView2是微软推出的新一代用于桌面端混合开发的解决方案。它可以让本地应用程序（WinForm、WPF、WinUI、Win32）、移动应用程序（MAUI）轻松嵌入Web技术。WebView2 控件使用 Microsoft Edge 作为呈现引擎在客户端应用程序及App中显示 Web 内容。使用 WebView2 可以将 Web 代码嵌入到客户端应用程序及App中的不同部分，或在单个 WebView 实例中构建所有本机应用程序。

可以这么看MAUI Blazor， .NET MAUI 包含 BlazorWebView 控件，该控件运行将 Razor 组件呈现到嵌入式 Web View 中。 通过结合使用 .NET MAUI 和 Blazor，可以跨移动设备、桌面设备和 Web 重复使用一组 Web UI 组件。

说人话就是，它就是一个Hybrid App（混合应用） ！

调试.NET MAUI Blazor

在windows上调试 MAUI Blazor应用，需要Windows 10 1809及更高版本上，并打开开发者模式。
windows 11上，位于设置->隐私和安全性->开发者选项->开发人员模式
在这里插入图片描述
在这里插入图片描述
点击Windows Machine，运行程序！
在这里插入图片描述
如无意外，运行成功！
在这里插入图片描述
这时，MAUI Blazor使用的是bootstrap样式以及open-iconic图标。
在wwwroot/index.html中也可以看到

<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />

现在已经有个很多基于Blazor的组件库，所以暂时把默认的bootstrap替换成第三方组件库，这里使用的是AntDesignBlazor。

使用AntDesignBlazor 组件库

安装依赖：

PM> NuGet\Install-Package AntDesign.ProLayout -Version 0.13.1

注入AntDesign

在MauiProgram.cs注入AntDesign 服务与设置基本配置，完整的MauiProgram.cs代码

using Microsoft.Extensions.Logging;
using MauiBlazorApp.Data;

namespace MauiBlazorApp;

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

		builder.Services.AddMauiBlazorWebView();

#if DEBUG
		builder.Services.AddBlazorWebViewDeveloperTools();
		builder.Logging.AddDebug();
#endif

		builder.Services.AddSingleton<WeatherForecastService>();
        //注入AntDesign
        builder.Services.AddAntDesign();
		//基本配置
		builder.Services.Configure<ProSettings>(settings =>
		{
            settings.NavTheme = "light";
            settings.Layout = "side";
            settings.ContentWidth = "Fluid";
			settings.FixedHeader = false;
			settings.FixSiderbar = true;
            settings.Title = "DotNet宝藏库";
			settings.PrimaryColor = "daybreak";
			settings.ColorWeak = false;
			settings.SplitMenus= false;
			settings.HeaderRender= true;
			settings.FooterRender= false;
			settings.MenuRender= true;
			settings.MenuHeaderRender= true;
			settings.HeaderHeight = 48;

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

配置项都写上了。参数含义从表达的意思就能看出来，不做注释了！

引入样式

打开wwwroot/index.html。由于我们使用的是AntDesign，所以需要改造下index.html，修改后内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
    <title>DotNet宝藏库</title>
    <base href="/" />
    
    <link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet" />
    <link rel="stylesheet" href="_content/AntDesign.ProLayout/css/ant-design-pro-layout-blazor.css" />
</head>

<body>

    <div class="status-bar-safe-area"></div>

    <div id="app">
        <style>
            html,
            body,
            #app {
                height: 100%;
                margin: 0;
                padding: 0;
            }

            #app {
                background-repeat: no-repeat;
                background-size: 100% auto;
            }

            .page-loading-warp {
                padding: 98px;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .ant-spin {
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                margin: 0;
                padding: 0;
                color: rgba(0, 0, 0, 0.65);
                font-size: 14px;
                font-variant: tabular-nums;
                line-height: 1.5;
                list-style: none;
                -webkit-font-feature-settings: 'tnum';
                font-feature-settings: 'tnum';
                position: absolute;
                display: none;
                color: #1890ff;
                text-align: center;
                vertical-align: middle;
                opacity: 0;
                -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
                transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
                transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
                transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86), -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
            }

            .ant-spin-spinning {
                position: static;
                display: inline-block;
                opacity: 1;
            }

            .ant-spin-dot {
                position: relative;
                display: inline-block;
                font-size: 20px;
                width: 20px;
                height: 20px;
            }

            .ant-spin-dot-item {
                position: absolute;
                display: block;
                width: 9px;
                height: 9px;
                background-color: #1890ff;
                border-radius: 100%;
                -webkit-transform: scale(0.75);
                -ms-transform: scale(0.75);
                transform: scale(0.75);
                -webkit-transform-origin: 50% 50%;
                -ms-transform-origin: 50% 50%;
                transform-origin: 50% 50%;
                opacity: 0.3;
                -webkit-animation: antSpinMove 1s infinite linear alternate;
                animation: antSpinMove 1s infinite linear alternate;
            }

            .ant-spin-dot-item:nth-child(1) {
                top: 0;
                left: 0;
            }

            .ant-spin-dot-item:nth-child(2) {
                top: 0;
                right: 0;
                -webkit-animation-delay: 0.4s;
                animation-delay: 0.4s;
            }

            .ant-spin-dot-item:nth-child(3) {
                right: 0;
                bottom: 0;
                -webkit-animation-delay: 0.8s;
                animation-delay: 0.8s;
            }

            .ant-spin-dot-item:nth-child(4) {
                bottom: 0;
                left: 0;
                -webkit-animation-delay: 1.2s;
                animation-delay: 1.2s;
            }

            .ant-spin-dot-spin {
                -webkit-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                transform: rotate(45deg);
                -webkit-animation: antRotate 1.2s infinite linear;
                animation: antRotate 1.2s infinite linear;
            }

            .ant-spin-lg .ant-spin-dot {
                font-size: 32px;
                width: 32px;
                height: 32px;
            }

            .ant-spin-lg .ant-spin-dot i {
                width: 14px;
                height: 14px;
            }
            .status-bar-safe-area {
                display: none;
            }

            @supports (-webkit-touch-callout: none) {
                .status-bar-safe-area {
                    display: flex;
                    position: sticky;
                    top: 0;
                    height: env(safe-area-inset-top);
                    background-color: #f7f7f7;
                    width: 100%;
                    z-index: 1;
                }

                .flex-column, .navbar-brand {
                    padding-left: env(safe-area-inset-left);
                }
            }
            @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
                .ant-spin-blur {
                    background: #fff;
                    opacity: 0.5;
                }
            }

            @-webkit-keyframes antSpinMove {
                to {
                    opacity: 1;
                }
            }

            @keyframes antSpinMove {
                to {
                    opacity: 1;
                }
            }

            @-webkit-keyframes antRotate {
                to {
                    -webkit-transform: rotate(405deg);
                    transform: rotate(405deg);
                }
            }

            @keyframes antRotate {
                to {
                    -webkit-transform: rotate(405deg);
                    transform: rotate(405deg);
                }
            }
        </style>
        <div style="
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          min-height: 420px;
          height: 100%;
        ">
            <div class="page-loading-warp">
                <div class="ant-spin ant-spin-lg ant-spin-spinning">
                    <span class="ant-spin-dot ant-spin-dot-spin">
                        <i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i><i class="ant-spin-dot-item"></i>
                    </span>
                </div>
            </div>
            <div style="display: flex; justify-content: center; align-items: center;">
                 <div class="loading-progress-text"></div>
            </div>
        </div>
    </div>

   

    <script src="_framework/blazor.webview.js" autostart="false"></script>
    <script src="_content/AntDesign/js/ant-design-blazor.js"></script>
</body>

</html>

加入命名空间

在_Imports.razor添加AntDesign命名空间：

@using System.Net.Http
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using MauiBlazorApp
@using MauiBlazorApp.Shared
//引入AntDesign
@using AntDesign

设置容器

在Main.razor中加入<AntContainer />

<Router AppAssembly="@typeof(Main).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(MainLayout)">
            <p role="alert">Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>
<!--设置容器-->
<AntContainer />

修改 MainLayout

  • 修改MainLayout.razor。
  • 把MainLayout.razor中默认布局删除
  • 引入AntDesign.ProLayout
  • 设置布局为AntDesign.ProLayout
  • 构造菜单、页脚的链接、版权
  • wwwroot目录下新建个文件夹images，把提前准备好的logo放进去

完整代码如下：

@using AntDesign.ProLayout
@inherits LayoutComponentBase

<AntDesign.ProLayout.BasicLayout 
    Logo="@("images/logo.png")"
    MenuData="MenuData">
    <ChildContent>
        @Body
    </ChildContent>
    <FooterRender>
        <FooterView Copyright="MauiBlazorApp" Links="Links"></FooterView>
    </FooterRender>
</AntDesign.ProLayout.BasicLayout>
<SettingDrawer />

@code
{
    private readonly MenuDataItem[] MenuData =
        {
        new MenuDataItem
        {
            Path = "/",
            Name = "Home",
            Key = "Home",
            Icon = "home"
        },
        new MenuDataItem
        {
            Path = "/Counter",
            Name = "Counter",
            Key = "Counter",
            Icon = "plus"
        },
        new MenuDataItem
        {
            Path = "/FetchData",
            Name = "FetchData",
            Key = "FetchData",
            Icon = "cloud"
        }
    };
    private readonly LinkItem[] Links =
    {
        new LinkItem
        {
            Key = "DotNet宝藏库",
            Title = "基于Ant Design Blazor",
            Href = "https://antblazor.com",
            BlankTarget = true
        }
    };
}

这时可以把项目中无用的内容删除掉了，如Shared/NavMenu.razor、wwwroot/css文件。
由于删除掉了css文件夹，页面元素肯定没有样式了。那么就简单的改造下默认的几个页面！

改造默认页面

index.razor

打开Pages/Index.razor，将演示组件SurveyPrompt 删掉。顺便把Shared/SurveyPrompt.razor也删除掉。将<h1>Hello, world!</h1>
替换为Ant Design组件。

@page "/"

<Title Level="1">Hello,DotNet宝藏库</Title>

<br />
<Text Type="success">欢迎关注我的公众号！</Text>

Counter.razor

打开 Pages/Counter.razor,将代码改为如下：

@page "/counter"

<Title Level="2">HCounter</Title>
<Divider />
<p role="status">Current count: @currentCount</p>

<Button @onclick="IncrementCount" Type="primary">AntDesign 按钮</Button>
@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

FetchData.razor

打开Pages/FetchData.razor，将数据表格替换为Ant Design，删除页面所有代码，替换为Ant Design的示例！

@page "/fetchdata"
@using System.ComponentModel
@using AntDesign.TableModels
@using System.Text.Json

@using MauiBlazorApp.Data
@inject WeatherForecastService ForecastService

<Table @ref="table"
       TItem="WeatherForecast"
       DataSource="@forecasts"
       Total="_total"
       @bind-PageIndex="_pageIndex"
       @bind-PageSize="_pageSize"
       @bind-SelectedRows="selectedRows"
       OnChange="OnChange">
    <Selection Key="@(context.Id.ToString())" />
    <PropertyColumn Property="c=>c.Id" Sortable />
    <PropertyColumn Property="c=>c.Date" Format="yyyy-MM-dd" Sortable />
    <PropertyColumn Property="c=>c.TemperatureC" Sortable />
    <PropertyColumn Title="Temp. (F)" Property="c=>c.TemperatureF" />
    <PropertyColumn Title="Hot" Property="c=>c.Hot">
        <Switch @bind-Value="@context.Hot"></Switch>
    </PropertyColumn>
    <PropertyColumn Property="c=>c.Summary" Sortable />
    <ActionColumn>
        <Space>
            <SpaceItem><Button Danger OnClick="()=>Delete(context.Id)">Delete</Button></SpaceItem>
        </Space>
    </ActionColumn>
</Table>
<br />
<p>PageIndex: @_pageIndex | PageSize: @_pageSize | Total: @_total</p>

<br />
<h5>selections:</h5>
@if (selectedRows != null && selectedRows.Any())
{
    <Button Danger Size="small" OnClick="@(e => { selectedRows = null; })">Clear</Button>

    @foreach (var selected in selectedRows)
    {
        <Tag @key="selected.Id" Closable OnClose="e=>RemoveSelection(selected.Id)">@selected.Id - @selected.Summary</Tag>
    }
}

<Button Type="@ButtonType.Primary" OnClick="()=> { _pageIndex--; }">Previous page</Button>
<Button Type="@ButtonType.Primary" OnClick="()=> { _pageIndex++; }">Next Page</Button>

@code {
    private WeatherForecast[] forecasts;
    IEnumerable<WeatherForecast> selectedRows;
    ITable table;
    int _pageIndex = 1;
    int _pageSize = 10;
    int _total = 0;

    protected override async Task OnInitializedAsync()
    {
        forecasts = await GetForecastAsync(1, 50);
        _total = 50;
    }
    public class WeatherForecast
    {
        public int Id { get; set; }

        [DisplayName("Date")]
        public DateTime? Date { get; set; }

        [DisplayName("Temp. (C)")]
        public int TemperatureC { get; set; }

        [DisplayName("Summary")]
        public string Summary { get; set; }

        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);

        public bool Hot { get; set; }
    }
    private static readonly string[] Summaries = new[]
    {
        "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
    };
    public void OnChange(QueryModel<WeatherForecast> queryModel)
    {
        Console.WriteLine(JsonSerializer.Serialize(queryModel));
    }
    public Task<WeatherForecast[]> GetForecastAsync(int pageIndex, int pageSize)
    {
        var rng = new Random();
        return Task.FromResult(Enumerable.Range((pageIndex - 1) * pageSize + 1, pageSize).Select(index =>
        {
            var temperatureC = rng.Next(-20, 55);
            return new WeatherForecast
                {
                    Id = index,
                    Date = DateTime.Now.AddDays(index),
                    TemperatureC = temperatureC,
                    Summary = Summaries[rng.Next(Summaries.Length)],
                    Hot = temperatureC > 30,
                };
        }).ToArray());
    }
    public void RemoveSelection(int id)
    {
        var selected = selectedRows.Where(x => x.Id != id);
        selectedRows = selected;
    }

    private void Delete(int id)
    {
        forecasts = forecasts.Where(x => x.Id != id).ToArray();
        _total = forecasts.Length;
    }
}

运行效果：

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

总结

暂无，下次再会

欢迎大家关注我的微信公众号，一起进步，一起成长

标签：settings,transform,webkit,MAUI,NET,Blazor
From： https://www.cnblogs.com/gmval/p/17013095.html

相关文章

  • .NET中使用JWT
    在控制台中使用JWT新建测试项目并安装包dotnetnewslndotnetnewconsoledotnetslnadd.dotnetaddpackageSystem.IdentityModel.Tokens.Jwt生成JWT的代码///......
  • Kubernetes 网络模型基础指南
    Kubernetes是为运行分布式集群而建立的，分布式系统的本质使得网络成为Kubernetes的核心和必要组成部分，了解Kubernetes网络模型可以使你能够正确运行、监控和排查应用程......
  • 终极.NET混淆器丨.NET Reactor产品介绍
    无与伦比的.NET代码保护系统，可完全阻止任何人反编译您的代码。  产品优势01、混淆技术.NETReactor通过向.NET程序集添加不同的保护......
  • .Net6 WebApi使用SqlSugar
    1、Nuget先引入：SqlSugarCore2、NetIOC1、注入ISqlSugarClient.NET自带的IOC使用也很方便 先封装一个操作类  //建一个扩展类publicstaticclassSqlsugarS......
  • API Key Management with API Portal 和 Spring Cloud Gateway for Kubernetes
    IgnacioLozano，KarinePires和ChrisSterling为这篇博文做出了贡献。在当今的数字化转型世界中，API几乎存在于每个软件产品中。许多团队负责部署和管理大型API组合。但是，A......
  • C# .Net Gridview
    1、分页查询导图 前台：<%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="WebGv2.aspx.cs"Inherits="WebApplication6.WebGv2"%><!DOCTYPEhtml><h......
  • 折腾了我一周，原来Netty网络编程就是这么个破玩意儿！！！
    1、阻塞阻塞模式下，相关方法都会导致线程暂停ServerSocketChannel.accept会在没有连接建立时让线程暂停SocketChannel.read会在通道中没有数据可读时让线程暂停阻塞......
  • MASA MAUI Plugin （七）应用通知角标（小红点）Android+iOS
    背景MAUI的出现，赋予了广大Net开发者开发多平台应用的能力，MAUI是Xamarin.Forms演变而来，但是相比Xamarin性能更好，可扩展性更强，结构更简单。但是MAUI对于平台相关的实现并不......
  • .net 6 swagger异常：System.IO.FileNotFoundException:“Could not find file '**\**.
    异常：System.IO.FileNotFoundException:“Couldnotfindfile'F:\.netcorestuty\Demo02\Demo02\bin\Debug\net6.0\Demo02.xml'.”解决方法：详细请见：.net6配置使用sw......
  • kubernetes的node节点无法部署pod
    尝试了网上的方法，都没有用，最后能重启机器和重启kubectl解决了报错：Failedtocreatepodsandbox:rpcerror:code=Unknowndesc=[failedtosetupsandboxcontain......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99