浙江龙网

  1. 首页 > 生活百科 > >

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

生活百科

运行效果如下：

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

文章插图
是不是有那味儿了？再尝试把Tab移到标题栏，前面有提过的效果：
【炫丽】从0开始做一个WPF+Blazor对话小程序

文章插图
上面的效果 ， 代码修改如下，删除了_原题为栏代码，将窗体操作按钮放到了MToolbar里面 ， 并使用MToolbar添加了双击事件、鼠标按下、释放事件实现窗体拖动：
<MApp><!--新增的Masa.Blazor Tab案例代码开始--><MCard><MToolbar Color="cyan" Dark Flat @ondblclick="WindowService.Maximize" @onmouseup="WindowService.StopMove" @onmousedown="WindowService.StartMove"><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><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></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>窗体操作按钮的背景色也做部分修改：
【炫丽】从0开始做一个WPF+Blazor对话小程序

文章插图
其实上面的窗体效果还是有点瑕疵，注意到窗体右侧的竖直滚动条了吗？在没引入Masa.Blazor之前，右侧正常显示，引入后多了一个竖直滚动条：
【炫丽】从0开始做一个WPF+Blazor对话小程序

文章插图
这个想去掉也简单，在wwwroot\css\app.css追加样式（当时也是折腾了好一会儿，最后在Masa.Blazor群里群友给出了解决方案 ， 十分感谢）：
【炫丽】从0开始做一个WPF+Blazor对话小程序

文章插图
问题解决css代码：
::-webkit-scrollbar {width: 0px;}因为Razor组件是在BlazorWebView里渲染的，即BlazorWebView就是个小型的浏览器呀，上面的样式即把浏览器的滚动条宽度设置为0，它不就没有了吗？现在效果如下，是不是舒服了？
【炫丽】从0开始做一个WPF+Blazor对话小程序

文章插图
添加Masa.Blazor就介绍到这里，本小节示例代码在这里WPF中使用Masa.Blazor,下面讲解WPF与Blazor混合开发后多窗体消息通知问题 。
5. 多窗体消息通知一般C/S窗体之间通信使用委托、事件，而在WPF开发中，可以使用一些框架提供的抽象事件订阅\发布组件，比如Prism的事件聚集器IEventAggregator ， 或MvvmLight的Messager 。在B/S开发中 ， 进程内事件通知可能就使用MediatR组件居多了 ， 不论是在C/S还是B/S开发 ， 这些组件在一定程度上，各大程序模板可以通用的，更不用说分布式的消息队列RabbitMQ 和 Kafka是万能的进程间通信标准选择了 。
上面是一些套话，站长根据Prism的事件聚集器和MvvmLight的Messager源码阅读，简单封装了一个Messager，可以适用于一般的业务需求 。
5.1 Messager封装本来不想贴代码直接给源码链接的 ， 想想代码也不多 ， 直接上吧 。
Message
消息抽象类，用于定义消息类型，具体的消息需要继承该类，比如后面的打开子窗体消息OpenSecondViewMessage 。
using System;namespace WPFBlazorChat.Messages;public abstract class Message{protected Message(object sender){this.Sender = sender ?? throw new ArgumentNullException(nameof(sender));}public object Sender { get; }}

推荐阅读


上一篇：day12-Servlet02

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