在Winform中一分钟入门使用好看性能还好的Blazor Hybrid

安装模板

dotnet new install Masa.Template::1.0.0-rc.2

创建 Winform的Blazor Hybrid项目

dotnet new masablazor-winform -n WinformDesktop

创建完成打开项目文件WinformDesktop.csproj文件

打开以后的项目文件，启动项目

这是提供的简单的项目Demo

我们只需要使用masa Blazor提供的模板，一分钟入门使用，你要做的只需要去Masa Blazor组件库去CV代码，

并且Masa Blazor也提供了Blazor在线编辑器去体验Masa Blazor的组件

MASA Try (masastack.com) 可以通过这个地址访问，支持在线编辑Masa Blazor组件，动态渲染。

Blazor分层简单讲解

​ 1. 在Winform的MainFrom的文件中存在一下代码

首先流程是先创建一个ServiceCollection，用于注册服务，在和BlazorWebView进行绑定！将指定的html和BlazorWebView绑定以后在对于html内的id为app的元素进行Blazor组件的绑定绑定到Blazor组件的App组件中；

  1. App.razor组件的作用

我们看到上图， 上线在组件外部有一个Router组件，用于注册路由组件，并且扫描App的实在程序集下所有的路由组件

Found下的DefaultLayout则是默认绑定的Layout组件，

NotFound则是当未找到路由时绑定的Layout的组件，当前代码都绑定到了MainLayout的组件，则所有路由都会使用MainLayout的组件。

  1. MainLayout.razor组件的作用

    当前组件的代码包括在MApp中，这是Masa Blazor的使用方法，所有Masa Blazor的组件都必须在MApp中使用，当前的MainLayout.razor组件使用的一个默认的布局，当加载指定页面的时候页面的组件会渲染在@Body中，这就相当于组件的布局的复用性，对于Shared的组件尽量都是Layout组件，或者菜单栏的组件，更容易复用。

  2. Pages下的组件

看到上图，在Pages/Index.razor组件最上面有一个@page "/"的代码，这个是给当前的组件进行路由绑定，资源当加载/路由的时候就会将当前的组件加载到指定的Layout的组件中的@Body当中。

  1. 组件复用

在日常项目当中，我建议创建Components文件夹，文件夹下面则是项目的界面的组件被细致拆分的组件，这样的好处就是组件易于复用，当然也会对于开发者来说需要一定的能力，但是对于组件界面的可维护性更好！

结尾

来自token的分享

技术交流群：737776595

在Winform中一分钟入门使用好看性能还好的Blazor Hybrid的更多相关文章

  1. Shell脚本编程30分钟入门

    Shell脚本编程30分钟入门 转载地址: Shell脚本编程30分钟入门 什么是Shell脚本 示例 看个例子吧: #!/bin/sh cd ~ mkdir shell_tut cd shell_t ...

  2. Objective-C 30分钟入门教程

    Objective-C 30分钟入门教程 我第一次看OC觉得这个语言的语法有些怪异,为什么充满了@符号,[]符号,函数调用没有()这个,但是面向对象的高级语言也不外乎类,接口,多态,封装,继承等概念. ...

  3. Apache Shiro系列三，概述 —— 10分钟入门

     一.介绍 看完这个10分钟入门之后,你就知道如何在你的应用程序中引入和使用Shiro.以后你再在自己的应用程序中使用Shiro,也应该可以在10分钟内搞定. 二.概述 关于Shiro的废话就不多说了 ...

  4. JavaScript 10分钟入门

    JavaScript 10分钟入门 随着公司内部技术分享(JS进阶)投票的失利,先译一篇不错的JS入门博文,方便不太了解JS的童鞋快速学习和掌握这门神奇的语言. 以下为译文,原文地址:http://w ...

  5. 十分钟入门less(翻译自：Learn lESS in 10 Minutes(or less))

    十分钟入门less(翻译自:Learn lESS in 10 Minutes(or less)) 注:本文为翻译文章,因翻译水平有限,难免有缺漏不足之处,可查看原文. 我们知道写css代码是非常枯燥的 ...

  6. 30分钟入门Java8之方法引用

    30分钟入门Java8之方法引用 前言 之前两篇文章分别介绍了Java8的lambda表达式和默认方法和静态接口方法.今天我们继续学习Java8的新语言特性--方法引用(Method Referenc ...

  7. 30分钟入门Java8之默认方法和静态接口方法

    30分钟入门Java8之默认方法和静态接口方法 前言 上一篇文章30分钟入门Java8之lambda表达式,我们学习了lambda表达式.现在继续Java8新语言特性的学习,今天,我们要学习的是默认方 ...

  8. 【原创】30分钟入门 github

    很久没更新了,这篇文章重点在github的入门使用,读者可以下载github for windows shell,边看边操作,加深印象. 好了,30分钟的愉快之旅开始吧: 一.github使用的注意事 ...

  9. 正则表达式30分钟入门教程<转载>

    来园子之前写的一篇正则表达式教程,部分翻译自codeproject的The 30 Minute Regex Tutorial. 由于评论里有过长的URL,所以本页排版比较混乱,推荐你到原处查看,看完了 ...

  10. kafka原理和实践（一）原理：10分钟入门

    系列目录 kafka原理和实践(一)原理:10分钟入门 kafka原理和实践(二)spring-kafka简单实践 kafka原理和实践(三)spring-kafka生产者源码 kafka原理和实践( ...

随机推荐

  1. JS一切皆对象理解

    对象都是通过函数创建的 function Fn() { this.name = '王福朋'; this.year = 1988; } var fn1 = new Fn(); fn1是个对象,它是由函数 ...

  2. JS中关于原型对象与原型链的理解！

    1.首先我们先来看一张图 prototype 每个函数都有一个 prototype 属性每一个JavaScript对象(null除外)在创建的时候就会与之关联另一个对象,这个对象就是我们所说的原型,每 ...

  3. innerHTML和outerHTML区别

     1.innerHTML <body> <p>你好</p> <div id="test"><h5>就是喜欢你</h ...

  4. jQ-DOM属性的操作

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. Ubuntu+uWSGI部署基于Django的API【鸿篇巨制，事无巨细】

    背景 任务: 视频翻译项目需要在两个服务器上进行通信(国内&海外的阿里服务器). 因为python是主语言,选用了Django 来快速部署API. 注:Django中文文档:https://d ...

  6. ACM-NEFUOJ-P209湖南修路

    思路 prim的最小生成树,套上肝就完事了 代码 #include<iostream> #include<cstdio> #include<string.h> #d ...

  7. IDA 逆 WDF 驱动时的函数识别插件

    快一年没更新了,累,工作累,各种累,想换个工作,突然发现找不到合适的工作了,哎,自己往火坑里跳,怪不得别人. import idautils import idaapi import idc prin ...

  8. Java----＞枚举类

    自定义的枚举类 package doy1; /** * @author shkstart * @create 2021-10-28 19:23 */ /** * 一.枚举类的使用 * 1.枚举类的理解 ...

  9. 系统评价——主成分分析PCA的R语言实现（六）

    主成分分析(Principal Component Analysis,PCA),是将多个变量通过线性变换以选出较少个数重要变量的一种多元统计分析方法,起到数据约减和集成的作用.在许多领域的研究与应用中 ...

  10. Python中实现单例的几种方式

    Python如何实现单例? 什么是单例模式? 单例模式:一个类只能有一个实例化对象存在的模式. 如何实现单例? 1.使用模块 python中模块是天然的单例模式,当一个模块被调用时,会生成对应的.py ...