首页 > 编程语言 >【炫丽】从0开始做一个WPF+Blazor对话小程序

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

时间:2022-12-11 12:36:23浏览次数:63  
标签:代码 public 窗体 组件 WPF Blazor 炫丽

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

.NET是免费,跨平台,开源,用于构建所有应用的开发人员平台。

本文演示如何在​​WPF​​​中使用​​Blazor​​开发漂亮的UI,为客户端开发注入新活力。

要使WPF支持Blazor,​​.NET​​​版本必须是 6.0 或更高版本,本文所有示例使用的.NET 7.0,版本要求见​​链接​​,截图看如下文字:

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

1. WPF默认程序

本文从创建WPF ​​Hello World​​开发:

使用WPF模板创建一个默认程序,取名【WPFBlazorChat】,项目组织结构如下:

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

运行项目,一个空白窗口:

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

接着往下看,我们添加Blazor支持,本小节代码在这​​WPF默认程序源码​​。

2. 添加Blazor支持

依然使用上面的工程,添加Blazor支持,此部分参考微软文档​​生成 Windows Presentation Foundation (WPF) Blazor 应用​​,本小节快速略过。

2.1 编辑工程文件

双击工程文件​​WPFBlazorChat.csproj​​,修改处如下:

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

  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.Web

2.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="/" />
<link href="css/app.css" rel="stylesheet" />
<link href="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">

标签:代码,public,窗体,组件,WPF,Blazor,炫丽
From: https://blog.51cto.com/u_15469207/5928206

相关文章