{"id":27767967,"url":"https://github.com/xuanchenlin/winformedge","last_synced_at":"2025-04-29T19:56:46.405Z","repository":{"id":289573536,"uuid":"971522896","full_name":"XuanchenLin/WinFormedge","owner":"XuanchenLin","description":"An open source library based on Microsoft WebView2 that can buid powerful WinForm applications with HTML, CSS and JavaScript easily.","archived":false,"fork":false,"pushed_at":"2025-04-29T18:16:54.000Z","size":11302,"stargazers_count":8,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-29T19:56:43.058Z","etag":null,"topics":["dotnet","hybird-app","webview2","winform"],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/XuanchenLin.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-04-23T16:44:15.000Z","updated_at":"2025-04-29T18:16:58.000Z","dependencies_parsed_at":"2025-04-24T01:29:25.682Z","dependency_job_id":null,"html_url":"https://github.com/XuanchenLin/WinFormedge","commit_stats":null,"previous_names":["xuanchenlin/winformedge"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/XuanchenLin%2FWinFormedge","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/XuanchenLin%2FWinFormedge/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/XuanchenLin%2FWinFormedge/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/XuanchenLin%2FWinFormedge/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/XuanchenLin","download_url":"https://codeload.github.com/XuanchenLin/WinFormedge/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251574671,"owners_count":21611387,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dotnet","hybird-app","webview2","winform"],"created_at":"2025-04-29T19:56:45.740Z","updated_at":"2025-04-29T19:56:46.388Z","avatar_url":"https://github.com/XuanchenLin.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n    \u003cimg src=\"./artworks/WinFormedgeLogo.png\" width=\"144\" /\u003e\n\u003c/p\u003e\n\u003ch1 align=\"center\"\u003eThe WinFormedge Project\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\u003cstrong\u003eA library based on Microsoft WebView2 that can buid powerful WinForms applications with HTML, CSS and JavaScript easily.\u003c/strong\u003e\u003c/p\u003e\n\n# WinFormedge\n\n## ✨ About\n\n**WinFormege** is an opensource .NET library based on Microsoft WebView2. It allows developers to create modern and visually WinForms applications using HTML, CSS, and JavaScript. With WinFormedge, you can easily integrate web technologies into your WinForms projects, enabling you to build rich and interactive user interfaces.\n\nThe motivation for developing the WinFormedge project comes from another project I maintain called **WinFormium** (AKA **NanUI**). It also allows developers to create WinForms applications using Web technologies, but the difference is that WinFormium is based on the Chromium Embedded Framework (CEF). If you are more interested in the CEF-based WinFormium project, please go to the WinFormium project repository for more information.\n\n## 🖥️ Requirements\n\n**Development Environment:**\n- Visual Studio 2022\n- .NET 8.0 or higher\n\n**Deployment Environment:**\n- Windows 10 1903 or higher\n\nThis is a **Windows ONLY** library. It is not compatible with other operating systems.\n\nThe minimum supported operating system is Windows 10 version 1903 (May 2019 Update). And some fetures such as SystemBackdrop and SystemColorMode are only available on Windows 11.\n\n## 📋 Milestones\n\nThe project is currently in the early stages of development. The following milestones are planned for the project:\n\n- [ ] Implement features of the Form\n    - [x] Default Form\n    - [x] Borderless Form\n    - [x] Fullscreen mode\n    - [x] System color mode\n    - [ ] SystemBackdrop\n    - [ ] DirectCompostion Visual Tree (for CoreWebView2CompositionController)\n- [ ] Implement features of the WebView\n    - [x] WebView2Environment\n    - [x] WebView2Controller\n    - [x] Interfaces of WebView2 like WebView2 Control for WinForm\n    - [x] Custom Context Menu\n    - [x] AppRegion support\n    - [x] Resizing and Moving actions on Borderless Form\n    - [ ] Embedded File Resources for WebResourceRequest \u0026 WebResourceResponse\n    - [ ] Proxy File Resources for WebResourceRequest \u0026 WebResourceResponse\n\n## 🔧 Installation\n\nThe release of WinFormedge library is not available yet and it will be on NuGet soon after the first release. if you want to try it, you can build the library by using the source code in this moment.\n\nWhen the project is released, it will be available on NuGet. You can install it by using the NuGet Package Manager in Visual Studio.\n\n    \n## 🪄 Getting Started\n\n### Create a WinForm Application by using default project template\n\n**1. Replace initialization code by using WinFormedge application initialization procedure.**\n\nYou should use `FormedgeApp` instead of `Application` class to initialize your WinForm application in the `program.cs` file. The `FormedgeApp` class is a builder for creating a WinFormedge application. It provides methods for configuring the application and running it.\n\n```csharp\nusing WinFormedge;\n\nnamespace MinimalExampleApp;\n\ninternal static class Program\n{\n    [STAThread]\n    static void Main()\n    {\n        ApplicationConfiguration.Initialize();\n\n        var app = FormedgeApp.CreateBuilder()\n            .UseDevTools()\n            .UseWinFormedgeApp\u003cMyFormedgeApp\u003e().Build();\n\n        app.Run();\n    }\n}\n```\n\nWhen the `FormedgeApp` class is created, it will automatically initialize the WebView2 environment and run the message loop.\n\n\n**2. Create a AppStartup class.**\n\nThe `AppStartup` class is the entry point of your WinFormedge application. It provides methods for configuring the application. You can override the `OnApplicationLaunched` method to perform any initialization tasks before the application starts.\n\nAnd you must override the `OnApplicationStartup` method to create the main window of your application. If the `OnApplicationStartup` method returns values created by `StartupOptions` class, the `FormedgeApp` class will create the main window of your application. Otherwise if the `OnApplicationStartup` method returns `null` the application will be closed.\n\n```csharp\nusing WinFormedge;\n\nnamespace MinimalExampleApp;\n\ninternal class MyFormedgeApp : AppStartup\n{\n    protected override bool OnApplicationLaunched(string[] args)\n    {\n\n        return true;\n    }\n    protected override AppCreationAction? OnApplicationStartup(StartupOptions options)\n    {\n        return options.UseMainWindow(new MyWindow());\n    }\n}\n```\n\nYou can do some staffs like User Login, User Settings, etc. in the `OnApplicationStartup` method to determine using which window to start the application. Andalso you can end the application by returning `null` if conditions are not met.\n\n**3. Create a MainWindow class.**\n\nThe `MainWindow` class is the main window of your application. It inherits from the `Formedge` class. You can use the `Formedge` class to create a window with a WebView2 control.\n```csharp\nusing WinFormedge;\nusing Microsoft.Web.WebView2.Core;\n\nnamespace MinimalExampleApp;\ninternal class MyWindow : Formedge\n{\n    public MyWindow()\n    {\n        ExtendsContentIntoTitleBar = true;\n\n        Url = \"https://cn.bing.com\";\n        Size = new Size(1440, 900);\n\n        Load += MyWindow_Load;\n        DOMContentLoaded += MyWindow_DOMContentLoaded;\n    }\n\n    private void MyWindow_Load(object? sender, EventArgs e)\n    {\n        // Window and WebView2 are ready to use here.\n    }\n\n    private void MyWindow_DOMContentLoaded(object? sender, CoreWebView2DOMContentLoadedEventArgs e)\n    {\n        // The DOM content is loaded and ready to use here.\n        ExecuteScriptAsync(\"\"\"\"\n(()=\u003e{\nconst headerEl = document.querySelector(\"#hdr\");\nheaderEl.style.appRegion=\"drag\";\n})();\n\"\"\"\");\n    }\n}\n```\n\nCodes above creates a `Formedge` window. By using `Url` property, you can set the initial URL of the window. Sets the `ExtendsContentIntoTitleBar` property to `true` to extend the WebView into the non-client area of the window to create a borderless window. You can also set the `Size` property to set the initial size of the window.\n\nThe `Load` event is raised when the window and WebView2 are ready to use. You can use this event to perform any initialization tasks that require the WebView2 control to be ready.\n\nThe `DOMContentLoaded` event is raised when the DOM content is loaded and ready to use. You can use this event to perform any tasks that require the DOM content to be loaded. As you can see in the example, you can use the `ExecuteScriptAsync` method to execute JavaScript code in the WebView2 control. The JavaScript code in the example sets the `appRegion` property of the header element to `drag`, which allows the user to drag the window by clicking and dragging the element on these rectangles.\n\n**4. Run the application.**\n\nYou can run the application by pressing `F5` in Visual Studio. The application will create a window with a WebView2 control that displays the Bing homepage. \n\n![PREVIEW](./docs/preview.png)\n\nYou can drag the window by clicking and dragging the header element of the page and resize the window by dragging the edges of the window. \n\n## 📚 Documentation\n\nThe documentation for the WinFormedge project is not available yet. However, you can find the source code and examples in the `src` and `examples` folders. The source code is well-documented and provides examples of how to use the WinFormedge library right now.\n\n\n## 🛠️ Contributing\n\nContributions are welcome! If you have any ideas, suggestions, or bug reports, please feel free to open an issue or submit a pull request.\n\n## 📄 License\n\nThis project is licensed under the MIT License. See the [LICENSE](./LICENSE) file for details.\n\n## Acknowledgements\n\n- [Microsoft WebView2](https://developer.microsoft.com/en-us/microsoft-edge/webview2/)\n- [Chromium Embedded Framework](https://bitbucket.org/chromiumembedded/cef)\n- [NanUI](https://github.com/XuanchenLin/NanUI)\n- [WinFormium](https://github.com/XuanchenLin/WinFormium)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxuanchenlin%2Fwinformedge","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxuanchenlin%2Fwinformedge","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxuanchenlin%2Fwinformedge/lists"}