发帖
翼度科技»论坛 › 编程开发 › .net › 查看内容

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

年少再无少年

11

主题

11

帖子

33

积分

新手上路

Rank: 1

积分
33
显示全部楼层
大致了解了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中也可以看到
  1. [/code]现在已经有个很多基于Blazor的组件库，所以暂时把默认的bootstrap替换成第三方组件库，这里使用的是AntDesignBlazor。
  2. [size=6]使用AntDesignBlazor 组件库[/size]
  4. [size=5]安装依赖：[/size]
  6. [code]PM> NuGet\Install-Package AntDesign.ProLayout -Version 0.13.1
复制代码
注入AntDesign

在MauiProgram.cs注入AntDesign 服务与设置基本配置，完整的MauiProgram.cs代码
  1. using Microsoft.Extensions.Logging;
  2. using MauiBlazorApp.Data;
  4. namespace MauiBlazorApp;
  6. public static class MauiProgram
  7. {
  8.         public static MauiApp CreateMauiApp()
  9.         {
  10.                 var builder = MauiApp.CreateBuilder();
  11.                 builder
  12.                         .UseMauiApp<App>()
  13.                         .ConfigureFonts(fonts =>
  14.                         {
  15.                                 fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
  16.                         });
  18.                 builder.Services.AddMauiBlazorWebView();
  20. #if DEBUG
  21.                 builder.Services.AddBlazorWebViewDeveloperTools();
  22.                 builder.Logging.AddDebug();
  23. #endif
  25.                 builder.Services.AddSingleton<WeatherForecastService>();
  26.         //注入AntDesign
  27.         builder.Services.AddAntDesign();
  28.                 //基本配置
  29.                 builder.Services.Configure<ProSettings>(settings =>
  30.                 {
  31.             settings.NavTheme = "light";
  32.             settings.Layout = "side";
  33.             settings.ContentWidth = "Fluid";
  34.                         settings.FixedHeader = false;
  35.                         settings.FixSiderbar = true;
  36.             settings.Title = "DotNet宝藏库";
  37.                         settings.PrimaryColor = "daybreak";
  38.                         settings.ColorWeak = false;
  39.                         settings.SplitMenus= false;
  40.                         settings.HeaderRender= true;
  41.                         settings.FooterRender= false;
  42.                         settings.MenuRender= true;
  43.                         settings.MenuHeaderRender= true;
  44.                         settings.HeaderHeight = 48;
  46.                 });
  47.                 return builder.Build();
  48.         }
  49. }
复制代码
配置项都写上了。参数含义从表达的意思就能看出来，不做注释了！
引入样式

打开wwwroot/index.html。由于我们使用的是AntDesign，所以需要改造下index.html，修改后内容如下：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
  6.     <title>DotNet宝藏库</title>
  7.     <base href="/" />
  8.    
  9.     <link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet" />
  10.     <link rel="stylesheet" href="_content/AntDesign.ProLayout/css/ant-design-pro-layout-blazor.css" />
  11. </head>
  13. <body>
  15.    
  17.    
  18.         
  19.         
  20.             
  21.                
  22.                     
  23.                         <i ></i><i ></i><i ></i><i ></i>
  24.                     
  25.                
  26.             
  27.             
  28.                  
  29.             
  30.         
  31.    
  33.    
  35.    
  36.    
  37. </body>
  39. </html>
复制代码
加入命名空间

在_Imports.razor添加AntDesign命名空间：
  1. @using System.Net.Http
  2. @using Microsoft.AspNetCore.Components.Forms
  3. @using Microsoft.AspNetCore.Components.Routing
  4. @using Microsoft.AspNetCore.Components.Web
  5. @using Microsoft.AspNetCore.Components.Web.Virtualization
  6. @using Microsoft.JSInterop
  7. @using MauiBlazorApp
  8. @using MauiBlazorApp.Shared
  9. //引入AntDesign
  10. @using AntDesign
复制代码
设置容器

在Main.razor中加入
  1. <Router AppAssembly="@typeof(Main).Assembly">
  2.     <Found Context="routeData">
  3.         <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
  4.         <FocusOnNavigate RouteData="@routeData" Selector="h1" />
  5.     </Found>
  6.     <NotFound>
  7.         <LayoutView Layout="@typeof(MainLayout)">
  8.             <p role="alert">Sorry, there's nothing at this address.</p>
  9.         </LayoutView>
  10.     </NotFound>
  11. </Router>
  13. <AntContainer />
