# 在Winform中一分鐘入門使用好看性能還好的Blazor Hybrid ## 安裝模板 ```shell dotnet new install Masa.Template::1.0.0-rc.2 ``` ## 創建 Winform的Blazor Hybrid項目 ```shell dotnet ...
在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組件中；
App.razor組件的作用
我們看到上圖， 上線在組件外部有一個Router組件，用於註冊路由組件，並且掃描App的實在程式集下所有的路由組件
Found下的DefaultLayout則是預設綁定的Layout組件，
NotFound則是當未找到路由時綁定的Layout的組件，當前代碼都綁定到了MainLayout的組件，則所有路由都會使用MainLayout的組件。
-
MainLayout.razor組件的作用
當前組件的代碼包括在
MApp中，這是Masa Blazor的使用方法，所有Masa Blazor的組件都必須在MApp中使用，當前的MainLayout.razor組件使用的一個預設的佈局，當載入指定頁面的時候頁面的組件會渲染在@Body中，這就相當於組件的佈局的復用性，對於Shared的組件儘量都是Layout組件，或者菜單欄的組件，更容易復用。 -
Pages下的組件
看到上圖，在Pages/Index.razor組件最上面有一個@page "/"的代碼，這個是給當前的組件進行路由綁定，資源當載入/路由的時候就會將當前的組件載入到指定的Layout的組件中的@Body當中。
- 組件復用
在日常項目當中，我建議創建Components文件夾，文件夾下麵則是項目的界面的組件被細緻拆分的組件，這樣的好處就是組件易於復用，當然也會對於開發者來說需要一定的能力，但是對於組件界面的可維護性更好！
結尾
Masa Blazor
來自token的分享
技術交流群：737776595
