Soenneker.Blazor.Floating.Windows 3.0.2

Soenneker.Blazor.Floating.Windows

A Blazor component library for creating draggable, resizable floating windows with modern styling and full customization options.

Features

• ✅ Draggable Windows - Drag windows by their title bar
• ✅ Resizable Windows - Resize by dragging edges and corners
• ✅ Modern Styling - Beautiful gradient title bars and smooth animations
• ✅ Customizable - Full control over appearance and behavior
• ✅ Viewport Constraints - Keep windows within screen bounds
• ✅ Z-Index Management - Automatic focus and layering
• ✅ Responsive Design - Works on desktop and mobile
• ✅ Dark Mode Support - Automatic theme detection
• ✅ Accessibility - Proper ARIA labels and keyboard support
• ✅ Event Callbacks - React to show, hide, drag, and resize events

Installation

1. Add the NuGet package to your project:

dotnet add package Soenneker.Blazor.Floating.Windows

2. Register the services in your Program.cs:

using Soenneker.Blazor.Floating.Windows.Registrars;

builder.Services.AddFloatingWindowAsScoped();

3. Add the using statement to your _Imports.razor:

@using Soenneker.Blazor.Floating.Windows
@using Soenneker.Blazor.Floating.Windows.Options

Basic Usage

<FloatingWindow Title="My Window" Width="400" Height="300">
    <div>
        <h3>Hello World!</h3>
        <p>This is a floating window with your content.</p>
        <button @onclick="() => window?.Close()">Close</button>
    </div>
</FloatingWindow>

Advanced Usage

<FloatingWindow @ref="myWindow"
                Title="Advanced Window"
                Width="500"
                Height="400"
                InitialX="100"
                InitialY="100"
                Draggable="true"
                Resizable="true"
                ShowCloseButton="true"
                ShowTitleBar="true"
                CenterOnShow="true"
                ConstrainToViewport="true"
                OnShow="OnWindowShow"
                OnHide="OnWindowHide"
                OnDragStart="OnDragStart"
                OnDragEnd="OnDragEnd">
    <div class="window-content">
        <h3>Advanced Features</h3>
        <p>This window demonstrates all the available features.</p>
        <div class="controls">
            <button @onclick="() => myWindow?.SetPosition(200, 200)">Move to (200,200)</button>
            <button @onclick="() => myWindow?.SetSize(600, 500)">Resize to 600x500</button>
            <button @onclick="() => myWindow?.BringToFront()">Bring to Front</button>
        </div>
    </div>
</FloatingWindow>

@code {
    private FloatingWindow? myWindow;

    private void OnWindowShow()
    {
        Console.WriteLine("Window shown!");
    }

    private void OnWindowHide()
    {
        Console.WriteLine("Window hidden!");
    }

    private void OnDragStart()
    {
        Console.WriteLine("Dragging started!");
    }

    private void OnDragEnd()
    {
        Console.WriteLine("Dragging ended!");
    }
}

Configuration Options

Window Properties

Event Callbacks

Methods