复制代码
修改 MainLayout


  • 修改MainLayout.razor。
  • 把MainLayout.razor中默认布局删除
  • 引入AntDesign.ProLayout
  • 设置布局为AntDesign.ProLayout
  • 构造菜单、页脚的链接、版权
  • wwwroot目录下新建个文件夹images，把提前准备好的logo放进去
完整代码如下：
  1. @using AntDesign.ProLayout
  2. @inherits LayoutComponentBase
  4. <AntDesign.ProLayout.BasicLayout
  5.     Logo="@("images/logo.png")"
  6.     MenuData="MenuData">
  7.     <ChildContent>
  8.         @Body
  9.     </ChildContent>
  10.     <FooterRender>
  11.         <FooterView Copyright="MauiBlazorApp" Links="Links"></FooterView>
  12.     </FooterRender>
  13. </AntDesign.ProLayout.BasicLayout>
  14. <SettingDrawer />
  16. @code
  17. {
  18.     private readonly MenuDataItem[] MenuData =
  19.         {
  20.         new MenuDataItem
  21.         {
  22.             Path = "/",
  23.             Name = "Home",
  24.             Key = "Home",
  25.             Icon = "home"
  26.         },
  27.         new MenuDataItem
  28.         {
  29.             Path = "/Counter",
  30.             Name = "Counter",
  31.             Key = "Counter",
  32.             Icon = "plus"
  33.         },
  34.         new MenuDataItem
  35.         {
  36.             Path = "/FetchData",
  37.             Name = "FetchData",
  38.             Key = "FetchData",
  39.             Icon = "cloud"
  40.         }
  41.     };
  42.     private readonly LinkItem[] Links =
  43.     {
  44.         new LinkItem
  45.         {
  46.             Key = "DotNet宝藏库",
  47.             Title = "基于Ant Design Blazor",
  48.             Href = "https://antblazor.com",
  49.             BlankTarget = true
  50.         }
  51.     };
  52. }
复制代码
这时可以把项目中无用的内容删除掉了，如Shared/NavMenu.razor、wwwroot/css文件。
由于删除掉了css文件夹，页面元素肯定没有样式了。那么就简单的改造下默认的几个页面！
改造默认页面

index.razor

打开Pages/Index.razor，将演示组件SurveyPrompt 删掉。顺便把Shared/SurveyPrompt.razor也删除掉。将Hello, world!


替换为Ant Design组件。
  1. @page "/"
  3. <Title Level="1">Hello,DotNet宝藏库</Title>
  5. <br />
  6. <Text Type="success">欢迎关注我的公众号！</Text>
复制代码
Counter.razor

打开 Pages/Counter.razor,将代码改为如下：
  1. @page "/counter"
  3. <Title Level="2">HCounter</Title>
  5. <p role="status">Current count: @currentCount</p>
  7. <Button @onclick="IncrementCount" Type="primary">AntDesign 按钮</Button>
  8. @code {
  9.     private int currentCount = 0;
  11.     private void IncrementCount()
  12.     {
  13.         currentCount++;
  14.     }
  15. }
复制代码
FetchData.razor

