Moment For Technology

Abandon winForm and use HTML as the interface, the new way to develop desktop application UI.

Posted on Jan. 31, 2023, 2:25 p.m. by Alan Ross
Category: The back-end Tag: The back-end

Have done a lot of Winform project, winform control headache unceasingly. It's always hard to achieve something pretty. Here are a few disadvantages:

1. Winform controls are mostly absolute layout, you need to give accurate coordinates. It's going to be hard to center.

2. Learn the cost and understand the structure and properties of each control. It takes a lot of time to become more proficient.

3. It will take a long time to realize the cost of interface, adjust various forms and control styles to the effect of prototype diagram.

4. Maintenance, need to know WINFROM programmers to maintain.


With that in mind, when I got to Android, I found it interesting how android implemented its UI, using XML to describe views and using Windows to wrap activities around each window. Can we use this format for desktop application development? So for my new project, I started using a new development approach:

1. Write an HTML description UI, similar to an Android layout file.

2. Prepare a form as a host and place a WebBrowser control inside the form as a display control that can display HTML directly

3. Specify an ObjectForScripting object for the webbrowser control, which is usually an instance of a c# implemented class. This object implements the DOM model that can interact with the HTML implementation in the WebBrowser control. It provides a channel to call javascript in this ObjectForScripting object and use javascript to call methods in this object.

Based on the above approach I implemented a simple framework.

1. Write a basic ControlSupport, which is the base class for all ObjectForScripting objects. Used to interact with HTML.

2. The onCreate method must be implemented in ControlSupport, which will be loaded at creation time.

3. Implement the SetContentUrl method for ControlSupport, specifying a local HTML file to the WebBrowser control so that it can be displayed.

4. Implement the InvokeScript method for ControlSupport, where methods in JS can be called.

5. In JS, you can call the methods in ControlSupport by using the following methods.

if (typeof window.external.getMaterialList ! = "undefined") {/ / triggers the browser background method, this method only happen in our winform procedure window. The external. GetMaterialList (callback_getMaterialList); }Copy the code

6. With the above implementation, the ControlSupport class looks like an activity (page in Android), and I have implemented a stack that will display pages at the top of the stack. So with the power of this stack, we can do form jump and return.


Through the above means. We can almost do this with HTML. The effect is very cool, finally can get rid of winform control. It is very simple to implement the various representations. HTML, on the other hand, is more flexible.

Post a picture. The following interface is implemented in this way, with only the winForm control at the top. The navigation on the left and the content area on the bottom right are HTML pages. The effect looks completely integrated.

About (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.