首页 > 其他分享 >wpf项目如何使用blazor组件

wpf项目如何使用blazor组件

时间:2024-08-11 11:05:17浏览次数:12  
标签:Razor 文件 blazor html rem 组件 wpf WPF

依然使用上面的工程,添加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文件,放置一些全局的命名空间,精简代码。

内容如下,引入了一个命名空间Microsoft.AspNetCore.Components.Web,这是Razor常用命名空间:

@using Microsoft.AspNetCore.Components.Web

2.3 添加wwwroot\index.html文件

和Vue\React一样,需要一个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">

标签:Razor,文件,blazor,html,rem,组件,wpf,WPF
From: https://www.cnblogs.com/zhuoss/p/18353178

相关文章

  • 简单在 WinUI 仿造 WPF 的 ColumnDefinition SharedSizeGroup 共享列宽功能
    本文将告诉大家如何在WinUI3或UNO里面,仿造WPF的ColumnDefinitionSharedSizeGroup共享列宽功能本文的实现代码是大量从https://github.com/Qiu233/WinUISharedSizeGroup抄的,感谢大佬提供的代码。我在此基础上简化了对Behavior的依赖,在本文末尾放上了全部代码的下载......
  • http.sys 是 IIS 的底层组件,负责高效、安全地处理 HTTP 请求,而 IIS 则提供了更高层次
    IIS(InternetInformationServices)和http.sys是MicrosoftWindows操作系统中的两个相关组件,它们一起工作来处理和管理HTTP请求。以下是它们的关系和功能:IIS:Web服务器:IIS是Microsoft的Web服务器软件,提供了用于托管和管理Web应用程序的功能,包括网站、应用程序......
  • Vue 标准开发方式与组件、插槽的高效使用
    目录一、Vue.js的标准开发方式二、组件的使用1.全局组件2.局部组件3.Props和事件传递三、插槽的使用1.默认插槽2.具名插槽3.作用域插槽四、动态组件五、异步组件六、高阶组件(HOC)七、插槽的进阶用法条件插槽插槽作用域访问        Vue.js......
  • React深度解析三:高级用法HOC、Hooks、异步组件
    本文分文三部分:HOC高阶组件higherordercomponentHooks16.8版本后新增的钩子API异步组件使用lazy和suspense两个api实现组件代码打包分割和异步加载一、HOC高阶组件1、定义高阶组件不是组件而是函数,是react中用于复用组件逻辑的高级技巧,HOC本身不是react一部分,是基于......
  • 08 Button 组件
    08Button组件Button组件是tkinter中用于创建可交互按钮的组件,它允许用户通过点击按钮来触发特定的事件或执行命令。Button组件是构建交互式图形用户界面的基础。基本用法与可选属性基本用法创建Button组件的基本语法如下:importtkinterastkroot=tk.Tk()......
  • 计算属性-监听属性,生命周期,组件,组件通信之父传子,组件通信之子传父,ref属性
    Ⅰ计算属性-监听属性【一】计算属性:computed#1本质是一个函数,但是当属性用 计算属性是基于它们的依赖进行缓存的计算属性只有在它的相关依赖发生改变时才会重新求值计算属性就像Python中的property,可以把方法/函数伪装成属性#2计算属性和普通函数的区别 ......
  • react函数组件实现调用摄像头拍摄功能
    importReact,{useEffect,useRef,useState}from'react'exportdefaultfunctionPaiZhao(){  constcameraVideoRef=useRef(null);  constcameraCanvasRef=useRef(null);  const[Img,setImg]=useState("")  useEffect((......
  • React性能之--如何避免组件重复渲染?
         在react中,我们会发现存在组件会重复渲染,虽然说如果项目不大的话,这点影响不大,但是我们还是尽量避免组件渲染比较好,养成好习惯,尽可能让不管是大小项目,都让性能尽可能优化。那我们如何避免组件重复渲染呢?  一、在React中,可以通过以下几种方法来避免组件重复......
  • vue-页面高亮展示code代码组件
     在main.js里引用组件importhljsfrom"highlight.js";import"highlight.js/styles/atom-one-dark.css";Vue.directive("highlight",function(el){letblocks=el.querySelectorAll("precode");blocks.forEach((block)......
  • 如何快速开始进行echart组件开发
    1、定义chart组件<template><divref="chart"></div></template><script>importelementResizeDetectorfrom"element-resize-detector";import*asechartsfrom"echarts/core";import{LineChart,Ba......