FloatingPanel | Examples

Top Panel

<shiny:FloatingPanel IsOpen="{Binding IsNotificationOpen}"
                     Position="Top"
                     FitContent="True"
                     PanelCornerRadius="16">
    <VerticalStackLayout Padding="20" Spacing="10">
        <Label Text="New Notification" FontAttributes="Bold" />
        <Label Text="You have a new message." />
    </VerticalStackLayout>
</shiny:FloatingPanel>

Header Peek (Music Player)

<shiny:FloatingPanel IsOpen="{Binding IsOpen}"
                     ShowHeaderWhenClosed="True">
    <shiny:FloatingPanel.HeaderTemplate>
        <Label Text="Now Playing — Drag up for details"
               Padding="16,8"
               FontSize="14" />
    </shiny:FloatingPanel.HeaderTemplate>
    <VerticalStackLayout Padding="20">
        <Label Text="Full player controls here" />
    </VerticalStackLayout>
</shiny:FloatingPanel>

Locked Panel (Signature Capture)

<shiny:FloatingPanel IsOpen="{Binding IsSignatureOpen}"
                     IsLocked="True"
                     FitContent="True"
                     HasBackdrop="True"
                     PanelCornerRadius="20">
    <VerticalStackLayout Padding="20" Spacing="15">
        <Label Text="Draw your signature" FontSize="18" FontAttributes="Bold" />
        <!-- signature content -->
        <Button Text="Done" Command="{Binding DoneCommand}" />
    </VerticalStackLayout>
</shiny:FloatingPanel>

Multiple Panels (Dual Panel)

OverlayHost supports multiple simultaneous panels. The backdrop stays visible until all panels are closed.

<shiny:ShinyContentPage xmlns:shiny="http://shiny.net/maui/controls">
    <shiny:ShinyContentPage.PageContent>
        <VerticalStackLayout Padding="20" Spacing="10">
            <Button Text="Open Bottom" Command="{Binding OpenBottomCommand}" />
            <Button Text="Open Top" Command="{Binding OpenTopCommand}" />
        </VerticalStackLayout>
    </shiny:ShinyContentPage.PageContent>

    <shiny:ShinyContentPage.Panels>
        <shiny:FloatingPanel IsOpen="{Binding IsBottomOpen, Mode=TwoWay}"
                             Position="Bottom">
            <Label Text="Bottom panel content" Padding="20" />
        </shiny:FloatingPanel>

        <shiny:FloatingPanel IsOpen="{Binding IsTopOpen, Mode=TwoWay}"
                             Position="Top">
            <Label Text="Top panel content" Padding="20" />
        </shiny:FloatingPanel>
    </shiny:ShinyContentPage.Panels>
</shiny:ShinyContentPage>

Programmatic Detent Control

// Animate to a specific detent
await floatingPanel.AnimateToDetentAsync(DetentValue.Full);

// Or a custom ratio
await floatingPanel.AnimateToDetentAsync(new DetentValue(0.75));