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

Property	Type	Default	Description
Title	string	"Window"	Title bar text
Width	int?	400	Initial width (px)
Height	int?	300	Initial height (px)
InitialX	int?	100	Initial X position
InitialY	int?	100	Initial Y position
Draggable	bool?	true	Enable dragging
Resizable	bool?	true	Enable resizing
ShowCloseButton	bool?	true	Show close button
ShowTitleBar	bool?	true	Show title bar
StyleOptions	FloatingWindowStyleOptions	DefaultLight	Styling config

Events

Event	Description
OnShow	Window shown
OnHide	Window hidden
OnDragStart	Dragging started
OnDragEnd	Dragging ended

Methods

Method	Description
Show()	Show window
Hide()	Hide window
Toggle()	Toggle visibility
GetPosition()	Get (x, y)
SetPosition(x, y)	Set position
GetSize()	Get (width, height)
SetSize(width, height)	Set size
BringToFront()	Bring window to front