专业编程基础技术教程

网站首页 > 基础教程 正文

桌面程序嵌套Web项目实践之WPF和Blazor混合应用开发

ccvgpt 2025-01-16 18:17:43 基础教程 1 ℃

前言

WPF作为Windows平台上强大且成熟的桌面应用程序开发技术，拥有丰富的UI控件库、强大的数据绑定机制和丰富的图形渲染能力，与此同时，Blazor作为一种基于Web的新兴技术，无需学习JavaScript。Blazor借助WebAssembly技术，使Web项目代码能够在桌面程序中运行。因此，将WPF和Blazor结合起来开发混合应用，成为了一种可以落地实践的做法。因为可以充分发挥两者的优势，弥补彼此的不足。通过这种方式，可以利用WPF强大的桌面开发能力，同时又能够借助Blazor实现跨平台部署，使应用程序能够同时运行在Windows平台和Web浏览器中，从而实现一份代码，多端运行的目标。

下面我们来实践下混合开发的带来的奇妙体验，跟着步骤，一起来：

桌面程序嵌套Web项目实践之WPF和Blazor混合应用开发

一、创建 WPF 应用

在 Visual Studio 中创建一个新的WPF项目,命名为WpfBlazorApp。

二、修改项目文件

对其项目 （.csproj） 文件进行一些修改。在“解决方案资源管理器”中，右键单击项目名称“WpfBlazorApp”，然后选择“编辑项目文件”以访问项目文件 （WpfBlazorApp.csproj）,项目文件最初的样子。

我们需要先在这里做一些改变。

  1. <Project Sdk> 元素： 这指定了项目使用的 SDK。此 SDK 提供用于构建项目的工具、编译器和其他必要组件。我们需要将其从<Project Sdk=“Microsoft.NET.Sdk”>更改为<Project Sdk=“Microsoft.NET.Sdk.Razor”>。通过此更改，该项目将利用 Razor 语法和功能来创建动态 Web 内容。
  2. <PropertyGroup>中的<RootNamespace>：这是项目的根命名空间。现在，我们需要将其设置为 WpfBlazorApp，项目中的所有代码文件都属于此命名空间。这有助于避免不同命名空间之间的命名冲突。

三、添加Microsoft.AspNetCore.Components.WebView.Wpf组件包

Microsoft.AspNetCore.Components.WebView.Wpf 是一个 .NET 库，用于在 WPF应用程序中承载 Blazor WebAssembly 应用程序。这个库允许将基于 Web 的用户界面嵌入到 WPF 应用程序中，从而充分利用 Blazor WebAssembly 的功能和优势。

核心技术：Build WPF apps with Blazor and WebView2.

四、创建 wwwroot/Index.html 文件

每个 Web 应用程序都需要一个 wwwroot 文件夹。将一个添加到您的项目中，并将起始文件（将Index.HTML）放入其中。以下是该index的内容

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WpfBlazorApp</title>
    <base href="/" />
</head>

<body>
    <div id="app">Loading...</div>
    <script src="_framework/blazor.webview.js"></script>
</body>

</html>

五、添加新的 Razor 组件

创建一个 Razor 组件。将名为“QuickGridExample”的组件添加到项目的根目录。此组件演示一个快速网格。

可以使用 QuickGrid，需要从 NuGet 包安装“Microsoft.AspNetCore.Components.QuickGrid”组件。添加如下代码：

@using Microsoft.AspNetCore.Components.QuickGrid

<h1> Displaying C# Programming Books </h1>
<h3>C# Programming Books</h3>

<QuickGrid Items="@cSharpBooks">
    <PropertyColumn Title="Title" Property="@(b => b.Title)" Sortable="true" />
    <PropertyColumn Title="Author" Property="@(b => b.Author)" Sortable="true" />
    <PropertyColumn Title="Publication Year"  Property="@(b => b.PublicationYear)" Format="yyyy" Sortable="true" />
</QuickGrid>

