【炫丽】从0开始做一个WPF+Blazor对话小程序( 五 ) _生活百科

上面的一些代码即实现了由Razor组件实现窗体的标题显示、窗体的最小化、最大化（还原）、关闭、移动等操作，然而还是会有3.1结尾出现的问题，即窗体圆角和窗体最大化铺满操作系统桌面任务栏的问题，下面一小节我们尝试解决他。
小节总结：通过上面的代码，如果放Tab控件铺满整个窗体，是不是有思路了？
本小节源码在这Razor组件实现窗体标题栏功能
3.4 Blazor与WPF比较完美的实现效果其实上面的代码可以当做学习，即使有不小瑕疵（哈哈），本小节我们还是使用第三包解决窗体圆角和最大化问题。
首先添加Nuget包ModernWpfUI，该WPF控件库本站介绍链接开源WPF控件库：ModernWpf：
<PackageReference Include="ModernWpfUI" Version="0.9.7-preview.2" />然后打开App.xaml，引用上面开源WPF控件的样式：
<Application x:Class="WPFBlazorChat.App"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:ui="http://schemas.modernwpf.com/2019"StartupUri="MainWindow.xaml"><Application.Resources><ResourceDictionary><ResourceDictionary.MergedDictionaries><ui:ThemeResources /><ui:XamlControlsResources /></ResourceDictionary.MergedDictionaries></ResourceDictionary></Application.Resources></Application>最后打开MainWindow.xaml，修改如下（主要是引入的几个属性ui:xxxxx）：
<Window x:Class="WPFBlazorChat.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:ui="http://schemas.modernwpf.com/2019"xmlns:blazor="clr-namespace:Microsoft.AspNetCore.Components.WebView.Wpf;assembly=Microsoft.AspNetCore.Components.WebView.Wpf"xmlns:razorViews="clr-namespace:WPFBlazorChat.RazorViews"mc:Ignorable="d"Title="MainWindow" Height="450" Width="800"ui:TitleBar.ExtendViewIntoTitleBar="True"ui:TitleBar.IsBackButtonVisible="False"ui:TitleBar.Style="{DynamicResource AppTitleBarStyle}"ui:WindowHelper.UseModernWindowStyle="True"><Border Background="#7160E8" CornerRadius="5"><blazor:BlazorWebView HostPage="wwwroot\index.html" Services="{DynamicResource services}"><blazor:BlazorWebView.RootComponents><blazor:RootComponent Selector="#app" ComponentType="{x:Type razorViews:Counter}" /></blazor:BlazorWebView.RootComponents></blazor:BlazorWebView></Border></Window>就上面三处修改，我们运行看看：

文章插图
是不是和3.3效果一样？其实仔细看，窗体下面的圆角也有了：

文章插图
最终还是WPF解决了所有问题...

文章插图
具体怎么实现的窗体最大化未占操作系统的任务栏，以及窗体圆角问题的解决（竟然能让BlazorWebView部分透明了）可以查看该组件相关代码，本文不过多深究。
另外，WPF熟手可能比较清楚，前面的代码还不能正常的拖动改变窗体大?。ú恢滥惴⑾置? ，我当你没发现。），使用该库后也解决了：

文章插图
本小节源码在这解决圆角和最大化问题，下面开始本文的下半部分了，好累，终于到这了。

文章插图
4. 添加第三方Blazor组件工欲善其事，必先利其器！
鉴于大部分同学前端基础可能不是太好，即使使用Blazor可以少用或者不用JavaScript，但有那么一款漂亮、便捷的Blazor组件库，这不是如虎添翼吗？本文使用Masa Blazor做示例展示，如今Blazor组件库众多，选择自己喜欢的、顺手的就成：

文章插图
站长前些日子介绍过MAUI使用Masa blazor组件库一文，本小节思路也是类似，且看我表演。

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