Shiny .NET v4.1 BETA - Linux, MacOS, & Blazor Support! TONS of new features and improvements across the board. Check It Out

FloatingPanel

A floating panel overlay that slides in from the bottom or top of the screen with configurable snap positions (detents), optional header peek when closed, backdrop dimming, pan gestures, haptic feedback, and automatic keyboard handling. Requires an OverlayHost container (or the convenience ShinyContentPage base class).

Frameworks

.NET MAUI

Closed	Open	Top (Peek)	Top (Open)	Dual (Peek)	Dual (Open)	Music Player

Basic Usage

FloatingPanel must live inside an OverlayHost (a transparent Grid that manages backdrops). The easiest approach is to use ShinyContentPage as your page base class:

<shiny:ShinyContentPage xmlns:shiny="http://shiny.net/maui/controls"
                        x:Class="MyApp.MyPage">
    <shiny:ShinyContentPage.PageContent>
        <ScrollView>
            <VerticalStackLayout Padding="20" Spacing="10">
                <Button Text="Open Panel" Command="{Binding OpenCommand}" />
            </VerticalStackLayout>
        </ScrollView>
    </shiny:ShinyContentContent>

    <shiny:ShinyContentPage.Panels>
        <shiny:FloatingPanel IsOpen="{Binding IsPanelOpen, Mode=TwoWay}">
            <VerticalStackLayout Padding="20" Spacing="10">
                <Label Text="Panel Content" FontSize="18" FontAttributes="Bold" />
                <Label Text="Drag the handle or tap the backdrop to close." />
            </VerticalStackLayout>
        </shiny:FloatingPanel>
    </shiny:ShinyContentPage.Panels>
</shiny:ShinyContentPage>

Or use OverlayHost directly inside any page:

<ContentPage>
    <Grid>
        <!-- Main page content -->
        <ScrollView>
            <VerticalStackLayout>
                <Button Text="Open Panel" Command="{Binding OpenCommand}" />
            </VerticalStackLayout>
        </ScrollView>

        <!-- Overlay layer -->
        <shiny:OverlayHost>
            <shiny:FloatingPanel IsOpen="{Binding IsOpen, Mode=TwoWay}">
                <Label Text="Panel content" />
            </shiny:FloatingPanel>
        </shiny:OverlayHost>
    </Grid>
</ContentPage>

Features

Pan gesture — Drag up/down between detents via the handle; swipe past the lowest to close
Keyboard handling — Auto-expands to highest detent when an Entry/Editor is focused, restores on dismiss
ScrollView integration — Scroll enabled only at the highest detent; disabled at lower detents so pan gestures work
Backdrop — Semi-transparent overlay managed by OverlayHost; supports multiple simultaneous panels
Locked mode — IsLocked="True" hides the drag handle and disables pan gestures. The panel can only be opened/closed via binding. Ideal for signature capture, selectors, or confirmation dialogs
Fit content — FitContent="True" measures content and auto-computes a single detent to fit, ignoring the Detents collection
Top, bottom, or bottom with tabs — Position="Top" slides from the top, Position="BottomTabs" clips above a Shell TabBar
Header peek — Provide HeaderTemplate and set ShowHeaderWhenClosed="True" to show a tap/drag target when the panel is closed
Haptic feedback — Tactile click on open, close, and detent snap (disable with UseHapticFeedback="False")
Corner radius — Configurable via PanelCornerRadius (auto-flips for top vs bottom positioning)

OverlayHost

OverlayHost is a transparent Grid that manages backdrop dimming for one or more FloatingPanel children. It tracks active panels and only hides the backdrop when all panels are closed.

Property	Type	Default	Description
`BackdropColor`	`Color`	`Black`	Color of the dimming overlay
`BackdropMaxOpacity`	`double`	`0.5`	Maximum backdrop opacity when panels are open

ShinyContentPage

ShinyContentPage is a convenience ContentPage subclass with a built-in OverlayHost. Use PageContent for your main content and Panels for floating panels:

Property	Type	Description
`PageContent`	`View?`	Your main page content (replaces `Content`)
`Panels`	`IList<IView>`	Collection of `FloatingPanel` instances
`BackdropColor`	`Color`	Forwarded to the internal `OverlayHost`
`BackdropMaxOpacity`	`double`	Forwarded to the internal `OverlayHost`

AI Skill

Step 1 — Add the marketplace:

claude plugin marketplace add shinyorg/skills

Step 2 — Install the plugin:

claude plugin install shiny-controls@shiny

Step 1 — Add the marketplace:

copilot plugin marketplace add https://github.com/shinyorg/skills

Step 2 — Install the plugin:

copilot plugin install shiny-controls@shiny

View shiny-controls Plugin