@code {
    record CSharpBook(string Title, string Author, DateTime PublicationYear);
    private IQueryable<CSharpBook> cSharpBooks = new List<CSharpBook>
    {
        new CSharpBook("C# in Depth", "Jon Skeet", new DateTime(2019, 1, 1)),
        new CSharpBook("Effective C#: 50 Specific Ways to Improve Your C#", "Bill Wagner", new DateTime(2017, 1, 1)),
        new CSharpBook("CLR via C#", "Jeffrey Richter", new DateTime(2012, 1, 1)),
        new CSharpBook("Pro C# 7: With .NET and .NET Core", "Andrew Troelsen, Philip Japikse", new DateTime(2017, 1, 1)),
        new CSharpBook("C# Programming Yellow Book", "Rob Miles", new DateTime(2014, 1, 1)),
        new CSharpBook("Head First C#", "Andrew Stellman, Jennifer Greene", new DateTime(2013, 1, 1)),
        new CSharpBook("Programming C# 8.0: Build Cloud, Web, and Desktop Applications", "Ian Griffiths", new DateTime(2019, 1, 1)),
        new CSharpBook("C# 7.0 in a Nutshell: The Definitive Reference", "Joseph Albahari, Ben Albahari", new DateTime(2017, 1, 1)),
        new CSharpBook("Essential C# 8.0", "Mark Michaelis", new DateTime(2019, 1, 1))
    }.AsQueryable();
}

最终的文件夹结构如下所示。

六、从 XAML 窗口集成 Razor 组件

将 WPF 窗口与刚刚创建的 Blazor 组件进行映射。打开“MainWindow.xaml”文件并添加以下命名空间。

xmlns:blazor="clr-namespace:Microsoft.AspNetCore.Components.WebView.Wpf;assembly=Microsoft.AspNetCore.Components.WebView.Wpf"

MainWindow.Xaml 中的修改

<Window x:Class="WpfBlazorApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfBlazorApp"
        xmlns:blazor="clr-namespace:Microsoft.AspNetCore.Components.WebView.Wpf;assembly=Microsoft.AspNetCore.Components.WebView.Wpf"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <blazor:BlazorWebView HostPage="wwwroot\index.html" Services="{DynamicResource services}">
            <blazor:BlazorWebView.RootComponents>
                <blazor:RootComponent Selector="#app" ComponentType="{x:Type local:QuickGridExample}" />
            </blazor:BlazorWebView.RootComponents>
        </blazor:BlazorWebView>
    </Grid>
</Window>

MainWindow.xaml.cs文件中添加如下代码：

namespace WpfBlazorApp
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            var serviceCollection = new ServiceCollection();
            serviceCollection.AddWpfBlazorWebView();
            Resources.Add("services", serviceCollection.BuildServiceProvider());
        }
    }
}

运行

运行成功，Wpf加载的html页面

让我们进行一些外观更改以增强其 UI。向组件添加样式。

<style>
    table {
        border-collapse: collapse;
        width: 100%;
        border: 2px solid #ccc;
    }

    th, td {
        padding: 12px;
        text-align: left;
        border-bottom: 1px solid #ddd;
    }

    h1, h3 {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        color: #333;
        text-align: center;
    }

    th {
        background-color: #28b463;
        color: white;
        font-weight: bold;
        font-size: 16px;
        border: none;
    }

    tr:nth-child(even) {
        background-color: #f2f2f2;
    }

    th:hover {
        background-color: #45a049;
    }
</style>

再次运行项目



结论

WPF 和 Blazor 的融合开发，代表了桌面程序嵌套Web项目开发越来越容易，在某些特定的场合，混合开发带了的优势非常明显。在本文中，我们探讨了从设置 WPF 项目到合并 Razor 组件以及将 Razor 组件与 WPF 绑定的集成过程。学习了如何在 WPF 应用程序中呈现 HTML 内容。借助 WPF 和 Blazor，可以在混合应用开发中开辟新的领域，这将塑造跨不同平台的用户体验的未来。

如果本文对你有帮助，我将非常荣幸。

如果你对WPF和Blazor混合应用开发非常熟悉或者有其他的方式开发混合应用，欢迎留言交流。

如果你喜欢我的文章，谢谢三连，点赞，关注，转发吧！！

#春曰生活打卡季# #编程经验# #记录我的2024# #自律学习计划#

Tags：

猜你喜欢

最近发表
标签列表