浙江龙网

  1. 首页 > 生活百科 > >

【炫丽】从0开始做一个WPF+Blazor对话小程序( 六 )

生活百科

NuGet包管理器搜索Masa.Blazor安装：
<PackageReference Include="Masa.Blazor" Version="0.6.0" />4.2 添加Masa.Blazor带来的资源打开wwwroot\index.html，在<head></head>节点添加如下资源：
<link href="https://www.huyubaike.com/biancheng/_content/Masa.Blazor/css/masa-blazor.min.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="https://www.huyubaike.com/biancheng/_content/BlazorComponent/js/blazor-component.js"></script>完整代码如下：
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>WPFBlazorChat</title><base href="https://www.huyubaike.com/" /><link href="https://www.huyubaike.com/biancheng/css/app.css" rel="stylesheet" /><link href="https://www.huyubaike.com/biancheng/WpfBlazor.styles.css" rel="stylesheet" /><link href="https://www.huyubaike.com/biancheng/_content/Masa.Blazor/css/masa-blazor.min.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="https://www.huyubaike.com/biancheng/_content/BlazorComponent/js/blazor-component.js"></script></head><body><div id="app">Loading...</div><div id="blazor-error-ui">An unhandled error has occurred.<a href="" class="reload">Reload</a><a class="dismiss"></a></div><script src="https://www.huyubaike.com/biancheng/_framework/blazor.webview.js"></script></body></html>4.3 引入Masa.Blazor命名空间打开_Imports.razor文件 ， 修改如下：
@using Microsoft.AspNetCore.Components.Web@using Masa.Blazor@using BlazorComponent4.4 Razor组件添加Masa.Blazor打开MainWindow.xaml.cs，添加一行代码 serviceCollection.AddMasaBlazor();

【炫丽】从0开始做一个WPF+Blazor对话小程序

文章插图
4.5 尝试Masa.Blazor案例上面4步的准备工作做好后，我们简单来使用下Masa.Blazor组件 。
打开Tab组件链接：https://blazor.masastack.com/components/tabs，尝试这个Demo：
【炫丽】从0开始做一个WPF+Blazor对话小程序

文章插图
Demo的代码我几乎不变的引入，打开RazorViews\Counter.razor文件 ， 保留3.4节的标题栏 ， 替换了客户区域内容，代码如下：
@using WPFBlazorChat.Services<MApp><!--上一小节的标题栏开始--><div class="titlebar" @ondblclick="WindowService.Maximize" @onmouseup="WindowService.StopMove" @onmousedown="WindowService.StartMove"><button class="titlebar-btn" onclick="alert('js alert: navigation pressed');"><img src="https://www.huyubaike.com/biancheng/svg/navigation.svg"/></button><div class="window-title">测试窗体标题</div><div style="flex-grow: 1"></div><button class="titlebar-btn" onclick="alert('js alert: settings pressed');"><img src="https://www.huyubaike.com/biancheng/svg/settings.svg"/></button><button class="titlebar-btn" @onclick="WindowService.Minimize"><img src="https://www.huyubaike.com/biancheng/svg/minimize.svg"/></button><button class="titlebar-btn" @onclick="WindowService.Maximize">@if (WindowService.IsMaximized()){<img src="https://www.huyubaike.com/biancheng/svg/restore.svg"/>}else{<img src="https://www.huyubaike.com/biancheng/svg/maximize.svg"/>}</button><button class="titlebar-cbtn" @onclick="() => WindowService.Close(false)"><img src="https://www.huyubaike.com/biancheng/svg/dismiss.svg"/></button></div><!--上一小节的标题栏结束--><!--新增的Masa.Blazor Tab案例代码开始--><MCard><MToolbar Color="cyan" Dark Flat><ChildContent><MAppBarNavIcon></MAppBarNavIcon><MToolbarTitle>Your Dashboard</MToolbarTitle><MSpacer></MSpacer><MButton Icon><MIcon>mdi-magnify</MIcon></MButton><MButton Icon><MIcon>mdi-dots-vertical</MIcon></MButton></ChildContent><ExtensionContent><MTabs @bind-Value="https://www.huyubaike.com/biancheng/tab"AlignWithTitleSliderColor="yellow">@foreach (var item in items){<MTab Value="https://www.huyubaike.com/biancheng/item">@item</MTab>}</MTabs></ExtensionContent></MToolbar><MTabsItems @bind-Value="https://www.huyubaike.com/biancheng/tab">@foreach (var item in items){<MTabItem Value="https://www.huyubaike.com/biancheng/item"><MCard Flat><MCardText>@text</MCardText></MCard></MTabItem>}</MTabsItems></MCard><!--新增的Masa.Blazor Tab案例代码结束--></MApp>@code {#region Masa.Blazor Tab案例C#代码StringNumber tab;List<string> items = new(){"web", "shopping", "videos", "images", "news",};string text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";#endregionprotected override void OnInitialized(){WindowService.Init();base.OnInitialized();}}

推荐阅读


上一篇：day12-Servlet02

下一篇：JVM学习笔记——内存模型篇