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

就上面三处修改,我们运行看看:

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

文章插图
是不是和3.3效果一样?其实仔细看,窗体下面的圆角也有了:
【炫丽】从0开始做一个WPF+Blazor对话小程序

文章插图
最终还是WPF解决了所有问题...
【炫丽】从0开始做一个WPF+Blazor对话小程序

文章插图
具体怎么实现的窗体最大化未占操作系统的任务栏,以及窗体圆角问题的解决(竟然能让BlazorWebView部分透明了)可以查看该组件相关代码,本文不过多深究 。
另外,WPF熟手可能比较清楚,前面的代码还不能正常的拖动改变窗体大小(不知道你发现没,我当你没发现 。),使用该库后也解决了:
【炫丽】从0开始做一个WPF+Blazor对话小程序

文章插图
本小节源码在这解决圆角和最大化问题,下面开始本文的下半部分了,好累,终于到这了 。
【炫丽】从0开始做一个WPF+Blazor对话小程序

文章插图
4. 添加第三方Blazor组件工欲善其事,必先利其器!
鉴于大部分同学前端基础可能不是太好,即使使用Blazor可以少用或者不用JavaScript,但有那么一款漂亮、便捷的Blazor组件库,这不是如虎添翼吗?本文使用Masa Blazor做示例展示,如今Blazor组件库众多,选择自己喜欢的、顺手的就成:
【炫丽】从0开始做一个WPF+Blazor对话小程序

文章插图
站长前些日子介绍过MAUI使用Masa blazor组件库一文,本小节思路也是类似,且看我表演 。
【炫丽】从0开始做一个WPF+Blazor对话小程序

文章插图
打开Masa Blazor文档站点:https://blazor.masastack.com/getting-started/installation,一起来往WPF中引入这款Blazor组件库吧 。
4.1 引入Masa.Blazor包打开工程文件WPFBlazorChat.csproj直接复制下面的包版本,或通过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>

经验总结扩展阅读