skills.rest
D1ssolve
D1ssolveCOMMUNITY
Explore all skills by this author →
GitHub

maui-safe-area

Configure .NET MAUI safe area and edge-to-edge layouts using SafeAreaEdges APIs.

1|Updated Jun 1, 2026
Search Tags:#xaml#dotnet maui#edge-to-edge#blazor hybrid#safe area#safeareaedges#keyboard avoidance
One-click install
npx skills add https://github.com/D1ssolve/craft-agents --skill maui-safe-area-d1ssolve
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: maui-safe-area
Source: https://github.com/D1ssolve/craft-agents/tree/main/skills/maui-safe-area
Command: npx skills add https://github.com/D1ssolve/craft-agents --skill maui-safe-area-d1ssolve

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? After upgrading to .NET 10, .NET MAUI apps default to edge-to-edge rendering, causing content to overlap status bars, notches, and keyboards. This Skill guides you through the new cross-platform SafeAreaEdges and SafeAreaRegions APIs to control per-edge insets on Android, iOS, and Mac Catalyst. ## Core Features & Use Cases - Per-edge safe area control: Apply SafeAreaRegions values (None, Container, SoftInput, All, Default) uniformly, per-axis, or per-edge via XAML or C#. - Keyboard avoidance and immersive layouts: Build chat UIs, photo viewers, and mixed layouts with edge-to-edge headers and safe bodies. - Blazor Hybrid integration: Coordinate CSS env(safe-area-inset-*) variables with viewport-fit=cover to avoid double-padding. - Legacy migration: Replace ios:Page.UseSafeArea, Layout.IgnoreSafeArea, and WindowSoftInputModeAdjust.Resize with the new API. - Use Case: Your Android content slides behind the status bar after upgrading to .NET 10; add SafeAreaEdges="Container" to the ContentPage to restore .NET 9 behavior. ## Quick Start Ask the AI to fix a .NET MAUI page whose content overlaps the status bar or keyboard using the SafeAreaEdges property.

Frequently Asked Questions about maui-safe-area

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix content going behind the status bar in .NET MAUI .NET 10?▼

Set SafeAreaEdges="Container" on the ContentPage to keep content inside system bars and notches. In .NET 10 the ContentPage default changed to None (edge-to-edge), which is a breaking change from .NET 9 Android behavior.

How do I handle keyboard avoidance in a .NET MAUI chat layout?▼

Apply SafeAreaRegions.SoftInput to the bottom edge, for example SafeAreaEdges="Container, Container, Container, SoftInput" on a Grid. Do not apply SoftInput directly to a ScrollView, since it ignores that flag; wrap the ScrollView in a Grid instead.

Does SafeAreaEdges work on .NET 9 or earlier?▼

No, SafeAreaEdges and SafeAreaRegions are new APIs introduced in .NET 10 and require net10.0-* target frameworks. For .NET 9 or earlier, use the legacy ios:Page.UseSafeArea and Layout.IgnoreSafeArea properties instead.

How do I use safe areas in a .NET MAUI Blazor Hybrid app?▼

Set SafeAreaEdges="None" on the page, add viewport-fit=cover to the viewport meta tag in index.html, and use CSS env(safe-area-inset-*) variables for padding. Avoid combining XAML safe area padding with CSS env() insets, which causes double-padding.

What replaces ios:Page.UseSafeArea and Layout.IgnoreSafeArea in .NET 10?▼

UseSafeArea="True" maps to SafeAreaEdges="Container", and IgnoreSafeArea="True" maps to SafeAreaEdges="None". WindowSoftInputModeAdjust.Resize is replaced by SafeAreaEdges="All" on the ContentPage. The legacy properties still compile but are obsolete.

Why is my edge-to-edge layout still padded in .NET MAUI?▼

Layouts such as Grid and StackLayout default to SafeAreaEdges Container even when the ContentPage is set to None. Set SafeAreaEdges="None" on both the page and the child layout for truly immersive content.

Related Skills

Explore More Software Engineering Skills→
dotnetdotnet
5.3k

maui-safe-area

Configure cross-platform safe area and edge-to-edge layouts in .NET MAUI apps.

Official
Intermediate
ramunasnognysramunasnognys
1

mobile-testing-playwright

Automate iOS and Android mobile testing with Playwright MCP for UI and interaction issues.

Community
Intermediate
kongliulikongliuli

avalonia-stylist

Create Avalonia theme stylesheets and resource dictionaries for cross-platform apps.

Community
Intermediate
snailb1007snailb1007

maui-safe-area

Configure SafeAreaEdges and SafeAreaRegions for .NET MAUI layouts across platforms.

Community
Advanced