移动开发

maui-safe-area

dotnet/skills

.NET MAUI safe area and edge-to-edge layout guidance for .NET 10+. Covers the new SafeAreaEdges property, SafeAreaRegions enum, per-edge control, keyboard avoidance, Blazor Hybrid CSS safe areas, migration from legacy iOS-only APIs, and platform-specific behavior for Android, iOS, and Mac Catalyst. USE FOR: "safe area", "edge-to-edge", "SafeAreaEdges", "SafeAreaRegions", "keyboard avoidance", "notch insets", "status bar overlap", "iOS safe area", "Android edge-to-edge", "content behind status bar", "UseSafeArea migration", "soft input keyboard", "IgnoreSafeArea replacement". DO NOT USE FOR: general layout or grid design (use Grid and StackLayout), app lifecycle handling (use maui-app-lifecycle), theming or styling (use maui-theming), or Shell navigation structure.

  • 3388 次安装
  • 5800 星标
  • 收录于

安装命令

npx skills add https://github.com/dotnet/skills --skill maui-safe-area

SKILL.md

Safe Area & Edge-to-Edge Layout (.NET 10+)

.NET 10 introduces a brand-new, cross-platform safe area API that replaces the legacy iOS-only UseSafeArea and the layout-level IgnoreSafeArea properties. The new SafeAreaEdges property and SafeAreaRegions flags enum give you per-edge, per-control safe area management on Android, iOS, and Mac Catalyst from a single API surface.

This is new API surface in .NET 10. If the project targets .NET 9 or earlier, these APIs do not exist. Guide the developer to the legacy ios:Page.UseSafeArea and Layout.IgnoreSafeArea properties instead.

When to Use

  • Content overlaps status bar, notch, Dynamic Island, or home indicator after upgrading to .NET 10
  • Implementing edge-to-edge / immersive layouts (photo viewers, video players, maps)
  • Keyboard avoidance for chat or form UIs
  • Migrating from ios:Page.UseSafeArea, Layout.IgnoreSafeArea, or WindowSoftInputModeAdjust.Resize
  • Blazor Hybrid apps that need CSS env(safe-area-inset-*) coordination
  • Mixed layouts with an edge-to-edge header but a safe-area-respecting body

When Not to Use

Safe Area & Edge-to-Edge Layout (.NET 10+)

.NET 10 introduces a brand-new, cross-platform safe area API that replaces the legacy iOS-only UseSafeArea and the layout-level IgnoreSafeArea properties. The new SafeAreaEdges property and SafeAreaRegions flags enum give you per-edge, per-control safe area management on Android, iOS, and Mac Catalyst from a single API surface.

This is new API surface in .NET 10. If the project targets .NET 9 or earlier, these APIs do not exist. Guide the developer to the legacy ios:Page.UseSafeArea and Layout.IgnoreSafeArea properties instead.

When to Use

  • Content overlaps status bar, notch, Dynamic Island, or home indicator after upgrading to .NET 10
  • Implementing edge-to-edge / immersive layouts (photo viewers, video players, maps)
  • Keyboard avoidance for chat or form UIs
  • Migrating from ios:Page.UseSafeArea, Layout.IgnoreSafeArea, or WindowSoftInputModeAdjust.Resize
  • Blazor Hybrid apps that need CSS env(safe-area-inset-*) coordination
  • Mixed layouts with an edge-to-edge header but a safe-area-respecting body

When Not to Use