建置 Windows Forms Blazor 應用程式
注意
這不是這篇文章的最新版本。 如需目前版本,請參閱本文的 .NET 8 版本。
警告
不再支援此版本的 ASP.NET Core。 如需詳細資訊,請參閱 .NET 和 .NET Core 支援原則。 如需目前版本,請參閱本文的 .NET 8 版本。
本教學課程說明如何建置和執行 Windows Forms Blazor 應用程式。 您將學習如何:
- 建立 Windows Forms Blazor 應用程式專案
- 在 Windows 上執行此應用程式
必要條件
- 支援的平台 (Windows Forms 文件)
- 包含 .NET 桌面開發工作負載的 Visual Studio 2022
Visual Studio 工作負載
如果未安裝 .NET 桌面開發工作負載,請使用 Visual Studio 安裝程式來安裝工作負載。 如需詳細資訊,請參閱修改 Visual Studio 工作負載、元件和語言套件。
建立 Windows Forms Blazor 專案
啟動 Visual Studio。 在 [開始視窗] 中,選取 [建立新專案]:
在 [建立新專案] 對話方塊中,將 [專案類型] 下拉式清單篩選為 [桌面]。 選取 Windows Forms 應用程式的 C# 專案範本,然後選取 [下一步] 按鈕:
在 [設定新專案] 對話方塊中:
- 將 [專案名稱] 設為 WinFormsBlazor。
- 為專案選擇適當的位置。
- 選取下一步按鈕。
在 [其他資訊] 對話方塊中,使用 [架構] 下拉式清單選取架構版本。 選取 [建立] 按鈕:
使用 NuGet 套件管理員安裝Microsoft.AspNetCore.Components.WebView.WindowsForms
NuGet 套件:
在 [方案總管] 中,以滑鼠右鍵按一下專案的名稱, WinFormsBlazor,然後選取 [編輯專案檔],以開啟專案檔 (WinFormsBlazor.csproj
)。
在專案檔的頂端,將 SDL 變更為 Microsoft.NET.Sdk.Razor
:
<Project Sdk="Microsoft.NET.Sdk.Razor">
將您的變更儲存至專案屬性 (WinFormsBlazor.csproj
)。
使用 Microsoft.AspNetCore.Components.Web 的 @using
指示詞,將 _Imports.razor
檔案新增至專案的根目錄。
_Imports.razor
:
@using Microsoft.AspNetCore.Components.Web
儲存_Imports.razor
檔案。
將 wwwroot
資料夾新增至專案。
將 index.html
檔案新增至具有下列標記的 wwwroot
資料夾。
wwwroot/index.html
:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WinFormsBlazor</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="WinFormsBlazor.styles.css" rel="stylesheet" />
</head>
<body>
<div id="app">Loading...</div>
<div id="blazor-error-ui" data-nosnippet>
An unhandled error has occurred.
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.webview.js"></script>
</body>
</html>
在 wwwroot
資料夾內,建立 css
資料夾來保存樣式表單。
將 app.css
樣式表單新增至具有下列內容的 wwwroot/css
資料夾。
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;
}
在 wwwroot/css
資料夾內,建立 bootstrap
資料夾。 在 bootstrap
資料夾中,放置 bootstrap.min.css
的複本。 您可以從 Bootstrap 網站取得最新版的 bootstrap.min.css
。 無法在這裡提供直接連結,因為網站中的所有內容都在 URL 中設定版本。 因此,請遵循瀏覽列連結,前往 [文件]>[下載]以取得 bootstrap.min.css
。
將下列 Counter
元件新增至專案的根目錄,這是在 Blazor 專案範本中找到的預設 Counter
元件。
Counter.razor
:
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
private void IncrementCount()
{
currentCount++;
}
}
儲存 Counter
元件 (Counter.razor
)。
在 [方案總管] 中,按兩下 Form1.cs
檔案以開啟設計工具:
選取 Visual Studio 視窗左邊緣的 [工具箱] 按鈕,或選取 [檢視工具箱]> 功能表命令,以開啟 [工具箱]。
在 Microsoft.AspNetCore.Components.WebView.WindowsForms
下找出 BlazorWebView
控制項。 將 BlazorWebView 從 [工具箱] 拖曳至 Form1
設計工具。 請小心不要不小心將 WebView2
控制項拖曳到表單中。
Visual Studio 會在表單設計工具中顯示 BlazorWebView 控制項為 WebView2
,並自動命名控制項為 blazorWebView1
:
在 Form1
中,按一下即可選取 BlazorWebView (WebView2
)。
在 BlazorWebView 的 [屬性] 中,確認控制項名為 blazorWebView1
。 如果名稱不是 blazorWebView1
,則會從 [工具箱] 拖曳錯誤的控制項。 刪除 Form1
中的 WebView2
控制項,並將控制項BlazorWebView
拖曳到表單中。
在控制項的屬性中,將 BlazorWebView 的 [固定] 值變更為 [填滿]:
在 Form1
設計工具中,以滑鼠右鍵按一下 Form1
,然後選取 [檢視程式碼]。
將 Microsoft.AspNetCore.Components.WebView.WindowsForms 和 Microsoft.Extensions.DependencyInjection 的命名空間新增至 Form1.cs
檔案頂端:
using Microsoft.AspNetCore.Components.WebView.WindowsForms;
using Microsoft.Extensions.DependencyInjection;
在 Form1
建構函式的 InitializeComponent
方法呼叫之後,新增下列程式碼:
var services = new ServiceCollection();
services.AddWindowsFormsBlazorWebView();
blazorWebView1.HostPage = "wwwroot\\index.html";
blazorWebView1.Services = services.BuildServiceProvider();
blazorWebView1.RootComponents.Add<Counter>("#app");
注意
InitializeComponent
方法會在應用程式建置階段自動產生,並新增至呼叫類別的編譯物件。
最後,使用檔案範圍的命名空間完成 Form1.cs
C# 程式碼:
using Microsoft.AspNetCore.Components.WebView.WindowsForms;
using Microsoft.Extensions.DependencyInjection;
namespace WinFormsBlazor;
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
var services = new ServiceCollection();
services.AddWindowsFormsBlazorWebView();
blazorWebView1.HostPage = "wwwroot\\index.html";
blazorWebView1.Services = services.BuildServiceProvider();
blazorWebView1.RootComponents.Add<Counter>("#app");
}
}
執行應用程式
在 Visual Studio 工具列中選取 [開始] 按鈕:
在 Windows 上執行應用程式:
下一步
在本教學課程中,您已了解如何:
- 建立 Windows Forms Blazor 應用程式專案
- 在 Windows 上執行此應用程式
深入了解 Blazor Hybrid 應用程式: