使用Blazor開發WinForm程式-有解無憂

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="https://www.cnblogs.com/" />
    <link href="https://www.cnblogs.com/known/archive/2022/04/02/css/font-awesome.css" rel="stylesheet" />
    <link href="https://www.cnblogs.com/known/archive/2022/04/02/css/app.css" rel="stylesheet" />
    <link href="https://www.cnblogs.com/known/archive/2022/04/02/WinApp.styles.css" rel="stylesheet" />
</head>
<body>
    <div id="app">Loading...</div>
    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" >Reload</a>
        <a >??</a>
    </div>
    <script src="https://www.cnblogs.com/known/archive/2022/04/02/_framework/blazor.webview.js"></script>
</body>
</html>

添加_Imports.razor

@using Microsoft.AspNetCore.Components.Web

添加App.razor，其中DynamicComponent是動態組件，動態顯示Home和Setting等razor頁面

<div >
    <div >
        <h1  @onclick="e => OnClickMenu(Menus[0])"></h1>
        <ul >
            @foreach (var menu in Menus)
            {
                <li  @onclick="e => OnClickMenu(menu)"></li>
            }
        </ul>
        <ul >
            <li  @onclick="e => OnClickMenu(setting)"></li>
        </ul>
    </div>
    <div >
        @if (isHome)
        {
            <div >歡迎使用XX管理系統</div>
        }
        else
        {
            <div >@title</div>
        }
        <DynamicComponent Type="@componentType" />
    </div>
</div>

@code {
    private string? code = "Home";
    private string? title = "";
    private bool isHome = true;
    private Type? componentType;

    private MenuItem setting = new MenuItem("Setting", "系統設定", "fa fa-bars", typeof(Setting));
    private MenuItem[] Menus = new MenuItem[]
    {
        new MenuItem("Home", "首頁", "fa fa-home", typeof(Home))
    };

    protected override void OnInitialized()
    {
        base.OnInitialized();
        componentType = Menus[0].Type;
    }

    private void OnClickMenu(MenuItem menu)
    {
        isHome = menu.Id == "Home";
        code = menu.Id;
        title = menu.Name;
        componentType = menu.Type;
    }

    private string Active(MenuItem menu) => code == menu.Id ? "active" : "";

    private record MenuItem(string Id, string Name, string Icon, Type Type);
}

在工具箱中拖動BlazorWebView控制元件到表單Form1中

在Form1.cs建構式中添加如下代碼：

public Form1()
{
    InitializeComponent();

    var services = new ServiceCollection();
    services.AddBlazorWebView();
    blazorWebView.HostPage = "wwwroot\\index.html";
    blazorWebView.Services = services.BuildServiceProvider();
    blazorWebView.RootComponents.Add<App>("#app");
}

添加Pages檔案夾，添加 Pages/Home.razor檔案

<h1>Home</h1>
<p role="status">Current count: @currentCount</p>
<button  @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

3.運行效果

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/455358.html

標籤：.NET技术

上一篇：基于 WPF和ASP.NET Core 在線音視頻聊天專案

下一篇：EF6基本使用