ModelingEvolution.FloatingWindow 2.0.1

ModelingEvolution.FloatingWindow

A draggable, resizable floating window component for Blazor applications using MudBlazor. Supports both declarative and service-based patterns (similar to MudBlazor's dialog system).

Installation

dotnet add package ModelingEvolution.FloatingWindow

Setup

1. Add the CSS to your App.razor or _Host.cshtml:

<link href="_content/ModelingEvolution.FloatingWindow/floatingWindow.css" rel="stylesheet" />

2. Add the namespace to your _Imports.razor:

@using ModelingEvolution.FloatingWindow

3. Register the service in Program.cs:

builder.Services.AddFloatingWindow();

4. Add the provider to your MainLayout.razor:

<MudThemeProvider />
<MudPopoverProvider />
<MudDialogProvider />
<MudSnackbarProvider />
<FloatingWindowProvider />  @* Add this line *@

Usage

Service-Based Pattern (Recommended)

Open windows programmatically from anywhere in your application:

@page "/"
@inject IFloatingWindowService FloatingWindows

<MudButton OnClick="OpenWindow">Open Window</MudButton>
<MudButton OnClick="OpenSettings">Open Settings</MudButton>

@code {
    void OpenWindow()
    {
        FloatingWindows.Show<MyContent>("Window Title", new FloatingWindowOptions
        {
            Width = 500,
            Height = 400,
            CenterOnScreen = true
        });
    }

    async Task OpenSettings()
    {
        var windowRef = FloatingWindows.Show<SettingsPanel>("Settings");
        var result = await windowRef.Result;

        if (!result.Cancelled && result.TryGetData<string>(out var data))
        {
            Console.WriteLine($"Settings saved: {data}");
        }
    }
}

Content Component with Window Access

@* SettingsPanel.razor *@
<MudTextField @bind-Value="_name" Label="Name" />
<MudButton OnClick="Save">Save</MudButton>
<MudButton OnClick="Cancel">Cancel</MudButton>

@code {
    [CascadingParameter]
    IFloatingWindowInstance? Window { get; set; }

    string _name = "";

    async Task Save()
    {
        await Window!.CloseAsync(_name);
    }

    async Task Cancel()
    {
        await Window!.CloseAsync();
    }
}

Declarative Pattern

For simpler use cases, use the component directly:

@page "/"

<MudButton OnClick="() => isWindowVisible = true">Open Window</MudButton>

<FloatingWindow @bind-IsVisible="isWindowVisible"
                Title="My Window"
                Left="100"
                Top="100"
                Width="400"
                Height="300">
    <p>Window content goes here</p>
</FloatingWindow>

@code {
    private bool isWindowVisible = false;
}

API Reference

IFloatingWindowService

IFloatingWindowReference

Returned when opening a window:

IFloatingWindowInstance

Cascaded to content components:

FloatingWindowOptions

Static factory methods:

• FloatingWindowOptions.Default - Default options
• FloatingWindowOptions.Centered(width, height) - Centered window
• FloatingWindowOptions.Modal(width, height) - Modal-like behavior

Features

• Multi-Window Support: Open multiple windows simultaneously
• Draggable: Click and drag the header to move
• Resizable: Drag the bottom-right corner to resize
• Minimize/Maximize/Restore: Standard window controls
• Result Awaiting: Await window close and get result data
• Cascading Access: Content components can control their window
• Z-Index Management: Click to bring to front
• MudBlazor Integration: Uses MudBlazor theming
• Dark Theme Support: Automatically adapts to theme

Requirements

• .NET 10.0 or later
• MudBlazor 8.0.0 or later

License

MIT