首页 > 编程语言 >【炫丽】从0开始做一个WPF+Blazor对话小程序

【炫丽】从0开始做一个WPF+Blazor对话小程序

时间:2022-11-08 02:47:33浏览次数:51  
标签:代码 public 窗体 组件 WPF Blazor 炫丽

大家好,我是沙漠尽头的狼。

.NET是免费,跨平台,开源,用于构建所有应用的开发人员平台。

本文演示如何在WPF中使用Blazor开发漂亮的UI,为客户端开发注入新活力。

要使WPF支持Blazor,.NET版本必须是 6.0 或更高版本,本文所有示例使用的.NET 7.0,版本要求见链接,截图看如下文字:

.NET版本要求

1. WPF默认程序

本文从创建WPF Hello World开发:

使用WPF模板创建一个默认程序,取名【WPFBlazorChat】,项目组织结构如下:

空白WPF项目

运行项目,一个空白窗口:

WPF项目空白窗口

接着往下看,我们添加Blazor支持,本小节代码在这WPF默认程序源码

2. 添加Blazor支持

依然使用上面的工程,添加Blazor支持,此部分参考微软文档生成 Windows Presentation Foundation (WPF) Blazor 应用,本小节快速略过。

2.1 编辑工程文件

双击工程文件WPFBlazorChat.csproj,修改处如下:

工程文件修改对比

  1. 在项目文件的顶部,将 SDK 更改为 Microsoft.NET.Sdk.Razor
  2. 添加节点<RootNameSpace>WPFBlazorChat</RootNameSpace>,将项目命名空间 WPFBlazorChat 设置为应用的根命名空间。
  3. 添加NugetMicrosoft.AspNetCore.Components.WebView.Wpf,版本看你选择的.NET版本而定。

2.2 添加_Imports.razor文件

_Imports.razor文件类似一个Global using文件,专门给Razor组件使用,放置一些用的比较多的全局的命名空间,精简代码。

内容如下,引入了一个命名空间Microsoft.AspNetCore.Components.Web,这是Razor常用命名空间,包含用于向 Blazor 框架提供有关浏览器事件的信息的类型。:

@using Microsoft.AspNetCore.Components.Web

2.3 添加wwwroot\index.html文件

VueReact一样,需要一个html文件承载Razor组件,页面内容类似:

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

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WPFBlazorChat</title>
    <base href="/" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="WpfBlazor.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">

标签:代码,public,窗体,组件,WPF,Blazor,炫丽
From: https://www.cnblogs.com/Dotnet9-com/p/16868009.html

相关文章

  • 在WPF中用DataGrid实现表格样式
    资源文件定义颜色及样式<SolidColorBrushx:Key="TextColorGeneral"Color="#a2a2a2"/><StyleTargetType="DataGridColumnHeader"><SetterProperty="Horizon......
  • 转载-Troubleshooting .NET Blazor WASM Debugging
    Troubleshooting.NETBlazorWASMDebugging Soyou’vedecidedtoboltonanexistingBlazorWebAssembly(WASM)UItoacurrentASP.NETCoresolution.First......
  • WPF 自定义控件 动画仪表盘控件 Gauge
    原文网址:https://blog.csdn.net/weixin_42850577/article/details/124008594WPF自制动画仪表盘控件Gauge  Xaml代码:<StyleTargetType="{x:Typectrl:ArcGauge......
  • 【WPF】ConfigurationManager连接sqlite数据库
     提供对客户端应用程序配置文件的访问。此类不能被继承。1、引用ConfigurationManager在Nuget引入ConfigurationManager。usingSystem.Configuration;  2、添......
  • 学习ASP.NET Core Blazor编程系列十——路由(上)
    学习ASP.NETCoreBlazor编程系列一——综述学习ASP.NETCoreBlazor编程系列二——第一个Blazor应用程序(上)学习ASP.NETCoreBlazor编程系列二——第一个Blazor应......
  • wpf
    目录学习之因学习资料学习坎坷MyApp.txt(7,4):errorCS0012:类型“Enum”在未引用的程序集中定义。必须添加对程序集“System.Runtime,Version=6.0.0.0,Culture=neutra......
  • wpf VS2017 带图片显示的自定义Combox
    先看下效果图  思路大概是将ComboxItem分为4列,然后将下拉框选中的值设置到Combox中首先新建一个wpf的工程,取名为PictureCombox1.添加需要用的png图,先导入图片两张,取......
  • WPF XAML 中参数化构造函数赋值 DataContext
    引入命名空间:xmlns:system="clr-namespace:System;assembly=mscorlib"XAML:<Windowx:Class="WpfApp.MainWindow"xmlns="http://schemas.microsoft.com/winfx......
  • WPF 的 FlowDocumentScrollViewer滚动到最底下的方法
    官网上好像并没有直接给相应的接口和方法。发现一种有效的方法:先说方法:ScrollViewersv=flowScrollViewer.Template.FindName("PART_ContentHost",flowScrollViewer)......
  • 界面组件DevExpress WPF v22.1 - 全新升级数据分析功能
    DevExpressWPF拥有120+个控件和库,将帮助您交付满足甚至超出企业需求的高性能业务应用程序。通过DevExpressWPF能创建有着强大互动功能的XAML基础应用程序,这些应用程序专......