打开Pages/FetchData.razor，将数据表格替换为Ant Design，删除页面所有代码，替换为Ant Design的示例！
  1. @page "/fetchdata"
  2. @using System.ComponentModel
  3. @using AntDesign.TableModels
  4. @using System.Text.Json
  6. @using MauiBlazorApp.Data
  7. @inject WeatherForecastService ForecastService
  9. <Table @ref="table"
  10.        TItem="WeatherForecast"
  11.        DataSource="@forecasts"
  12.        Total="_total"
  13.        @bind-PageIndex="_pageIndex"
  14.        @bind-PageSize="_pageSize"
  15.        @bind-SelectedRows="selectedRows"
  16.        OnChange="OnChange">
  17.     <Selection Key="@(context.Id.ToString())" />
  18.     <PropertyColumn Property="c=>c.Id" Sortable />
  19.     <PropertyColumn Property="c=>c.Date" Format="yyyy-MM-dd" Sortable />
  20.     <PropertyColumn Property="c=>c.TemperatureC" Sortable />
  21.     <PropertyColumn Title="Temp. (F)" Property="c=>c.TemperatureF" />
  22.     <PropertyColumn Title="Hot" Property="c=>c.Hot">
  23.         <Switch @bind-Value="@context.Hot"></Switch>
  24.     </PropertyColumn>
  25.     <PropertyColumn Property="c=>c.Summary" Sortable />
  26.     <ActionColumn>
  27.         <Space>
  28.             <SpaceItem><Button Danger OnClick="()=>Delete(context.Id)">Delete</Button></SpaceItem>
  29.         </Space>
  30.     </ActionColumn>
  31. </Table>
  32. <br />
  33. <p>PageIndex: @_pageIndex | PageSize: @_pageSize | Total: @_total</p>
  35. <br />
  36. <h5>selections:</h5>
  37. @if (selectedRows != null && selectedRows.Any())
  38. {
  39.     <Button Danger Size="small" OnClick="@(e => { selectedRows = null; })">Clear</Button>
  41.     @foreach (var selected in selectedRows)
  42.     {
  43.         <Tag @key="selected.Id" Closable OnClose="e=>RemoveSelection(selected.Id)">@selected.Id - @selected.Summary</Tag>
  44.     }
  45. }
  47. <Button Type="@ButtonType.Primary" OnClick="()=> { _pageIndex--; }">Previous page</Button>
  48. <Button Type="@ButtonType.Primary" OnClick="()=> { _pageIndex++; }">Next Page</Button>
  50. @code {
  51.     private WeatherForecast[] forecasts;
  52.     IEnumerable<WeatherForecast> selectedRows;
  53.     ITable table;
  54.     int _pageIndex = 1;
  55.     int _pageSize = 10;
  56.     int _total = 0;
  58.     protected override async Task OnInitializedAsync()
  59.     {
  60.         forecasts = await GetForecastAsync(1, 50);
  61.         _total = 50;
  62.     }
  63.     public class WeatherForecast
  64.     {
  65.         public int Id { get; set; }
  67.         [DisplayName("Date")]
  68.         public DateTime? Date { get; set; }
  70.         [DisplayName("Temp. (C)")]
  71.         public int TemperatureC { get; set; }
  73.         [DisplayName("Summary")]
  74.         public string Summary { get; set; }
  76.         public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
  78.         public bool Hot { get; set; }
  79.     }
  80.     private static readonly string[] Summaries = new[]
  81.     {
  82.         "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
  83.     };
  84.     public void OnChange(QueryModel<WeatherForecast> queryModel)
  85.     {
  86.         Console.WriteLine(JsonSerializer.Serialize(queryModel));
  87.     }
  88.     public Task<WeatherForecast[]> GetForecastAsync(int pageIndex, int pageSize)
  89.     {
  90.         var rng = new Random();
  91.         return Task.FromResult(Enumerable.Range((pageIndex - 1) * pageSize + 1, pageSize).Select(index =>
  92.         {
  93.             var temperatureC = rng.Next(-20, 55);
  94.             return new WeatherForecast
  95.                 {
  96.                     Id = index,
  97.                     Date = DateTime.Now.AddDays(index),
  98.                     TemperatureC = temperatureC,
  99.                     Summary = Summaries[rng.Next(Summaries.Length)],
  100.                     Hot = temperatureC > 30,
  101.                 };
  102.         }).ToArray());
  103.     }
  104.     public void RemoveSelection(int id)
  105.     {
  106.         var selected = selectedRows.Where(x => x.Id != id);
  107.         selectedRows = selected;
  108.     }
  110.     private void Delete(int id)
  111.     {
  112.         forecasts = forecasts.Where(x => x.Id != id).ToArray();
  113.         _total = forecasts.Length;
  114.     }
  115. }
复制代码
运行效果：





总结

暂无，下次再会
欢迎大家关注我的微信公众号，一起进步，一起成长

来源:https://www.cnblogs.com/gmval/archive/2022/12/29/17013095.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x

上一篇: .NET Core 实现后台任务（定时任务)

下一篇: EFCore 动态拼接查询条件(表达式树方式)

发表于 2023-1-2 16:57:17

举报 回复 使用道具

返回列表 发新帖

Archiver|手机版|小黑屋|翼度科技

Copyright © 2001-2020, Tencent Cloud.　Powered by Discuz! X3.4