Skip to content
Shiny Controls v1.0 - The Ultra Control Suite for .NET MAUI & BlazorO...M...G!

FloatingPanel | Properties & Events

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
IsContentScrollEnabled bool true Wraps the content in a ScrollView. Set false when the content scrolls itself (a TableView/CollectionView) — nesting scroll-views collapses the inner one to near-zero height, leaving its rows blank
UseFeedback bool true Haptic click on open, close, and detent snap
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

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%.

<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>
Method Returns Description
AnimateToDetentAsync(DetentValue) Task Programmatically animate to a specific detent
Event Args Description
Opened EventArgs Panel finished opening
Closed EventArgs Panel finished closing
DetentChanged DetentValue Panel snapped to a different detent