Floating draggable window component for Blazor using MudBlazor. Supports service-based pattern similar to MudDialog.
$ dotnet add package ModelingEvolution.FloatingWindowA draggable, resizable floating window component for Blazor applications using MudBlazor. Supports both declarative and service-based patterns (similar to MudBlazor's dialog system).
dotnet add package ModelingEvolution.FloatingWindow
App.razor or _Host.cshtml:<link href="_content/ModelingEvolution.FloatingWindow/floatingWindow.css" rel="stylesheet" />
_Imports.razor:@using ModelingEvolution.FloatingWindow
Program.cs:builder.Services.AddFloatingWindow();
MainLayout.razor:<MudThemeProvider />
<MudPopoverProvider />
<MudDialogProvider />
<MudSnackbarProvider />
<FloatingWindowProvider /> @* Add this line *@
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}");
}
}
}
@* 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();
}
}
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;
}
| Method | Description |
|---|---|
Show<T>(title, options?) | Open window with component type T |
Show<T>(title, parameters, options?) | Open with component and parameters |
Show(title, RenderFragment, options?) | Open with render fragment |
CloseAll() | Close all open windows |
BringToFront(windowId) | Bring window to front |
Returned when opening a window:
| Member | Description |
|---|---|
Id | Unique window identifier |
Title | Window title (get/set) |
Result | Task that completes when window closes |
State | Current state (Normal, Minimized, Maximized) |
Close() | Close without result |
Close<T>(data) | Close with result data |
BringToFront() | Bring to front |
Minimize() / Maximize() / Restore() | Window state control |
Cascaded to content components:
| Member | Description |
|---|---|
Id | Window identifier |
Title | Get/set title dynamically |
CloseAsync() | Close (cancelled) |
CloseAsync<T>(data) | Close with data |
BringToFront() / Minimize() / Maximize() / Restore() | Window control |
| Property | Type | Default | Description |
|---|---|---|---|
Left | double | 100 | Initial X position |
Top | double | 100 | Initial Y position |
Width | double | 400 | Window width |
Height | double | 300 | Window height |
MinWidth | double | 200 | Minimum width |
MinHeight | double | 150 | Minimum height |
CanClose | bool | true | Show close button |
CanMaximize | bool | true | Show maximize button |
CanResize | bool | true | Enable resize handle |
CenterOnScreen | bool | false | Center when opened |
CloseOnOutsideClick | bool | false | Close on outside click |
CloseOnEscape | bool | true | Close on Escape key |
CssClass | string? | null | Additional CSS class |
Static factory methods:
FloatingWindowOptions.Default - Default optionsFloatingWindowOptions.Centered(width, height) - Centered windowFloatingWindowOptions.Modal(width, height) - Modal-like behaviorMIT