Get started with the good-looking and performant Blazor Hybrid in Winform in one minute

Get started using Blazor Hybrid, which looks good and performs good in Winform

Install template

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

Create Winform’s Blazor Hybrid project

dotnet new masablazor-winform -n WinformDesktop
 

After creation, open the project file WinformDesktop.csproj file

Open future project files and start the project

This is a simple project demo provided

We only need to use the template provided by masa Blazor and get started in one minute. All you need to do is go to the Masa Blazor component library to get the CV code.

And Masa Blazor also provides Blazor online editor to experience Masa Blazor components

MASA Try (masastack.com) can be accessed through this address and supports online editing of Masa Blazor components and dynamic rendering.

A simple explanation of Blazor layering

​ 1. The following code exists in the MainFrom file of Winform

The first process is to create a ServiceCollection to register the service and then bind it to BlazorWebView! After binding the specified html and BlazorWebView, bind the Blazor component to the element with the ID of app in the html and bind it to the App component of the Blazor component;

2. The role of App.razor component
   

We see the picture above. There is a Router component outside the component, which is used to register routing components and scan all routing components under the real assembly of App.

DefaultLayout under Found is the default bound Layout component,

NotFound is the component of Layout that is bound when no route is found. The current code is bound to the component of MainLayout, then All routes will use the MainLayout component.

3. MainLayout.razorThe role of the component
   

   The code of the current component is included in MApp. This is how to use Masa Blazor. All components of Masa Blazor must be in MApp Used in, the current MainLayout.razor component uses a default layout. When the specified page is loaded, the components of the page will be rendered in @Body, which is equivalent to Regarding the reusability of component layout, the components of Shared should be Layout components or menu bar components, which are easier to reuse.

4. Components under Pages
   

Looking at the picture above, there is a code of @page "/" at the top of the Pages/Index.razor component. This is to route and bind the current component. When the resource loads the / route, it will load the current component into the @Body in the specified Layout component.

5. Component reuse
   

In daily projects, I recommend creating a Components folder. Under the folder are the components of the project interface that have been carefully split. The advantage of this is that the components are easy to reuse. Of course, It will require certain abilities for developers, but the maintainability of the component interface is better!

End

Masa Blazor
Sharing from token

Technical exchange group: 737776595