FloatingPanel | Properties & Events

Properties

Property	Type	Default	Description
IsOpen	bool	false	Show/hide the panel (TwoWay bindable)
PanelContent	View?	null	Content displayed in the panel (ContentProperty)
HeaderTemplate	View?	null	Custom header displayed above/below content depending on position
ShowHeaderWhenClosed	bool	false	Show the header as a peek strip when the panel is closed
Position	FloatingPanelPosition	Bottom	Where the panel slides from: Bottom, BottomTabs, or Top
Detents	ObservableCollection<DetentValue>	Quarter, Half, Full	Snap positions as ratios of available height
PanelBackgroundColor	Color	White	Background of the panel
HandleColor	Color	Grey	Drag handle indicator color
PanelCornerRadius	double	16	Corner radius (auto-flips for top vs bottom)
ShowHandle	bool	true	Show/hide the drag handle
HasBackdrop	bool	true	Show dimming backdrop via the parent OverlayHost
CloseOnBackdropTap	bool	true	Tap backdrop to close
AnimationDuration	double	250	Animation speed in ms
ExpandOnInputFocus	bool	true	Auto-expand to highest detent when an input is focused
IsLocked	bool	false	Prevents swipe, pan, and backdrop tap dismiss; panel can only be controlled programmatically
FitContent	bool	false	Measures content and auto-computes a single detent to fit it
UseHapticFeedback	bool	true	Haptic click on open, close, and detent snap

FloatingPanelPosition

Value	Description
Bottom	Slides up from the bottom edge
BottomTabs	Same as Bottom but clips above a Shell TabBar
Top	Slides down from the top edge

DetentValue

Predefined snap points:

Static Property	Ratio	Description
DetentValue.Quarter	0.25	25% height
DetentValue.Half	0.50	50% height
DetentValue.ThreeQuarters	0.75	75% height
DetentValue.Full	1.0	Full height

Custom detent: new DetentValue(0.33) for 33%.

Custom Detents Example

<shiny:FloatingPanel IsOpen="{Binding IsOpen, Mode=TwoWay}"
                     PanelBackgroundColor="#1E1E1E"
                     HandleColor="#888888"
                     PanelCornerRadius="24">
    <shiny:FloatingPanel.Detents>
        <shiny:DetentValue Ratio="0.33" />
        <shiny:DetentValue Ratio="0.66" />
        <shiny:DetentValue Ratio="1.0" />
    </shiny:FloatingPanel.Detents>
    <VerticalStackLayout Padding="20">
        <Label Text="Custom Panel" TextColor="White" />
    </VerticalStackLayout>
</shiny:FloatingPanel>

Methods

Method	Returns	Description
AnimateToDetentAsync(DetentValue)	Task	Programmatically animate to a specific detent

Events

Event	Args	Description
Opened	EventArgs	Panel finished opening
Closed	EventArgs	Panel finished closing
DetentChanged	DetentValue	Panel snapped to a different detent