Flyout Properties

Frameworks

.NET MAUI

FlyoutPanel

Content

Property	Type	Default	Notes
PanelContent	View?	—	The content property; the expanded body
RailContent	View?	null	What Collapsed shows instead of the body. Unset, a collapsed panel keeps showing the leading edge of PanelContent
HeaderContent	View?	null	Pinned above the body — it does not scroll with it
FooterContent	View?	null	Pinned below the body
IsContentScrollEnabled	bool	true	Wraps PanelContent in a ScrollView
ShowHeaderWhenCollapsed	bool	true
ShowFooterWhenCollapsed	bool	true

State & geometry

Property	Type	Default	Notes
Side	FlyoutSide	Start	Set for you by FlyoutView.Start / .End
State	FlyoutPanelState	Expanded	Hidden / Collapsed / Expanded. Two-way
CollapsedState	FlyoutPanelState	Collapsed	Where a dismiss lands — a toggle, a scrim tap, a swipe, or CollapseBelow. Use Hidden for a plain drawer
ExpandedWidth	double	280	Two-way — a resize drag writes back here
CollapsedWidth	double	64	The rail’s width
MinExpandedWidth	double	160	Resize clamp
MaxExpandedWidth	double	480	Resize clamp
IsResizable	bool	false	Drag handle on the inner edge. Pushing, expanded panels only

Presentation & behaviour

Property	Type	Default	Notes
Presentation	FlyoutPresentation	Auto	Overlay / Push / Auto
CompactWidth	double	800	Host width at or above which Auto pushes
CollapseBelow	double	0 (off)	Host width under which an expanded panel drops to CollapsedState, restoring when it grows back
HasScrim	bool	true	Floating panels only — nothing is behind a pushing one
CloseOnScrimTap	bool	true
IsSwipeEnabled	bool	true	Edge swipe to open, drag the scrim to close
EdgeSwipeWidth	double	20	The catch strip. It sits over the content, so 0 gives the content its edge back
AnimationDuration	double	250	Milliseconds. 0 snaps
UseFeedback	bool	true	Routes state changes through IFeedbackService

Appearance

Property	Type	Default	Notes
PanelBackgroundColor	Color?	theme	Unset follows SurfaceContainerLow
DividerColor	Color?	theme	Unset follows OutlineVariant
DividerWidth	double	1
HasDivider	bool	true	The hairline on the edge facing the content. A floating panel drops it for a shadow
HasShadow	bool	true	While floating
CornerRadius	double	0	Rounds the two corners on the inner edge; the outer edge stays square

Members

Member	Notes
EffectivePresentation	What Auto currently resolves to. Read-only
CurrentWidth	The panel’s width right now, mid-transition included. Read-only
Host	The FlyoutView it is assigned to, or null
ToggleAsync()	Expands, or returns to CollapsedState
ExpandAsync() / CollapseAsync() / HideAsync()
SetStateAsync(state)	Completes when the transition finishes
StateChanged	FlyoutStateChangedEventArgs(Side, OldState, NewState). Not raised for the initial layout

FlyoutView

Property	Type	Default	Notes
Content	View?	—	Content property; what the panels sit beside
Start	FlyoutPanel?	null	Leading edge — left in a left-to-right layout
End	FlyoutPanel?	null	Trailing edge
ScrimColor	Color?	theme	Unset follows the theme’s scrim
ScrimOpacity	double	0.4
IsAnimationEnabled	bool	true	Off makes every state change snap

Methods: ToggleAsync(side), SetStateAsync(side, state), GetState(side), GetPanel(side), GetEffectivePresentation(side), GetCurrentWidth(side), GetContentInset(side), WaitForTransitionAsync(side). Event: StateChanged.

ShinyFlyoutPage

A ShinyContentPage built around a FlyoutView.

Member	Notes
Detail	Content property — the page body, a View
Start / End	The panels
FlyoutView	The underlying view, for anything the passthroughs do not cover
ToggleAsync(side) / SetStateAsync(side, state) / GetState(side)

ShinyFlyout (attached)

Member	Notes
StartTemplate / EndTemplate	DataTemplate producing a FlyoutPanel. Set on a Shell, NavigationPage or Page
GetFlyoutView(page)	The flyout installed over a page, or null

IFlyoutService

Registered by UseShinyControls(). Resolves the flyout on the page currently showing.

Member	Notes
ToggleAsync(side = Start)
SetStateAsync(side, state)
GetState(side = Start)
GetPanel(side = Start)
StateChanged	Raised for any flyout