Soenneker.Blazor.Floating.Windows 3.0.16

<img src="https://user-images.githubusercontent.com/4441470/224455560-91ed3ee7-f510-4041-a8d2-3fc093025112.png" alt="Logo" width="48"/> Soenneker.Blazor.Floating.Windows

Modern, customizable floating windows for Blazor

✨ Features

• 🪟 Draggable & Resizable — Move and resize windows with smooth, modern UX
• 🎨 Fully Customizable — Colors, fonts, borders, shadows, and more
• 🌗 Custom theming — Built-in typed support
• 🖼️ Multiple Windows — Manage, stack, and focus with z-index
• 📱 Responsive — Works on desktop and mobile
• ♿ Accessible — ARIA labels, keyboard navigation
• ⚡ Event Callbacks — React to show, hide, drag, resize, and more

🚀 Installation

dotnet add package Soenneker.Blazor.Floating.Windows

// Program.cs
using Soenneker.Blazor.Floating.Windows.Registrars;
builder.Services.AddFloatingWindowAsScoped();

// _Imports.razor
@using Soenneker.Blazor.Floating.Windows

🛠️ 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>

🎨 Theming & Styling

Built-in themes:

<FloatingWindow StyleOptions="FloatingWindowStyleOptions.DefaultLight">...</FloatingWindow>
<FloatingWindow StyleOptions="FloatingWindowStyleOptions.DefaultDark">...</FloatingWindow>
<FloatingWindow StyleOptions="FloatingWindowStyleOptions.DemoTheme">...</FloatingWindow>

Custom styling:

<FloatingWindow StyleOptions="new FloatingWindowStyleOptions
{
    BackgroundColor = "#f8f9fa",
    BorderColor = "#dee2e6",
    BorderRadius = "12px",
    TitleBarBackgroundColor = "#007bff",
    TitleBarTextColor = "#ffffff",
    CloseButtonTextColor = "#ffffff",
    CloseButtonHoverBackgroundColor = "rgba(255, 255, 255, 0.2)",
    CustomClass = "my-custom-window",
    CustomStyles = new Dictionary<string, string>
    {
        ["backdrop-filter"] = "blur(10px)",
        ["border"] = "2px solid #007bff"
    }
}">...</FloatingWindow>

💡 Advanced Example

<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!");
}

⚙️ API Overview

Properties

Events

Methods