共用方式為


建置 Windows Forms Blazor 應用程式

注意

這不是這篇文章的最新版本。 如需目前版本,請參閱本文的 .NET 8 版本

警告

不再支援此版本的 ASP.NET Core。 如需詳細資訊,請參閱 .NET 和 .NET Core 支援原則。 如需目前版本,請參閱本文的 .NET 8 版本

重要

這些發行前產品的相關資訊在產品正式發行前可能會有大幅修改。 Microsoft 對此處提供的資訊,不做任何明確或隱含的瑕疵擔保。

如需目前版本,請參閱本文的 .NET 8 版本

本教學課程說明如何建置和執行 Windows Forms Blazor 應用程式。 您將學習如何:

  • 建立 Windows Forms Blazor 應用程式專案
  • 在 Windows 上執行此應用程式

必要條件

Visual Studio 工作負載

如果未安裝 .NET 桌面開發工作負載,請使用 Visual Studio 安裝程式來安裝工作負載。 如需詳細資訊,請參閱修改 Visual Studio 工作負載、元件和語言套件

Visual Studio 安裝程式 .NET 桌面開發工作負載選取項目。

建立 Windows Forms Blazor 專案

啟動 Visual Studio。 在 [開始視窗] 中,選取 [建立新專案]

在 Visual Studio 中建立新的解決方案。

在 [建立新專案] 對話方塊中,將 [專案類型] 下拉式清單篩選為 [桌面]。 選取 Windows Forms 應用程式的 C# 專案範本,然後選取 [下一步] 按鈕:

在 Visual Studio 中建立新專案。

在 [設定新專案] 對話方塊中:

  • 將 [專案名稱] 設為 WinFormsBlazor
  • 為專案選擇適當的位置。
  • 選取下一步按鈕。

設定專案。

在 [其他資訊] 對話方塊中,使用 [架構] 下拉式清單選取架構版本。 選取 [建立] 按鈕:

[其他資訊] 對話方塊。

使用 NuGet 套件管理員安裝Microsoft.AspNetCore.Components.WebView.WindowsFormsNuGet 套件:

在 Visual Studio 中使用 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 檔案以開啟設計工具:

[方案總管] 中的 Form1.cs 檔案。

選取 Visual Studio 視窗左邊緣的 [工具箱] 按鈕,或選取 [檢視工具箱]> 功能表命令,以開啟 [工具箱]

Microsoft.AspNetCore.Components.WebView.WindowsForms 下找出 BlazorWebView 控制項。 將 BlazorWebView 從 [工具箱] 拖曳至 Form1 設計工具。 請小心不要不小心將 WebView2 控制項拖曳到表單中。

[工具箱] 中的 BlazorWebView。

Visual Studio 會在表單設計工具中顯示 BlazorWebView 控制項為 WebView2,並自動命名控制項為 blazorWebView1

Form1 設計工具中的BlazorWebView。

Form1 中,按一下即可選取 BlazorWebView (WebView2)。

BlazorWebView 的 [屬性] 中,確認控制項名為 blazorWebView1。 如果名稱不是 blazorWebView1,則會從 [工具箱] 拖曳錯誤的控制項。 刪除 Form1 中的 WebView2 控制項,並將控制項BlazorWebView拖曳到表單中。

BlazorWebView 會自動由 Visual Studio 命名為「blazorWebView1」。

在控制項的屬性中,將 BlazorWebView 的 [固定] 值變更為 [填滿]

Dock 列 BlazorWebView 屬性設定為填滿。

Form1 設計工具中,以滑鼠右鍵按一下 Form1,然後選取 [檢視程式碼]

Microsoft.AspNetCore.Components.WebView.WindowsFormsMicrosoft.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 工具列中選取 [開始] 按鈕:

Visual Studio 工具列的 [開始] 按鈕。

在 Windows 上執行應用程式:

在 Windows 上執行的應用程式。

下一步

在本教學課程中,您已了解如何:

  • 建立 Windows Forms Blazor 應用程式專案
  • 在 Windows 上執行此應用程式

深入了解 Blazor Hybrid 應用程式: