WinFormedge

https://github.com/xuanchenlin/winformedge
Admin
WinFormedge is an open-source .NET library built on Microsoft WebView2, enabling developers to...
Tokens:11,505
Snippets:105
Trust Score:8.9
License:MIT
Update:3 months ago
Show doc for...
Tokens:
Raw
### Install WinFormedge via NuGet

Source: https://github.com/xuanchenlin/winformedge/blob/master/README.md

Use the NuGet Package Manager console to install the WinFormedge library.

```bash
PM> Install-Package WinFormedge
```

--------------------------------

### Install WinFormedge Package

Source: https://github.com/xuanchenlin/winformedge/blob/master/docs/getting-started.md

Methods to add the WinFormedge dependency to your project.

```bash
Install-Package WinFormedge
```

```bash
dotnet add package WinFormedge
```

```xml
<PackageReference Include="WinFormedge" Version="1.1.*" />
```

--------------------------------

### Define AppStartup Class

Source: https://github.com/xuanchenlin/winformedge/blob/master/README.md

Implement the AppStartup class to handle application launch logic and define the main window startup settings.

```csharp
using WinFormedge;

namespace MinimalExampleApp;

internal class MyFormedgeApp : AppStartup
{
    protected override bool OnApplicationLaunched(string[] args)
    {

        return true;
    }
    protected override AppCreationAction? OnApplicationStartup(StartupSettings options)
    {
        return options.UseMainWindow(new MyWindow());
    }
}
```

--------------------------------

### Initialize Blazor Hybrid in MainWindow

Source: https://github.com/xuanchenlin/winformedge/blob/master/src/WinFormedge.Blazor/README.md

Configure the Formedge window to host the Blazor component.

```csharp
using WinFormedge;
using WinFormedge.Blazor;

namespace BlazorHybridExampleApp;

internal class MainWindow : Formedge
{
    public MainWindow()
    {
        Url = "https://blazorapp.local/";
        Load += MainWindow_Load;
    }

    private void MainWindow_Load(object? sender, EventArgs e)
    {
        this.SetVirtualHostNameToBlazorHybrid(new BlazorHybridOptions
        {
            Scheme = "https",
            HostName = "blazorapp.local",
            RootComponent = typeof(Counter),
            HostPath = "wwwroot/index.html"
        });
    }
}
```

--------------------------------

### HostWindowBuilder.UseDefaultWindow()

Source: https://github.com/xuanchenlin/winformedge/blob/master/docs/window-styles.md

Initializes the window with default settings, returning a DefaultWindowSettings object that can be further customized.

```APIDOC
## HostWindowBuilder.UseDefaultWindow()

### Description
Initializes the window with a standard WinFormedge style. Returns a `DefaultWindowSettings` object used to configure window properties.

### Signature
`DefaultWindowSettings UseDefaultWindow()`

### Properties of DefaultWindowSettings
- **ExtendsContentIntoTitleBar** (bool) - Indicates whether content should extend into the title bar area.
- **Fullscreenable** (bool) - Indicates whether the window supports fullscreen.
- **Resizable** (bool) - Indicates whether the window can be resized.
- **SystemMenu** (bool) - Indicates whether the window shows the system menu.
- **ShowWindowDecorators** (bool) - Indicates whether to show window decorations (title bar, border, shadow).
- **SystemBackdropType** (SystemBackdropType) - Sets the window backdrop effect (Auto, None, BlurBehind, Acrylic, Mica, MicaAlt, Transient).
- **WindowEdgeOffsets** (Padding) - Sets the offsets of the window edges to adjust spacing between content and the border.
```

--------------------------------

### Create Main Window

Source: https://github.com/xuanchenlin/winformedge/blob/master/docs/getting-started.md

Define the main window by inheriting from Formedge and configuring WebView2 settings.

```csharp
using WinFormedge;
using Microsoft.Web.WebView2.Core;

namespace MyApp;

internal class MainWindow : Formedge
{
    public MainWindow()
    {
        // Set initial URL
        Url = "https://embedded.appresource.local/";

        // Configure window properties
        Size = new Size(1200, 800);
        StartPosition = FormStartPosition.CenterScreen;
        WindowTitle = "My WinFormedge App";

        // Allow fullscreen
        AllowFullscreen = true;

        // Set transparent background
        BackColor = Color.Transparent;

        // Configure embedded resource mapping
        SetVirtualHostNameToEmbeddedResourcesMapping(new EmbeddedFileResourceOptions
        {
            Scheme = "https",
            HostName = "embedded.appresource.local",
            ResourceAssembly = Assembly.GetExecutingAssembly(),
            DefaultFolderName = "wwwroot" // Embedded resource folder
        });

        // Bind events
        Load += MainWindow_Load;
        DOMContentLoaded += MainWindow_DOMContentLoaded;
    }

    protected override WindowSettings ConfigureWindowSettings(HostWindowBuilder opts)
    {
        // You can customize window settings in this method

        // Use default window settings as base
        var settings = opts.UseDefaultWindow();

        // Extend content into title bar area
        settings.ExtendsContentIntoTitleBar = true;

        // Set window backdrop effect
        settings.SystemBackdropType = SystemBackdropType.Mica;

        // Set minimum size
        MinimumSize = new Size(800, 600);

        return settings;
    }

    private void MainWindow_Load(object? sender, EventArgs e)
    {
        // Window and WebView2 are ready
        Console.WriteLine("Window loaded");
    }

    private void MainWindow_DOMContentLoaded(object? sender, CoreWebView2DOMContentLoadedEventArgs e)
    {
        // DOM content has finished loading
        ExecuteScriptAsync("""
            (function() {
                console.log('Hello from WinFormedge!');
                document.body.style.fontFamily = 'Microsoft YaHei, sans-serif';
            })();
        """);
    }
}
```

--------------------------------

### Initialize WinFormedge in Program.cs

Source: https://github.com/xuanchenlin/winformedge/blob/master/README.md

Replace the standard Application initialization with WinFormedgeApp to configure and run the application.

```csharp
using WinFormedge;

namespace MinimalExampleApp;

internal static class Program
{
    [STAThread]
    static void Main()
    {
        ApplicationConfiguration.Initialize();

        var app = WinFormedgeApp.CreateAppBuilder()
            .UseDevTools()
            .UseWinFormedgeApp<MyFormedgeApp>().Build();

        app.Run();
    }
}
```

--------------------------------

### Create MainWindow with Formedge

Source: https://github.com/xuanchenlin/winformedge/blob/master/README.md

Inherit from Formedge to create a window with WebView2, configuring window settings and handling DOM events.

```csharp
using WinFormedge;
using Microsoft.Web.WebView2.Core;

namespace MinimalExampleApp;
internal class MyWindow : Formedge
{
    public MyWindow()
    {
        win.MinimumSize = new Size(960, 480);
        win.Size = new Size(1280, 800);
        win.AllowFullScreen = true;

        Load += MyWindow_Load;
        DOMContentLoaded += MyWindow_DOMContentLoaded;

        Url = "https://cn.bing.com";
    }

    private void MyWindow_Load(object? sender, EventArgs e)
    {
        // Window and WebView2 are ready to use here.
    }

    private void MyWindow_DOMContentLoaded(object? sender, CoreWebView2DOMContentLoadedEventArgs e)
    {
        // The DOM content is loaded and ready to use here.
        ExecuteScriptAsync(""""
(()=>{
const headerEl = document.querySelector("#hdr");
headerEl.style.appRegion="drag";
})();
        """");
    }

    protected override WindowSettings ConfigureHostWindowSettings(HostWindowBuilder opts)
    {
        // Configure the host window settings here.
        var win = opts.UseDefaultWindow();

        win.ExtendsContentIntoTitleBar = true;
        win.SystemBackdropType = SystemBackdropType.MicaAlt;

        return win;
    }
}
```

--------------------------------

### Configure Transparent Window Settings

Source: https://github.com/xuanchenlin/winformedge/blob/master/docs/using-different-window-styles.md

Disable system decorations and set edge offsets to account for custom shadow areas in hit-testing.

```csharp
windowSettings.SystemBackdropType = SystemBackdropType.None;
windowSettings.ShowWindowDecorators = false;
windowSettings.WindowEdgeOffsets = new Padding(20, 15, 20, 25); // Set edge offsets
```

--------------------------------

### Create index.html

Source: https://github.com/xuanchenlin/winformedge/blob/master/src/WinFormedge.Blazor/README.md

Define the root HTML file for the Blazor application within the wwwroot folder.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WinFormsBlazor</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
</head>

<body>

    <div id="app">Loading...</div>

    <div id="blazor-error-ui" data-nosnippet>
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>

    <script src="_framework/blazor.webview.js"></script>

</body>
</html>
```

--------------------------------

### Control Window State with hostWindow

Source: https://github.com/xuanchenlin/winformedge/blob/master/docs/window-interaction-apis.md

Use these methods to handle common window actions like closing, minimizing, maximizing, and toggling fullscreen mode via event listeners.

```javascript
// Close window
document.getElementById("close-button").addEventListener("click", () => {
  hostWindow.close();
});

// Minimize window
document.getElementById("minimize-button").addEventListener("click", () => {
  hostWindow.minimize();
});

// Maximize or restore window
document.getElementById("maximize-button").addEventListener("click", () => {
  hostWindow.windowState === "maximized"
    ? hostWindow.restore()
    : hostWindow.maximize();
});

// Toggle fullscreen state
document.getElementById("fullscreen-button").addEventListener("click", () => {
  hostWindow.toggleFullscreen();
});
```

--------------------------------

### Modify Program Entry Point

Source: https://github.com/xuanchenlin/winformedge/blob/master/docs/getting-started.md

Initialize the application using the WinFormedge builder in the Program class.

```csharp
using WinFormedge;

namespace MyApp;

internal static class Program
{
    [STAThread]
    static void Main()
    {
        ApplicationConfiguration.Initialize();

        var app = WinFormedgeApp.CreateAppBuilder()
            .UseDevTools()              // Enable developer tools
            .UseWinFormedgeApp<MyApp>() // Specify application startup class
            .Build();

        app.Run();
    }
}
```

--------------------------------

### Configure Default Window Style in C#

Source: https://github.com/xuanchenlin/winformedge/blob/master/docs/window-styles.md

Use HostWindowBuilder.UseDefaultWindow to initialize window settings and modify properties like ExtendsContentIntoTitleBar or window size within the ConfigureWindowSettings override.

```csharp
using WinFormedge;

namespace MyApp;

internal class MyCustomForm : Formedge
{
    protected override WindowSettings ConfigureWindowSettings(HostWindowBuilder opts)
    {
      // opts provides several predefined window style methods; choose one
      // The method returns the default settings for that style, which you can modify
      var windowSettings = opts.UseDefaultWindow();

      // For example, extend content into the title bar area
      windowSettings.ExtendsContentIntoTitleBar = true;

      // You can also customize standard window properties here (or in the constructor), e.g.:
      MinimumSize = new Size(1024, 640);
      Size = new Size(1280, 800);

      // Return the customized window settings
      return windowSettings;
    }
}
```

--------------------------------

### HostWindowBuilder.UseKioskWindow

Source: https://github.com/xuanchenlin/winformedge/blob/master/docs/window-styles.md

Configures the window to use the kiosk style, returning a KioskWindowSettings object for further customization.

```APIDOC
## HostWindowBuilder.UseKioskWindow

### Description
Configures the window as a kiosk-style window, which is typically fullscreen and restricts user interaction like closing or minimizing.

### Signature
`KioskWindowSettings UseKioskWindow()`

### Returns
- **KioskWindowSettings** - An object used to further configure the kiosk window appearance and behavior.

### KioskWindowSettings Properties
- **Fullscreen** (bool) - Indicates whether the window should be fullscreen.
- **TargetScreen** (Screen) - Specifies which screen the window should appear on. Defaults to the primary screen.
```

--------------------------------

### Configure Project SDK

Source: https://github.com/xuanchenlin/winformedge/blob/master/src/WinFormedge.Blazor/README.md

Update the project file SDK to support Razor components.

```xml
<Project Sdk="Microsoft.NET.Sdk.Razor">
```

--------------------------------

### hostWindow API Reference

Source: https://github.com/xuanchenlin/winformedge/blob/master/docs/window-interaction-apis.md

Methods and properties available on the hostWindow object for controlling window behavior.

```APIDOC
## hostWindow API

### Properties
- **activated** (bool) - Indicates whether the window is in an activated state.
- **windowState** (string) - Gets the current window state (normal, minimized, maximized, fullscreen).
- **hasTitleBar** (bool) - Indicates whether the window displays a title bar.
- **left** (number) - Gets or sets the left position of the window (in pixels).
- **top** (number) - Gets or sets the top position of the window (in pixels).
- **width** (number) - Gets or sets the width of the window (in pixels).
- **height** (number) - Gets or sets the height of the window (in pixels).

### Methods
- **activate()** - Activates the window, making it the foreground window.
- **minimize()** - Minimizes the window to the taskbar.
- **maximize()** - Maximizes the window.
- **restore()** - Restores the window to its normal size and position.
- **fullscreen()** - Switches the window to fullscreen mode (requires AllowFullscreen set to true).
- **toggleFullscreen()** - Toggles the window's fullscreen state (requires AllowFullscreen set to true).
- **close()** - Closes the window.
```

--------------------------------

### Window Control Commands

Source: https://github.com/xuanchenlin/winformedge/blob/master/docs/window-interaction-apis.md

Use the app-command HTML attribute to bind window control actions to elements.

```APIDOC
## HTML Attribute: app-command

### Description
Binds window control commands to HTML elements.

### Supported Commands
- `fullscreen`: Toggles fullscreen mode.
- `minimize`: Minimizes the window.
- `maximize`: Maximizes or restores the window.
- `close`: Closes the window.

### Example
```html
<button app-command="fullscreen" title="Fullscreen"></button>
<button app-command="minimize" title="Minimize"></button>
<button app-command="maximize" title="Maximize"></button>
<button app-command="close" title="Close"></button>
```
```

--------------------------------

### Configure Default Window Style in C#

Source: https://github.com/xuanchenlin/winformedge/blob/master/docs/using-different-window-styles.md

Inherit from Formedge and override ConfigureWindowSettings to apply the default window style and customize window dimensions.

```csharp
using WinFormedge;
namespace MyApp;
internal class MyCustomForm : Formedge
{
  public MyCustomForm()
  {
    Url = "https://www.bing.com";
  }

  protected override WindowSettings ConfigureWindowSettings(HostWindowBuilder opts)
  {
    // opts provides several predefined window style methods; choose one
    // The method returns the default settings for that style, which you can modify
    var windowSettings = opts.UseDefaultWindow();

    // You can also customize standard window properties here (or in the constructor), e.g.:
    MinimumSize = new Size(1024, 640);
    Size = new Size(1280, 800);

    // Return the customized window settings
    return windowSettings;
  }
}
```

--------------------------------

### Window Events Reference

Source: https://github.com/xuanchenlin/winformedge/blob/master/docs/window-interaction-apis.md

A list of available window events and their associated detail parameters.

```APIDOC
## Window Events

### windowactivated
- **Description**: Triggered when the window is activated.
- **Parameters**: None

### windowdeactivate
- **Description**: Triggered when the window loses focus.
- **Parameters**: None

### windowresize
- **Description**: Triggered when the window size changes.
- **Parameters**: `detail` object contains {x:int, y:int, width:int, height:int}

### windowmove
- **Description**: Triggered when the window position changes.
- **Parameters**: `detail` object contains {x:int, y:int, screenX:int, screenY:int}

### windowstatechange
- **Description**: Triggered when window state (maximized, minimized, fullscreen) changes.
- **Parameters**: `detail` object contains {state:string} (Values: normal, minimized, maximized, fullscreen)
```

--------------------------------

### Listen to window events in JavaScript

Source: https://github.com/xuanchenlin/winformedge/blob/master/docs/window-interaction-apis.md

Use standard addEventListener to monitor windowresize and windowmove events. Event parameters are accessed via the detail property of the event object.

```javascript
// Listen to window resize events
window.addEventListener("windowresize", (e) => {
  const { width, height } = e.detail;
  console.log(`Window size changed to: ${width}x${height}`);
});
window.addEventListener("windowmove", (e) => {
  const { x, y } = e.detail;
  console.log(`Window position changed to: X:${x} Y:${y}`);
});
```

--------------------------------

### Map Local Folder to Virtual Hostname

Source: https://github.com/xuanchenlin/winformedge/blob/master/docs/using-web-resources.md

Use SetVirtualHostNameToFolderMapping within the Load event to serve local files via a virtual hostname.

```csharp
using WinFormedge;
namespace MyApp;
internal class MyWindow : Formedge
{
  public MyWindow()
  {
    // Set URL to the mapped virtual hostname
    Url = "https://appassets.local/index.html";

    Load += (s, e) =>
    {
      // Map local folder to virtual hostname
      SetVirtualHostNameToFolderMapping("https://appassets.local", "C:\\Path\\To\\Your\\WebAssets");
    };
  }
}
```

--------------------------------

### Implement JavaScript window event listeners

Source: https://github.com/xuanchenlin/winformedge/blob/master/docs/getting-started.md

Handles window resize and move events using built-in WinFormedge APIs.

```javascript
// WinFormedge has many built-in JavaScript APIs for controlling windows. Here are some simple usage examples:

window.addEventListener("DOMContentLoaded", () => {
  window.addEventListener("windowresize", (e) => {
    const { width, height } = e.detail;
    console.log(`Window resized: ${width}x${height}`);
  });

  window.addEventListener("windowmove", (e) => {
    const { x, y } = e.detail;
    console.log(`Window moved to: X:${x} Y:${y}`);
  });
});
```

--------------------------------

### SetVirtualHostNameToFolderMapping Method Signature

Source: https://github.com/xuanchenlin/winformedge/blob/master/docs/using-web-resources.md

Defines the method used to associate a virtual hostname with a local directory path.

```csharp
public void SetVirtualHostNameToFolderMapping(string hostName, string folderPath, CoreWebView2HostResourceAccessKind accessKind = CoreWebView2HostResourceAccessKind.Allow);
```

--------------------------------

### Bind Window Controls with HTML Attributes

Source: https://github.com/xuanchenlin/winformedge/blob/master/docs/window-interaction-apis.md

Use the app-command attribute on HTML elements to trigger window management actions like minimize, maximize, and close.

```html
<div>
  <button
    class="fullscreen"
    app-command="fullscreen"
    title="Fullscreen"
  ></button>
  <button class="minimize" app-command="minimize" title="Minimize"></button>
  <button class="maximize" app-command="maximize" title="Maximize"></button>
  <button class="close" app-command="close" title="Close"></button>
</div>
```

--------------------------------

### Create HTML structure for WinFormedge

Source: https://github.com/xuanchenlin/winformedge/blob/master/docs/getting-started.md

Defines the base HTML structure including window control buttons that interact with the host application.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WinFormedge App</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="header" data-drag-region>
      <h1>My WinFormedge App</h1>
      <div class="window-controls">
        <button
          onclick="window.chrome.webview.hostObjects.windowControls.minimize()"
        >
          ─
        </button>
        <button
          onclick="window.chrome.webview.hostObjects.windowControls.maximize()"
        >
          □
        </button>
        <button
          onclick="window.chrome.webview.hostObjects.windowControls.close()"
        >
          ✕
        </button>
      </div>
    </div>

    <main>
      <p>Welcome to WinFormedge!</p>
      <p>
        This is a desktop application integrated with modern web technologies.
      </p>
    </main>

    <script src="app.js"></script>
  </body>
</html>
```

--------------------------------

### Configure Embedded Resources in Project File

Source: https://github.com/xuanchenlin/winformedge/blob/master/docs/using-web-resources.md

Add an ItemGroup to your SDK-style .csproj file to include all files within a directory as embedded resources.

```xml
<ItemGroup>
  <EmbeddedResource Include="wwwroot\**\*.*" />
</ItemGroup>
```

--------------------------------

### Configure .csproj for embedded resources

Source: https://github.com/xuanchenlin/winformedge/blob/master/docs/getting-started.md

Ensures all files within the wwwroot directory are included as embedded resources in the .NET project.

```xml
<Project Sdk="Microsoft.NET.Sdk">
  <!-- ... -->

  <ItemGroup>
    <EmbeddedResource Include="wwwroot\**\*" />
  </ItemGroup>
</Project>
```

--------------------------------

### Define Application Styles

Source: https://github.com/xuanchenlin/winformedge/blob/master/src/WinFormedge.Blazor/README.md

Add the base CSS styles for the Blazor application.

```css
html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
```

--------------------------------

### Configure Window Dragging with CSS

Source: https://github.com/xuanchenlin/winformedge/blob/master/docs/window-interaction-apis.md

Use -webkit-app-region to define draggable and non-draggable areas within the window.

```css
.title-bar {
  -webkit-app-region: drag; /* Allow window dragging */
}
.title-bar .close-button {
  -webkit-app-region: no-drag; /* Disallow window dragging */
}
```

--------------------------------

### Style Window State with CSS Classes

Source: https://github.com/xuanchenlin/winformedge/blob/master/docs/window-interaction-apis.md

Apply styles based on window state classes added to the html element, such as window--maximized.

```css
.restore {
  display: none; /* Hide restore button by default */
}
.window--maximized .maximize {
  display: none; /* Hide maximize button when window is maximized */
}
.window--maximized .restore {
  display: block; /* Show restore button when window is maximized */
}
```

```html
<div>
  <!-- ... -->
  <button class="maximize" app-command="maximize" title="Maximize"></button>
  <button class="restore" app-command="maximize" title="Restore"></button>
  <!-- ... -->
</div>
```

--------------------------------

### Configure Kiosk Window Style in C#

Source: https://github.com/xuanchenlin/winformedge/blob/master/docs/window-styles.md

Implements the kiosk window style by overriding the ConfigureWindowSettings method within a Formedge class.

```csharp
using WinFormedge;
namespace MyApp;
internal class MyKioskForm : Formedge
{
    protected override WindowSettings ConfigureWindowSettings(HostWindowBuilder opts)
    {
      // Use the kiosk window style as the base
      var windowSettings = opts.UseKioskWindow();

      // Return the customized window settings
      return windowSettings;
    }
}
```

--------------------------------

### Create a borderless WinFormedge window

Source: https://github.com/xuanchenlin/winformedge/blob/master/docs/using-different-window-styles.md

Configures a Formedge window to extend its content into the title bar area by setting the ExtendsContentIntoTitleBar property to true.

```csharp
using WinFormedge;
namespace MyApp;
internal class MyBorderlessForm : Formedge
{
  protected override WindowSettings ConfigureWindowSettings(HostWindowBuilder opts)
  {
    var windowSettings = opts.UseDefaultWindow();

    // Extend content into the title bar area
    windowSettings.ExtendsContentIntoTitleBar = true;

    // You can also customize standard window properties here (or in the constructor), e.g.:
    MinimumSize = new Size(1024, 640);
    Size = new Size(1280, 800);

    // Return the customized window settings
    return windowSettings;
  }
}
```

--------------------------------

### SetVirtualHostNameToFolderMapping

Source: https://github.com/xuanchenlin/winformedge/blob/master/docs/using-web-resources.md

Maps a local folder to a virtual hostname to allow loading local files as web resources within the WebView2 environment.

```APIDOC
## SetVirtualHostNameToFolderMapping

### Description
Maps a local folder to a virtual hostname, enabling the application to access local files as if they were hosted on a web server.

### Method Signature
public void SetVirtualHostNameToFolderMapping(string hostName, string folderPath, CoreWebView2HostResourceAccessKind accessKind = CoreWebView2HostResourceAccessKind.Allow);

### Parameters
- **hostName** (string) - Required - The virtual hostname to map (e.g., "https://appassets.local").
- **folderPath** (string) - Required - The path to the local folder containing web assets.
- **accessKind** (CoreWebView2HostResourceAccessKind) - Optional - Specifies access permissions, defaults to Allow.
```

--------------------------------

### Load Remote URL in WinFormedge

Source: https://github.com/xuanchenlin/winformedge/blob/master/docs/using-web-resources.md

Set the Url property to a valid remote address to display web content.

```csharp
using WinFormedge;
namespace MyApp;
internal class MyWindow : Formedge
{
  public MyWindow()
  {
    Url = "https://www.bing.com";
  }
}
```

--------------------------------

### Set Window Backdrop Effect

Source: https://github.com/xuanchenlin/winformedge/blob/master/docs/using-different-window-styles.md

Assign a specific SystemBackdropType to the windowSettings object to define the visual backdrop style.

```csharp
windowSettings.SystemBackdropType = SystemBackdropType.Auto;
```

```csharp
windowSettings.SystemBackdropType = SystemBackdropType.None;
```

```csharp
windowSettings.SystemBackdropType = SystemBackdropType.BlurBehind;
```

```csharp
windowSettings.SystemBackdropType = SystemBackdropType.Acrylic;
```

```csharp
windowSettings.SystemBackdropType = SystemBackdropType.Mica;
```

```csharp
windowSettings.SystemBackdropType = SystemBackdropType.MicaAlt;
```

```csharp
windowSettings.SystemBackdropType = SystemBackdropType.Transient;
```

--------------------------------

### Define CSS styles for window layout

Source: https://github.com/xuanchenlin/winformedge/blob/master/docs/getting-started.md

Configures the visual appearance and drag regions for the application window.

```css
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Microsoft YaHei", sans-serif;
  background: rgba(255, 255, 255, 0.1);
  color: #333;
  height: 100vh;
  overflow: hidden;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  app-region: drag; /* Use this CSS property to allow dragging the element area to move the window */
}

.header h1 {
  font-size: 16px;
  font-weight: normal;
}

.window-controls button {
  background: none;
  border: none;
  color: #666;
  font-size: 14px;
  padding: 5px 10px;
  cursor: pointer;
  margin-left: 5px;
  app-region: no-drag; /* Prevent button area from being dragged */
}

.window-controls button:hover {
  background: rgba(0, 0, 0, 0.1);
}

main {
  padding: 40px;
  text-align: center;
}

main p {
  margin-bottom: 20px;
  font-size: 18px;
}
```

--------------------------------

### CSS Stylesheet for Application UI

Source: https://github.com/xuanchenlin/winformedge/blob/master/src/MinimalExampleApp/wwwroot/excluded_border_test.html

Contains the complete CSS definitions for the application's layout, including window states, animations, and interactive elements.

```css
  Test html, body { margin: 0; height: 100vh; cursor: default; user-select: none; padding: 0; } .border { width: 100%; height: 100%; position: relative; box-sizing: border-box; padding: 8px 21px 25px 13px; /* hOffset = 5 vOffset = 5 blur = 15 spread = 0 top = spread - vOffset + blur / 0.75 = 0 - 5 + 15 / 0.75 = 15 right = spread + hOffset + blur / 0.75 = 0 + 5 + 15 / 0.75 = 25 */ } .window--maximized .border { padding: 0; } @property --gradient-color1 { syntax: '<color>'; inherits: false; initial-value: #e024a8ef; } @property --gradient-color2 { syntax: '<color>'; inherits: false; initial-value: #1f1013; } .container-box { /* border-radius: 30px 0 30px 0;*/ /* border: 2px solid #57344c;*/ border-radius: 20px; box-sizing: content-box; width: 100%; height: 100%; position: relative; overflow: hidden; box-shadow: 3px 8px 15px #e024a8cc; transition: box-shadow ease-in-out 0.5s; } .window--maximized .container-box { border-radius: 0px; } .window--deactivated .container-box { box-shadow: 3px 8px 15px #00000077; } .content-box { width: 100%; height: 100%; overflow: hidden; background: radial-gradient(var(--gradient-color1),var(--gradient-color2)); animation: fadeIn 1 1s ease-out; transition: ease all 0.3s, --gradient-color1 1s, --gradient-color2 1s; } .window--deactivated .content-box { --gradient-color1: #92979cfa; --gradient-color2: #1f1013fa; } .light { position: absolute; width: 0px; opacity: .75; background-color: white; box-shadow: #e9f1f1 0px 0px 20px 2px; opacity: 0; top: 100vh; bottom: 0px; left: 0px; right: 0px; margin: auto; } .x1 { animation: floatUp 4s infinite linear; transform: scale(1.0); } .x2 { animation: floatUp 7s infinite linear; transform: scale(1.6); left: 15%; } .x3 { animation: floatUp 2.5s infinite linear; transform: scale(.5); left: -15%; } .x4 { animation: floatUp 4.5s infinite linear; transform: scale(1.2); left: -34%; } .x5 { animation: floatUp 8s infinite linear; transform: scale(2.2); left: -57%; } .x6 { animation: floatUp 3s infinite linear; transform: scale(.8); left: -81%; } .x7 { animation: floatUp 5.3s infinite linear; transform: scale(3.2); left: 37%; } .x8 { animation: floatUp 4.7s infinite linear; transform: scale(1.7); left: 62%; } .x9 { animation: floatUp 4.1s infinite linear; transform: scale(0.9); left: 85%; } @keyframes floatUp { 0% { top: 100vh; opacity: 0; } 25% { opacity: 1; } 50% { top: 0vh; opacity: .8; } 75% { opacity: 1; } 100% { top: -100vh; opacity: 0; } } .header { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif; font-weight: 200; color: white; font-size: calc(4vh); text-shadow: 0 0 30px #ffffff; text-align: center; line-height: 1.5; } .header a { font-size: 0.8em; color: white; text-decoration: underline; } #head1, #head2, #head3, #head4, #head5 { opacity: 0; } #head1 { animation: fadeOut 1 5s ease-in; } #head2 { animation: fadeOut 1 5s ease-in; animation-delay: 6s; } #head3 { animation: fadeOut 1 5s ease-in; animation-delay: 12s; } #head4 { animation: fadeOut 1 5s ease-in; animation-delay: 17s; } #head5 { animation: finalFade 1 5s ease-in; animation-fill-mode: forwards; animation-delay: 22s; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeOut { 0% { opacity: 0; } 30% { opacity: 1; } 80% { opacity: .9; } 100% { opacity: 0; } } @keyframes finalFade { 0% { opacity: 0; } 30% { opacity: 1; } 80% { opacity: .9; } 100% { opacity: 1; } } .button { position: absolute; border: 2px solid white; background: transparent; color: white; width: 160px; height: 40px; font-size: 1.2em; border-radius: 5px; opacity: .5; top: 60vh; bottom: 0px; left: 0px; right: 0px; margin: auto; transition: all ease 0.3s, box-shadow ease-out 2s; text-align: center; text-decoration: none; display: flex; justify-content: center; align-items: center; } .button:hover { border: 2px solid rgba(365,365,365,0.5); background-color: rgba(365,365,365,0.5); color: #444; opacity: .9; transition: all ease 0.3s, box-shadow ease-in-out 0.5s; box-shadow: 0 3px 27px 0 rgba(255,255,255,0.9); } .command-box { position: absolute; top: 5px; right: 15px; display: flex; flex-direction: row; justify-content: space-between; z-index: 100; app-region: no-drag; } .command-box > div { font-family: "Segoe MDL2 Assets" !important; width: 40px; height: 40px; color: #ffffff90; display: flex; justify-content: center; align-items: center; transform: translateY(-100%); transition: all ease-in-out 0.3s; opacity: 0; font-size: 0.8em; } .command-box > div:after { font-family: "Segoe MDL2 Assets" !important; } .container-box:hover .command-box > div { transform: translateY(0); opacity: 1; } .container-box:hover .command-box > div:nth-child(1) { transition-duration: 0.2s; } .container-box:hover .command-box > div:nth-child(2) { transition-duration: 0.4s; } .container-box:hover .command-box > div:nth-child(3) { 
```

--------------------------------

### Create Counter Component

Source: https://github.com/xuanchenlin/winformedge/blob/master/src/WinFormedge.Blazor/README.md

Implement the default Counter component for the Blazor application.

```razor
<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}
```

--------------------------------

### Register Embedded Resources with Virtual Hostname

Source: https://github.com/xuanchenlin/winformedge/blob/master/docs/using-web-resources.md

Use SetVirtualHostNameToEmbeddedResourcesMapping within the Load event to ensure the mapping occurs after WebView2 initialization.

```csharp
using WinFormedge;
namespace MyApp;
internal class MyWindow : Formedge
{
  public MyWindow()
  {
    // Set URL to the mapped virtual hostname
    Url = "https://appresources.local/index.html";

    Load += (s, e) =>
    {
      // Map embedded resources to virtual hostname
      SetVirtualHostNameToEmbeddedResourcesMapping(new WinFormedge.WebResource.EmbeddedFileResourceOptions
        {
            Scheme = "https",
            HostName = "appresources.local",
            ResourceAssembly = typeof(MyWindow).Assembly,
            DefaultFolderName = "wwwroot"
        });
    };
  }
}
```

--------------------------------

### CSS Window State Styling

Source: https://github.com/xuanchenlin/winformedge/blob/master/src/MinimalExampleApp/wwwroot/index.html

Defines layout and visual indicators for window activation states and drag regions.

```css
html, body { height: 100%; margin: 0; padding: 0; } .window__titlbar--shown header { display: none; } .window__titlbar--hidden header { color: white; padding: 10px; text-align: center; app-region: drag; } .window--activated header { } .window--deactivated header { } main { padding: 20px; } #activated-status { width: 60px; } .window--activated #activated-status { background-color: green; } .window--deactivated #activated-status { background-color: dimgray; } .window--activated #activated-status:after { background-color: green; content: "ACTIVATED"; } .window--deactivated #activated-status:after { background-color: dimgray; content: "DEACTIVATE" }
```

--------------------------------

### Define Razor Imports

Source: https://github.com/xuanchenlin/winformedge/blob/master/src/WinFormedge.Blazor/README.md

Add the necessary namespace imports for Blazor components.

```razor
@using Microsoft.AspNetCore.Components.Web
```

--------------------------------

### JavaScript Window Interaction

Source: https://github.com/xuanchenlin/winformedge/blob/master/src/MinimalExampleApp/wwwroot/index.html

Attaches a click event listener to the openChildWindow button to trigger a host object method.

```javascript
(() => { const btn = document.getElementById("openChildWindow"); if (btn) { btn.addEventListener("click", () => { chrome.webview.hostObjects.sync.testWindow.OpenSubWindow(); }); } })();
```

--------------------------------

### Implement CSS Shadow Effect

Source: https://github.com/xuanchenlin/winformedge/blob/master/docs/using-different-window-styles.md

Apply a box shadow to the window element to create a custom border effect.

```css
box-shadow: 0px 5px 20px #333333;
```

--------------------------------

### SetVirtualHostNameToEmbeddedResourcesMapping Method Signature

Source: https://github.com/xuanchenlin/winformedge/blob/master/docs/using-web-resources.md

The primary method used to configure the mapping of a virtual hostname to embedded resources.

```csharp
public void SetVirtualHostNameToEmbeddedResourcesMapping(EmbeddedFileResourceOptions options);
```

--------------------------------

### SetVirtualHostNameToEmbeddedResourcesMapping

Source: https://github.com/xuanchenlin/winformedge/blob/master/docs/using-web-resources.md

Configures the mapping between a virtual hostname and embedded resources within an assembly.

```APIDOC
## SetVirtualHostNameToEmbeddedResourcesMapping

### Description
Configures the mapping between a virtual hostname and embedded resources within an assembly. This allows the WebView2 control to resolve requests made to a specific virtual host to files embedded in the application assembly.

### Method Signature
`public void SetVirtualHostNameToEmbeddedResourcesMapping(EmbeddedFileResourceOptions options);`

### Parameters
- **options** (EmbeddedFileResourceOptions) - Required - An object containing the configuration for the resource mapping.

### EmbeddedFileResourceOptions Properties
- **Scheme** (string) - The protocol part of the virtual hostname (e.g., "https").
- **HostName** (string) - The host part of the virtual hostname (e.g., "appresources.local").
- **ResourceAssembly** (Assembly) - The assembly containing the embedded resources.
- **DefaultFolderName** (string) - The default folder name for embedded resources (e.g., "wwwroot").
- **DefaultNamespace** (string) - The default namespace prefix for embedded resources.
- **OnFallback** (WebResourceFallbackDelegate) - A callback delegate for handling requests when a resource is not found.
```

--------------------------------

### Window Dragging with -webkit-app-region

Source: https://github.com/xuanchenlin/winformedge/blob/master/docs/window-interaction-apis.md

Use the CSS -webkit-app-region property to define draggable and non-draggable regions within the window.

```APIDOC
## CSS -webkit-app-region

### Description
Defines which areas of the window can be used to drag the application window.

### Usage
- `drag`: Enables window dragging for the element.
- `no-drag`: Disables window dragging for the element.

### Example
```css
.title-bar {
  -webkit-app-region: drag;
}
.title-bar .close-button {
  -webkit-app-region: no-drag;
}
```
```
Tokens:
Raw