浙江龙网

  1. 首页 > 生活百科 > >

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

生活百科

大家好，我是沙漠尽头的狼 。

.NET是免费，跨平台，开源，用于构建所有应用的开发人员平台 。
本文演示如何在WPF中使用Blazor开发漂亮的UI，为客户端开发注入新活力 。
注 要使WPF支持Blazor ， .NET版本必须是 6.0 或更高版本，本文所有示例使用的.NET 7.0，版本要求见链接，截图看如下文字：
【炫丽】从0开始做一个WPF+Blazor对话小程序

文章插图
1. WPF默认程序本文从创建WPF Hello World开发：
使用WPF模板创建一个默认程序，取名【WPFBlazorChat】，项目组织结构如下：
【炫丽】从0开始做一个WPF+Blazor对话小程序

文章插图
运行项目，一个空白窗口：
【炫丽】从0开始做一个WPF+Blazor对话小程序

文章插图
接着往下看，我们添加Blazor支持，本小节代码在这WPF默认程序源码 。
2. 添加Blazor支持依然使用上面的工程，添加Blazor支持，此部分参考微软文档生成 Windows Presentation Foundation (WPF) Blazor 应用，本小节快速略过 。
2.1 编辑工程文件双击工程文件WPFBlazorChat.csproj，修改处如下：
【炫丽】从0开始做一个WPF+Blazor对话小程序

文章插图
  1. 在项目文件的顶部，将 SDK 更改为 Microsoft.NET.Sdk.Razor 。
  2. 添加节点<RootNameSpace>WPFBlazorChat</RootNameSpace>，将项目命名空间 WPFBlazorChat 设置为应用的根命名空间 。
  3. 添加Nuget包Microsoft.AspNetCore.Components.WebView.Wpf，版本看你选择的.NET版本而定 。
2.2 添加_Imports.razor文件_Imports.razor文件类似一个Global using文件，专门给Razor组件使用，放置一些用的比较多的全局的命名空间，精简代码 。
内容如下，引入了一个命名空间Microsoft.AspNetCore.Components.Web，这是Razor常用命名空间 ， 包含用于向 Blazor 框架提供有关浏览器事件的信息的类型 。：
@using Microsoft.AspNetCore.Components.Web2.3 添加wwwroot\index.html文件和Vue、React一样，需要一个html文件承载Razor组件，页面内容类似：
<!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" /></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>
  1. app.css文件在下面给出定义 。
  2. 看<div id="app">Loading...</div>，这里是承载Razor组件的地方，后面所有加载的Razor组件都是在这里渲染出来的 。
  3. 其他暂时不管 。
2.4 添加wwwroot\css\app.css文件页面的基本样式 ， 通用的样式可放在这个文件：
html, body {font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;}h1:focus {outline: none;}a, .btn-link {color: #0071c1;}.btn-primary {color: #fff;background-color: #1b6ec2;border-color: #1861ac;}.valid.modified:not([type=checkbox]) {outline: 1px solid #26b050;}.invalid {outline: 1px solid red;}.validation-message {color: red;}#blazor-error-ui {background: lightyellow;bottom: 0;box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);display: none;left: 0;padding: 0.6rem 1.25rem 0.7rem 1.25rem;position: fixed;width: 100%;z-index: 1000;}#blazor-error-ui .dismiss {cursor: pointer;position: absolute;right: 0.75rem;top: 0.5rem;}2.5 添加一个Razor组件加一个Razor的经典组件Counter.razor，Blazor的Hello World程序就有这么一个组件，文件路径：/RazorViews/Counter.razor，之所以放RazorViews目录，是为了和WPF常用的Views目录区分，该组件内容如下：
<h1>Counter</h1><p>好开心，你点我了，现在是:<span style="color: red;">@currentCount</span></p><button class="btn btn-primary" @onclick="IncrementCount">快快点我</button>@code {private int currentCount = 0;private void IncrementCount(){currentCount++;}}

推荐阅读


上一篇：day12-Servlet02

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