1. 關於Blazor Blazor是微軟出品的前端框架,對標谷歌的Flutter,用C#、css、html語言開發前端UI,組件化設計,支持嵌套組件與大多數前端框架react、vue等類似,不同的是開發語言不是JavaScript,但是它可以與JavaScript互操作。Host模式支持Blazo ...
1. 關於Blazor
Blazor是微軟出品的前端框架,對標谷歌的Flutter,用C#、css、html語言開發前端UI,組件化設計,支持嵌套組件與大多數前端框架react、vue等類似,不同的是開發語言不是JavaScript,但是它可以與JavaScript互操作。Host模式支持Blazor Server、Blazor WebAssembly和Blazor Hybrid(MAUI、WPF、WinForm),可用它來開發Web、移動App、桌面應用。
2.創建WinForm步驟
-
打開VS2022,創建新項目,選擇Windows窗體應用,將工程文件sdk改成 Microsoft.NET.Sdk.Razor
-
添加 NuGet 包 Web 和 WebView.WindowsForms,創建後的工程文件如下:
<Project Sdk="Microsoft.NET.Sdk.Razor"> <PropertyGroup> <OutputType>WinExe</OutputType> <TargetFramework>net6.0-windows</TargetFramework> <Nullable>enable</Nullable> <UseWindowsForms>true</UseWindowsForms> <ImplicitUsings>enable</ImplicitUsings> </PropertyGroup> <ItemGroup> <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="6.0.3" /> <PackageReference Include="Microsoft.AspNetCore.Components.WebView.WindowsForms" Version="6.0.101-preview.11.2349" /> </ItemGroup> </Project>
-
添加 wwwroot 文件夾,添加 index.html 和 css/app.css
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>WinApp</title> <base href="/" /> <link href="css/font-awesome.css" rel="stylesheet" /> <link href="css/app.css" rel="stylesheet" /> <link href="WinApp.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">