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

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();

文章插图
4.5 尝试Masa.Blazor案例上面4步的准备工作做好后，我们简单来使用下Masa.Blazor组件。
打开Tab组件链接：https://blazor.masastack.com/components/tabs，尝试这个Demo：

文章插图
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();}}

运行效果如下：