[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-dotnet-maui-safe-area":3,"mdc-c1zpx0-key":37,"related-repo-dotnet-maui-safe-area":2726,"related-org-dotnet-maui-safe-area":2834},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":25,"repoUrl":26,"updatedAt":27,"license":28,"forks":29,"topics":30,"repo":32,"sourceUrl":35,"mdContent":36},"maui-safe-area","implement MAUI safe area layouts",".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.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},"dotnet",".NET (Microsoft)","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fdotnet.png",[12,16,19,22],{"name":13,"slug":14,"type":15},"MAUI","maui","tag",{"name":17,"slug":18,"type":15},"Mobile","mobile",{"name":20,"slug":21,"type":15},"UI Components","ui-components",{"name":23,"slug":24,"type":15},"Design","design",4576,"https:\u002F\u002Fgithub.com\u002Fdotnet\u002Fskills","2026-08-01T05:42:19.182618","MIT",332,[31],"agent-skills",{"repoUrl":26,"stars":25,"forks":29,"topics":33,"description":34},[31],"Repository for skills to assist AI coding agents with .NET and C#","https:\u002F\u002Fgithub.com\u002Fdotnet\u002Fskills\u002Ftree\u002FHEAD\u002Fplugins\u002Fdotnet-maui\u002Fskills\u002Fmaui-safe-area","---\nname: maui-safe-area\ndescription: >-\n  .NET MAUI safe area and edge-to-edge layout guidance for .NET 10+. Covers the\n  new SafeAreaEdges property, SafeAreaRegions enum, per-edge control, keyboard\n  avoidance, Blazor Hybrid CSS safe areas, migration from legacy iOS-only APIs,\n  and platform-specific behavior for Android, iOS, and Mac Catalyst.\n  USE FOR: \"safe area\", \"edge-to-edge\", \"SafeAreaEdges\", \"SafeAreaRegions\",\n  \"keyboard avoidance\", \"notch insets\", \"status bar overlap\", \"iOS safe area\",\n  \"Android edge-to-edge\", \"content behind status bar\", \"UseSafeArea migration\",\n  \"soft input keyboard\", \"IgnoreSafeArea replacement\".\n  DO NOT USE FOR: general layout or grid design (use Grid and StackLayout),\n  app lifecycle handling (use maui-app-lifecycle), theming or styling\n  (use maui-theming), or Shell navigation structure.\nlicense: MIT\n---\n\n# Safe Area & Edge-to-Edge Layout (.NET 10+)\n\n.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.\n\n> **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.\n\n## When to Use\n\n- Content overlaps status bar, notch, Dynamic Island, or home indicator after upgrading to .NET 10\n- Implementing edge-to-edge \u002F immersive layouts (photo viewers, video players, maps)\n- Keyboard avoidance for chat or form UIs\n- Migrating from `ios:Page.UseSafeArea`, `Layout.IgnoreSafeArea`, or `WindowSoftInputModeAdjust.Resize`\n- Blazor Hybrid apps that need CSS `env(safe-area-inset-*)` coordination\n- Mixed layouts with an edge-to-edge header but a safe-area-respecting body\n\n## When Not to Use\n\n- Projects targeting .NET 9 or earlier — use the legacy iOS-specific APIs\n- General page layout questions unrelated to system bars or keyboard — use standard layout guidance\n- App lifecycle or navigation structure — use maui-app-lifecycle or Shell guidance\n- Theming or visual styling — use the **maui-theming** skill\n\n## Inputs\n\n- Target framework: must be `net10.0-*` or later for the new APIs\n- Target platforms: Android, iOS, Mac Catalyst (Windows does not have system bar insets)\n- UI approach: XAML\u002FC#, Blazor Hybrid, or MauiReactor\n\n## SafeAreaRegions Enum\n\n```csharp\n[Flags]\npublic enum SafeAreaRegions\n{\n    None      = 0,       \u002F\u002F Edge-to-edge — no safe area padding\n    SoftInput = 1 \u003C\u003C 0,  \u002F\u002F Pad to avoid the on-screen keyboard\n    Container = 1 \u003C\u003C 1,  \u002F\u002F Stay inside status bar, notch, home indicator\n    Default   = -1,      \u002F\u002F Use the platform default for the control type\n    All       = 1 \u003C\u003C 15  \u002F\u002F Respect all safe area insets (most restrictive)\n}\n```\n\n`SoftInput` and `Container` are combinable flags:\n`SafeAreaRegions.Container | SafeAreaRegions.SoftInput` = respect system bars **and** keyboard.\n\n## SafeAreaEdges Struct\n\n```csharp\npublic readonly struct SafeAreaEdges\n{\n    public SafeAreaRegions Left { get; }\n    public SafeAreaRegions Top { get; }\n    public SafeAreaRegions Right { get; }\n    public SafeAreaRegions Bottom { get; }\n\n    \u002F\u002F Uniform — same value for all four edges\n    public SafeAreaEdges(SafeAreaRegions uniformValue)\n\n    \u002F\u002F Horizontal \u002F Vertical\n    public SafeAreaEdges(SafeAreaRegions horizontal, SafeAreaRegions vertical)\n\n    \u002F\u002F Per-edge\n    public SafeAreaEdges(SafeAreaRegions left, SafeAreaRegions top,\n                         SafeAreaRegions right, SafeAreaRegions bottom)\n}\n```\n\nStatic presets: `SafeAreaEdges.None`, `SafeAreaEdges.All`, `SafeAreaEdges.Default`.\n\n### XAML Type Converter\n\nFollows Thickness-like comma-separated syntax:\n\n```xaml\n\u003C!-- Uniform -->\nSafeAreaEdges=\"Container\"\n\n\u003C!-- Horizontal, Vertical -->\nSafeAreaEdges=\"Container, SoftInput\"\n\n\u003C!-- Left, Top, Right, Bottom -->\nSafeAreaEdges=\"Container, Container, Container, SoftInput\"\n```\n\n## Control Defaults\n\n| Control | Default | Notes |\n|---------|---------|-------|\n| `ContentPage` | `None` | Edge-to-edge. **Breaking change from .NET 9 on Android.** |\n| `Layout` (Grid, StackLayout, etc.) | `Container` | Respects bars\u002Fnotch, flows under keyboard |\n| `ScrollView` | `Default` | iOS maps to automatic content insets. Only `Container` and `None` take effect. |\n| `ContentView` | `None` | Inherits parent behavior |\n| `Border` | `None` | Inherits parent behavior |\n\n## Breaking Changes from .NET 9\n\n### ContentPage default changed to `None`\n\nIn .NET 9, Android `ContentPage` behaved like `Container`. In .NET 10, the default is `None` on **all platforms**. If your Android content goes behind the status bar after upgrading:\n\n```xaml\n\u003C!-- .NET 10 default — content extends under status bar -->\n\u003CContentPage>\n\n\u003C!-- Restore .NET 9 Android behavior -->\n\u003CContentPage SafeAreaEdges=\"Container\">\n```\n\n### WindowSoftInputModeAdjust.Resize superseded\n\n`WindowSoftInputModeAdjust.Resize` still exists and still compiles (it is not removed and not obsolete), but it is Android-only. For cross-platform keyboard avoidance prefer `SafeAreaEdges=\"All\"` (or the `SoftInput` region) on the ContentPage.\n\n## Usage Patterns\n\n### Edge-to-edge immersive content\n\nSet `None` on **both** page and layout — layouts default to `Container`:\n\n```xaml\n\u003CContentPage SafeAreaEdges=\"None\">\n    \u003CGrid SafeAreaEdges=\"None\">\n        \u003CImage Source=\"background.jpg\" Aspect=\"AspectFill\" \u002F>\n        \u003CVerticalStackLayout Padding=\"20\" VerticalOptions=\"End\">\n            \u003CLabel Text=\"Overlay text\" TextColor=\"White\" FontSize=\"24\" \u002F>\n        \u003C\u002FVerticalStackLayout>\n    \u003C\u002FGrid>\n\u003C\u002FContentPage>\n```\n\n### Forms and critical content\n\n```xaml\n\u003CContentPage SafeAreaEdges=\"All\">\n    \u003CVerticalStackLayout Padding=\"20\">\n        \u003CLabel Text=\"Safe content\" FontSize=\"18\" \u002F>\n        \u003CEntry Placeholder=\"Enter text\" \u002F>\n        \u003CButton Text=\"Submit\" \u002F>\n    \u003C\u002FVerticalStackLayout>\n\u003C\u002FContentPage>\n```\n\n### Keyboard-aware chat layout\n\n```xaml\n\u003CContentPage>\n    \u003CGrid RowDefinitions=\"*,Auto\"\n          SafeAreaEdges=\"Container, Container, Container, SoftInput\">\n        \u003CScrollView Grid.Row=\"0\">\n            \u003CVerticalStackLayout Padding=\"20\" Spacing=\"10\">\n                \u003CLabel Text=\"Messages\" FontSize=\"24\" \u002F>\n            \u003C\u002FVerticalStackLayout>\n        \u003C\u002FScrollView>\n        \u003CBorder Grid.Row=\"1\" BackgroundColor=\"LightGray\" Padding=\"20\">\n            \u003CGrid ColumnDefinitions=\"*,Auto\" Spacing=\"10\">\n                \u003CEntry Placeholder=\"Type a message...\" \u002F>\n                \u003CButton Grid.Column=\"1\" Text=\"Send\" \u002F>\n            \u003C\u002FGrid>\n        \u003C\u002FBorder>\n    \u003C\u002FGrid>\n\u003C\u002FContentPage>\n```\n\n### Mixed: edge-to-edge header + safe body + keyboard footer\n\n```xaml\n\u003CContentPage SafeAreaEdges=\"None\">\n    \u003CGrid RowDefinitions=\"Auto,*,Auto\">\n        \u003CGrid BackgroundColor=\"{StaticResource Primary}\">\n            \u003CLabel Text=\"App Header\" TextColor=\"White\" Margin=\"20,40,20,20\" \u002F>\n        \u003C\u002FGrid>\n        \u003CScrollView Grid.Row=\"1\" SafeAreaEdges=\"Container\">\n            \u003C!-- Use Container, not All — ScrollView only honors Container and None -->\n            \u003CVerticalStackLayout Padding=\"20\">\n                \u003CLabel Text=\"Main content\" \u002F>\n            \u003C\u002FVerticalStackLayout>\n        \u003C\u002FScrollView>\n        \u003CGrid Grid.Row=\"2\" SafeAreaEdges=\"SoftInput\"\n              BackgroundColor=\"LightGray\" Padding=\"20\">\n            \u003CEntry Placeholder=\"Type a message...\" \u002F>\n        \u003C\u002FGrid>\n    \u003C\u002FGrid>\n\u003C\u002FContentPage>\n```\n\n### Programmatic (C#)\n\n```csharp\nvar page = new ContentPage\n{\n    SafeAreaEdges = SafeAreaEdges.All\n};\n\nvar grid = new Grid\n{\n    SafeAreaEdges = new SafeAreaEdges(\n        left: SafeAreaRegions.Container,\n        top: SafeAreaRegions.Container,\n        right: SafeAreaRegions.Container,\n        bottom: SafeAreaRegions.SoftInput)\n};\n```\n\n## Decision Framework\n\n| Scenario | SafeAreaEdges value |\n|----------|---------------------|\n| Forms, critical inputs | `All` |\n| Photo viewer, video player, game | `None` (on page **and** layout) |\n| Scrollable content with fixed header\u002Ffooter | `Container` |\n| Chat\u002Fmessaging with bottom input bar | Per-edge: `Container, Container, Container, SoftInput` |\n| Blazor Hybrid app | `None` on page; CSS `env()` for insets |\n\n## Blazor Hybrid Integration\n\nFor Blazor Hybrid apps, let CSS handle safe areas to avoid double-padding.\n\n1. **Page stays edge-to-edge** (default in .NET 10):\n\n```xaml\n\u003CContentPage SafeAreaEdges=\"None\">\n    \u003CBlazorWebView HostPage=\"wwwroot\u002Findex.html\">\n        \u003CBlazorWebView.RootComponents>\n            \u003CRootComponent Selector=\"#app\" ComponentType=\"{x:Type local:Routes}\" \u002F>\n        \u003C\u002FBlazorWebView.RootComponents>\n    \u003C\u002FBlazorWebView>\n\u003C\u002FContentPage>\n```\n\n2. **Add `viewport-fit=cover`** in `index.html`:\n\n```html\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0,\n      maximum-scale=1.0, user-scalable=no, viewport-fit=cover\" \u002F>\n```\n\n3. **Use CSS `env()` functions**:\n\n```css\nbody {\n    padding-top: env(safe-area-inset-top);\n    padding-bottom: env(safe-area-inset-bottom);\n    padding-left: env(safe-area-inset-left);\n    padding-right: env(safe-area-inset-right);\n}\n```\n\nAvailable CSS environment variables: `env(safe-area-inset-top)`, `env(safe-area-inset-bottom)`, `env(safe-area-inset-left)`, `env(safe-area-inset-right)`.\n\n## Migration from Legacy APIs\n\n| Legacy (.NET 9 and earlier) | New (.NET 10+) |\n|-----------------------------|----------------|\n| `ios:Page.UseSafeArea=\"True\"` | `SafeAreaEdges=\"Container\"` |\n| `Layout.IgnoreSafeArea=\"True\"` | `SafeAreaEdges=\"None\"` |\n| `WindowSoftInputModeAdjust.Resize` | `SafeAreaEdges=\"All\"` on ContentPage |\n\nThe legacy `ios:Page.UseSafeArea` and `Layout.IgnoreSafeArea` properties still compile but are marked obsolete. `IgnoreSafeArea=\"True\"` maps internally to `SafeAreaRegions.None`. `WindowSoftInputModeAdjust.Resize` is **not** obsolete — it remains supported, but is Android-only.\n\n```xaml\n\u003C!-- .NET 9 (legacy, iOS-only) -->\n\u003CContentPage xmlns:ios=\"clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls\"\n             ios:Page.UseSafeArea=\"True\">\n\n\u003C!-- .NET 10+ (cross-platform) -->\n\u003CContentPage SafeAreaEdges=\"Container\">\n```\n\n## Platform-Specific Behavior\n\n### iOS & Mac Catalyst\n\n- Safe area insets cover: status bar, navigation bar, tab bar, notch\u002FDynamic Island, home indicator\n- `SoftInput` includes the keyboard when visible\n- Insets update automatically on rotation and UI visibility changes\n- `ScrollView` with `Default` maps to `UIScrollViewContentInsetAdjustmentBehavior.Automatic`\n\nTransparent navigation bar for content behind the nav bar:\n\n```xaml\n\u003CShell Shell.BackgroundColor=\"#80000000\" Shell.NavBarHasShadow=\"False\" \u002F>\n```\n\n### Android\n\n- Safe area insets cover: system bars (status\u002Fnavigation) and display cutouts\n- `SoftInput` includes the soft keyboard\n- MAUI uses `WindowInsetsCompat` and `WindowInsetsAnimationCompat` internally\n- Behavior varies by Android version and OEM edge-to-edge settings\n\n## Common Pitfalls\n\n1. **Forgetting to set `None` on the layout too.** `ContentPage SafeAreaEdges=\"None\"` makes the page edge-to-edge, but child layouts default to `Container` and still pad inward. Set `None` on both page and layout for truly immersive content.\n\n2. **Using `SoftInput` directly on ScrollView.** ScrollView manages its own content insets and ignores `SoftInput`. Wrap the ScrollView in a Grid or StackLayout and apply `SoftInput` there.\n\n3. **Confusing `Default` with `None`.** `Default` means \"platform default for this control type\" — on ScrollView (iOS) this enables automatic content insets. `None` means \"no safe area padding at all.\"\n\n4. **Double-padding in Blazor Hybrid.** Setting `SafeAreaEdges=\"Container\"` on the page **and** using CSS `env(safe-area-inset-*)` results in doubled insets. Pick one approach — CSS is recommended for Blazor.\n\n5. **Missing `viewport-fit=cover` in Blazor.** Without this meta tag, CSS `env(safe-area-inset-*)` values are always zero on iOS.\n\n6. **Assuming .NET 9 behavior on Android.** After upgrading to .NET 10, Android `ContentPage` defaults to `None` (was effectively `Container`). Add `SafeAreaEdges=\"Container\"` to restore the previous behavior.\n\n7. **Using legacy `ios:Page.UseSafeArea` in new code.** The old API is iOS-only and obsolete. Always use `SafeAreaEdges` for cross-platform safe area management.\n\n## Checklist\n\n- [ ] Android upgrade: `SafeAreaEdges=\"Container\"` added if content goes under status bar\n- [ ] Edge-to-edge: `None` set on **both** page and layout\n- [ ] ScrollView keyboard avoidance uses wrapper Grid, not ScrollView's own `SafeAreaEdges`\n- [ ] Blazor Hybrid: using either XAML or CSS safe areas, not both\n- [ ] `viewport-fit=cover` in Blazor's `index.html` `\u003Cmeta viewport>` tag\n- [ ] Legacy `UseSafeArea` \u002F `IgnoreSafeArea` migrated to `SafeAreaEdges`\n",{"data":38,"body":39},{"name":4,"description":6,"license":28},{"type":40,"children":41},"root",[42,51,98,128,135,198,204,234,240,266,272,366,399,405,553,580,587,592,663,669,847,853,864,897,943,949,974,980,986,1011,1082,1088,1150,1156,1288,1294,1431,1437,1544,1550,1674,1680,1685,1699,1760,1786,1871,1890,2007,2040,2046,2131,2179,2232,2238,2244,2290,2295,2309,2315,2358,2364,2588,2594,2720],{"type":43,"tag":44,"props":45,"children":47},"element","h1",{"id":46},"safe-area-edge-to-edge-layout-net-10",[48],{"type":49,"value":50},"text","Safe Area & Edge-to-Edge Layout (.NET 10+)",{"type":43,"tag":52,"props":53,"children":54},"p",{},[55,57,63,65,72,74,80,82,88,90,96],{"type":49,"value":56},".NET 10 introduces a ",{"type":43,"tag":58,"props":59,"children":60},"strong",{},[61],{"type":49,"value":62},"brand-new, cross-platform safe area API",{"type":49,"value":64}," that replaces the legacy iOS-only ",{"type":43,"tag":66,"props":67,"children":69},"code",{"className":68},[],[70],{"type":49,"value":71},"UseSafeArea",{"type":49,"value":73}," and the layout-level ",{"type":43,"tag":66,"props":75,"children":77},{"className":76},[],[78],{"type":49,"value":79},"IgnoreSafeArea",{"type":49,"value":81}," properties. The new ",{"type":43,"tag":66,"props":83,"children":85},{"className":84},[],[86],{"type":49,"value":87},"SafeAreaEdges",{"type":49,"value":89}," property and ",{"type":43,"tag":66,"props":91,"children":93},{"className":92},[],[94],{"type":49,"value":95},"SafeAreaRegions",{"type":49,"value":97}," flags enum give you per-edge, per-control safe area management on Android, iOS, and Mac Catalyst from a single API surface.",{"type":43,"tag":99,"props":100,"children":101},"blockquote",{},[102],{"type":43,"tag":52,"props":103,"children":104},{},[105,110,112,118,120,126],{"type":43,"tag":58,"props":106,"children":107},{},[108],{"type":49,"value":109},"This is new API surface in .NET 10.",{"type":49,"value":111}," If the project targets .NET 9 or earlier, these APIs do not exist. Guide the developer to the legacy ",{"type":43,"tag":66,"props":113,"children":115},{"className":114},[],[116],{"type":49,"value":117},"ios:Page.UseSafeArea",{"type":49,"value":119}," and ",{"type":43,"tag":66,"props":121,"children":123},{"className":122},[],[124],{"type":49,"value":125},"Layout.IgnoreSafeArea",{"type":49,"value":127}," properties instead.",{"type":43,"tag":129,"props":130,"children":132},"h2",{"id":131},"when-to-use",[133],{"type":49,"value":134},"When to Use",{"type":43,"tag":136,"props":137,"children":138},"ul",{},[139,145,150,155,180,193],{"type":43,"tag":140,"props":141,"children":142},"li",{},[143],{"type":49,"value":144},"Content overlaps status bar, notch, Dynamic Island, or home indicator after upgrading to .NET 10",{"type":43,"tag":140,"props":146,"children":147},{},[148],{"type":49,"value":149},"Implementing edge-to-edge \u002F immersive layouts (photo viewers, video players, maps)",{"type":43,"tag":140,"props":151,"children":152},{},[153],{"type":49,"value":154},"Keyboard avoidance for chat or form UIs",{"type":43,"tag":140,"props":156,"children":157},{},[158,160,165,167,172,174],{"type":49,"value":159},"Migrating from ",{"type":43,"tag":66,"props":161,"children":163},{"className":162},[],[164],{"type":49,"value":117},{"type":49,"value":166},", ",{"type":43,"tag":66,"props":168,"children":170},{"className":169},[],[171],{"type":49,"value":125},{"type":49,"value":173},", or ",{"type":43,"tag":66,"props":175,"children":177},{"className":176},[],[178],{"type":49,"value":179},"WindowSoftInputModeAdjust.Resize",{"type":43,"tag":140,"props":181,"children":182},{},[183,185,191],{"type":49,"value":184},"Blazor Hybrid apps that need CSS ",{"type":43,"tag":66,"props":186,"children":188},{"className":187},[],[189],{"type":49,"value":190},"env(safe-area-inset-*)",{"type":49,"value":192}," coordination",{"type":43,"tag":140,"props":194,"children":195},{},[196],{"type":49,"value":197},"Mixed layouts with an edge-to-edge header but a safe-area-respecting body",{"type":43,"tag":129,"props":199,"children":201},{"id":200},"when-not-to-use",[202],{"type":49,"value":203},"When Not to Use",{"type":43,"tag":136,"props":205,"children":206},{},[207,212,217,222],{"type":43,"tag":140,"props":208,"children":209},{},[210],{"type":49,"value":211},"Projects targeting .NET 9 or earlier — use the legacy iOS-specific APIs",{"type":43,"tag":140,"props":213,"children":214},{},[215],{"type":49,"value":216},"General page layout questions unrelated to system bars or keyboard — use standard layout guidance",{"type":43,"tag":140,"props":218,"children":219},{},[220],{"type":49,"value":221},"App lifecycle or navigation structure — use maui-app-lifecycle or Shell guidance",{"type":43,"tag":140,"props":223,"children":224},{},[225,227,232],{"type":49,"value":226},"Theming or visual styling — use the ",{"type":43,"tag":58,"props":228,"children":229},{},[230],{"type":49,"value":231},"maui-theming",{"type":49,"value":233}," skill",{"type":43,"tag":129,"props":235,"children":237},{"id":236},"inputs",[238],{"type":49,"value":239},"Inputs",{"type":43,"tag":136,"props":241,"children":242},{},[243,256,261],{"type":43,"tag":140,"props":244,"children":245},{},[246,248,254],{"type":49,"value":247},"Target framework: must be ",{"type":43,"tag":66,"props":249,"children":251},{"className":250},[],[252],{"type":49,"value":253},"net10.0-*",{"type":49,"value":255}," or later for the new APIs",{"type":43,"tag":140,"props":257,"children":258},{},[259],{"type":49,"value":260},"Target platforms: Android, iOS, Mac Catalyst (Windows does not have system bar insets)",{"type":43,"tag":140,"props":262,"children":263},{},[264],{"type":49,"value":265},"UI approach: XAML\u002FC#, Blazor Hybrid, or MauiReactor",{"type":43,"tag":129,"props":267,"children":269},{"id":268},"safearearegions-enum",[270],{"type":49,"value":271},"SafeAreaRegions Enum",{"type":43,"tag":273,"props":274,"children":279},"pre",{"className":275,"code":276,"language":277,"meta":278,"style":278},"language-csharp shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","[Flags]\npublic enum SafeAreaRegions\n{\n    None      = 0,       \u002F\u002F Edge-to-edge — no safe area padding\n    SoftInput = 1 \u003C\u003C 0,  \u002F\u002F Pad to avoid the on-screen keyboard\n    Container = 1 \u003C\u003C 1,  \u002F\u002F Stay inside status bar, notch, home indicator\n    Default   = -1,      \u002F\u002F Use the platform default for the control type\n    All       = 1 \u003C\u003C 15  \u002F\u002F Respect all safe area insets (most restrictive)\n}\n","csharp","",[280],{"type":43,"tag":66,"props":281,"children":282},{"__ignoreMap":278},[283,294,303,312,321,330,339,348,357],{"type":43,"tag":284,"props":285,"children":288},"span",{"class":286,"line":287},"line",1,[289],{"type":43,"tag":284,"props":290,"children":291},{},[292],{"type":49,"value":293},"[Flags]\n",{"type":43,"tag":284,"props":295,"children":297},{"class":286,"line":296},2,[298],{"type":43,"tag":284,"props":299,"children":300},{},[301],{"type":49,"value":302},"public enum SafeAreaRegions\n",{"type":43,"tag":284,"props":304,"children":306},{"class":286,"line":305},3,[307],{"type":43,"tag":284,"props":308,"children":309},{},[310],{"type":49,"value":311},"{\n",{"type":43,"tag":284,"props":313,"children":315},{"class":286,"line":314},4,[316],{"type":43,"tag":284,"props":317,"children":318},{},[319],{"type":49,"value":320},"    None      = 0,       \u002F\u002F Edge-to-edge — no safe area padding\n",{"type":43,"tag":284,"props":322,"children":324},{"class":286,"line":323},5,[325],{"type":43,"tag":284,"props":326,"children":327},{},[328],{"type":49,"value":329},"    SoftInput = 1 \u003C\u003C 0,  \u002F\u002F Pad to avoid the on-screen keyboard\n",{"type":43,"tag":284,"props":331,"children":333},{"class":286,"line":332},6,[334],{"type":43,"tag":284,"props":335,"children":336},{},[337],{"type":49,"value":338},"    Container = 1 \u003C\u003C 1,  \u002F\u002F Stay inside status bar, notch, home indicator\n",{"type":43,"tag":284,"props":340,"children":342},{"class":286,"line":341},7,[343],{"type":43,"tag":284,"props":344,"children":345},{},[346],{"type":49,"value":347},"    Default   = -1,      \u002F\u002F Use the platform default for the control type\n",{"type":43,"tag":284,"props":349,"children":351},{"class":286,"line":350},8,[352],{"type":43,"tag":284,"props":353,"children":354},{},[355],{"type":49,"value":356},"    All       = 1 \u003C\u003C 15  \u002F\u002F Respect all safe area insets (most restrictive)\n",{"type":43,"tag":284,"props":358,"children":360},{"class":286,"line":359},9,[361],{"type":43,"tag":284,"props":362,"children":363},{},[364],{"type":49,"value":365},"}\n",{"type":43,"tag":52,"props":367,"children":368},{},[369,375,376,382,384,390,392,397],{"type":43,"tag":66,"props":370,"children":372},{"className":371},[],[373],{"type":49,"value":374},"SoftInput",{"type":49,"value":119},{"type":43,"tag":66,"props":377,"children":379},{"className":378},[],[380],{"type":49,"value":381},"Container",{"type":49,"value":383}," are combinable flags:\n",{"type":43,"tag":66,"props":385,"children":387},{"className":386},[],[388],{"type":49,"value":389},"SafeAreaRegions.Container | SafeAreaRegions.SoftInput",{"type":49,"value":391}," = respect system bars ",{"type":43,"tag":58,"props":393,"children":394},{},[395],{"type":49,"value":396},"and",{"type":49,"value":398}," keyboard.",{"type":43,"tag":129,"props":400,"children":402},{"id":401},"safeareaedges-struct",[403],{"type":49,"value":404},"SafeAreaEdges Struct",{"type":43,"tag":273,"props":406,"children":408},{"className":275,"code":407,"language":277,"meta":278,"style":278},"public readonly struct SafeAreaEdges\n{\n    public SafeAreaRegions Left { get; }\n    public SafeAreaRegions Top { get; }\n    public SafeAreaRegions Right { get; }\n    public SafeAreaRegions Bottom { get; }\n\n    \u002F\u002F Uniform — same value for all four edges\n    public SafeAreaEdges(SafeAreaRegions uniformValue)\n\n    \u002F\u002F Horizontal \u002F Vertical\n    public SafeAreaEdges(SafeAreaRegions horizontal, SafeAreaRegions vertical)\n\n    \u002F\u002F Per-edge\n    public SafeAreaEdges(SafeAreaRegions left, SafeAreaRegions top,\n                         SafeAreaRegions right, SafeAreaRegions bottom)\n}\n",[409],{"type":43,"tag":66,"props":410,"children":411},{"__ignoreMap":278},[412,420,427,435,443,451,459,468,476,484,492,501,510,518,527,536,545],{"type":43,"tag":284,"props":413,"children":414},{"class":286,"line":287},[415],{"type":43,"tag":284,"props":416,"children":417},{},[418],{"type":49,"value":419},"public readonly struct SafeAreaEdges\n",{"type":43,"tag":284,"props":421,"children":422},{"class":286,"line":296},[423],{"type":43,"tag":284,"props":424,"children":425},{},[426],{"type":49,"value":311},{"type":43,"tag":284,"props":428,"children":429},{"class":286,"line":305},[430],{"type":43,"tag":284,"props":431,"children":432},{},[433],{"type":49,"value":434},"    public SafeAreaRegions Left { get; }\n",{"type":43,"tag":284,"props":436,"children":437},{"class":286,"line":314},[438],{"type":43,"tag":284,"props":439,"children":440},{},[441],{"type":49,"value":442},"    public SafeAreaRegions Top { get; }\n",{"type":43,"tag":284,"props":444,"children":445},{"class":286,"line":323},[446],{"type":43,"tag":284,"props":447,"children":448},{},[449],{"type":49,"value":450},"    public SafeAreaRegions Right { get; }\n",{"type":43,"tag":284,"props":452,"children":453},{"class":286,"line":332},[454],{"type":43,"tag":284,"props":455,"children":456},{},[457],{"type":49,"value":458},"    public SafeAreaRegions Bottom { get; }\n",{"type":43,"tag":284,"props":460,"children":461},{"class":286,"line":341},[462],{"type":43,"tag":284,"props":463,"children":465},{"emptyLinePlaceholder":464},true,[466],{"type":49,"value":467},"\n",{"type":43,"tag":284,"props":469,"children":470},{"class":286,"line":350},[471],{"type":43,"tag":284,"props":472,"children":473},{},[474],{"type":49,"value":475},"    \u002F\u002F Uniform — same value for all four edges\n",{"type":43,"tag":284,"props":477,"children":478},{"class":286,"line":359},[479],{"type":43,"tag":284,"props":480,"children":481},{},[482],{"type":49,"value":483},"    public SafeAreaEdges(SafeAreaRegions uniformValue)\n",{"type":43,"tag":284,"props":485,"children":487},{"class":286,"line":486},10,[488],{"type":43,"tag":284,"props":489,"children":490},{"emptyLinePlaceholder":464},[491],{"type":49,"value":467},{"type":43,"tag":284,"props":493,"children":495},{"class":286,"line":494},11,[496],{"type":43,"tag":284,"props":497,"children":498},{},[499],{"type":49,"value":500},"    \u002F\u002F Horizontal \u002F Vertical\n",{"type":43,"tag":284,"props":502,"children":504},{"class":286,"line":503},12,[505],{"type":43,"tag":284,"props":506,"children":507},{},[508],{"type":49,"value":509},"    public SafeAreaEdges(SafeAreaRegions horizontal, SafeAreaRegions vertical)\n",{"type":43,"tag":284,"props":511,"children":513},{"class":286,"line":512},13,[514],{"type":43,"tag":284,"props":515,"children":516},{"emptyLinePlaceholder":464},[517],{"type":49,"value":467},{"type":43,"tag":284,"props":519,"children":521},{"class":286,"line":520},14,[522],{"type":43,"tag":284,"props":523,"children":524},{},[525],{"type":49,"value":526},"    \u002F\u002F Per-edge\n",{"type":43,"tag":284,"props":528,"children":530},{"class":286,"line":529},15,[531],{"type":43,"tag":284,"props":532,"children":533},{},[534],{"type":49,"value":535},"    public SafeAreaEdges(SafeAreaRegions left, SafeAreaRegions top,\n",{"type":43,"tag":284,"props":537,"children":539},{"class":286,"line":538},16,[540],{"type":43,"tag":284,"props":541,"children":542},{},[543],{"type":49,"value":544},"                         SafeAreaRegions right, SafeAreaRegions bottom)\n",{"type":43,"tag":284,"props":546,"children":548},{"class":286,"line":547},17,[549],{"type":43,"tag":284,"props":550,"children":551},{},[552],{"type":49,"value":365},{"type":43,"tag":52,"props":554,"children":555},{},[556,558,564,565,571,572,578],{"type":49,"value":557},"Static presets: ",{"type":43,"tag":66,"props":559,"children":561},{"className":560},[],[562],{"type":49,"value":563},"SafeAreaEdges.None",{"type":49,"value":166},{"type":43,"tag":66,"props":566,"children":568},{"className":567},[],[569],{"type":49,"value":570},"SafeAreaEdges.All",{"type":49,"value":166},{"type":43,"tag":66,"props":573,"children":575},{"className":574},[],[576],{"type":49,"value":577},"SafeAreaEdges.Default",{"type":49,"value":579},".",{"type":43,"tag":581,"props":582,"children":584},"h3",{"id":583},"xaml-type-converter",[585],{"type":49,"value":586},"XAML Type Converter",{"type":43,"tag":52,"props":588,"children":589},{},[590],{"type":49,"value":591},"Follows Thickness-like comma-separated syntax:",{"type":43,"tag":273,"props":593,"children":597},{"className":594,"code":595,"language":596,"meta":278,"style":278},"language-xaml shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- Uniform -->\nSafeAreaEdges=\"Container\"\n\n\u003C!-- Horizontal, Vertical -->\nSafeAreaEdges=\"Container, SoftInput\"\n\n\u003C!-- Left, Top, Right, Bottom -->\nSafeAreaEdges=\"Container, Container, Container, SoftInput\"\n","xaml",[598],{"type":43,"tag":66,"props":599,"children":600},{"__ignoreMap":278},[601,609,617,624,632,640,647,655],{"type":43,"tag":284,"props":602,"children":603},{"class":286,"line":287},[604],{"type":43,"tag":284,"props":605,"children":606},{},[607],{"type":49,"value":608},"\u003C!-- Uniform -->\n",{"type":43,"tag":284,"props":610,"children":611},{"class":286,"line":296},[612],{"type":43,"tag":284,"props":613,"children":614},{},[615],{"type":49,"value":616},"SafeAreaEdges=\"Container\"\n",{"type":43,"tag":284,"props":618,"children":619},{"class":286,"line":305},[620],{"type":43,"tag":284,"props":621,"children":622},{"emptyLinePlaceholder":464},[623],{"type":49,"value":467},{"type":43,"tag":284,"props":625,"children":626},{"class":286,"line":314},[627],{"type":43,"tag":284,"props":628,"children":629},{},[630],{"type":49,"value":631},"\u003C!-- Horizontal, Vertical -->\n",{"type":43,"tag":284,"props":633,"children":634},{"class":286,"line":323},[635],{"type":43,"tag":284,"props":636,"children":637},{},[638],{"type":49,"value":639},"SafeAreaEdges=\"Container, SoftInput\"\n",{"type":43,"tag":284,"props":641,"children":642},{"class":286,"line":332},[643],{"type":43,"tag":284,"props":644,"children":645},{"emptyLinePlaceholder":464},[646],{"type":49,"value":467},{"type":43,"tag":284,"props":648,"children":649},{"class":286,"line":341},[650],{"type":43,"tag":284,"props":651,"children":652},{},[653],{"type":49,"value":654},"\u003C!-- Left, Top, Right, Bottom -->\n",{"type":43,"tag":284,"props":656,"children":657},{"class":286,"line":350},[658],{"type":43,"tag":284,"props":659,"children":660},{},[661],{"type":49,"value":662},"SafeAreaEdges=\"Container, Container, Container, SoftInput\"\n",{"type":43,"tag":129,"props":664,"children":666},{"id":665},"control-defaults",[667],{"type":49,"value":668},"Control Defaults",{"type":43,"tag":670,"props":671,"children":672},"table",{},[673,697],{"type":43,"tag":674,"props":675,"children":676},"thead",{},[677],{"type":43,"tag":678,"props":679,"children":680},"tr",{},[681,687,692],{"type":43,"tag":682,"props":683,"children":684},"th",{},[685],{"type":49,"value":686},"Control",{"type":43,"tag":682,"props":688,"children":689},{},[690],{"type":49,"value":691},"Default",{"type":43,"tag":682,"props":693,"children":694},{},[695],{"type":49,"value":696},"Notes",{"type":43,"tag":698,"props":699,"children":700},"tbody",{},[701,733,760,798,823],{"type":43,"tag":678,"props":702,"children":703},{},[704,714,723],{"type":43,"tag":705,"props":706,"children":707},"td",{},[708],{"type":43,"tag":66,"props":709,"children":711},{"className":710},[],[712],{"type":49,"value":713},"ContentPage",{"type":43,"tag":705,"props":715,"children":716},{},[717],{"type":43,"tag":66,"props":718,"children":720},{"className":719},[],[721],{"type":49,"value":722},"None",{"type":43,"tag":705,"props":724,"children":725},{},[726,728],{"type":49,"value":727},"Edge-to-edge. ",{"type":43,"tag":58,"props":729,"children":730},{},[731],{"type":49,"value":732},"Breaking change from .NET 9 on Android.",{"type":43,"tag":678,"props":734,"children":735},{},[736,747,755],{"type":43,"tag":705,"props":737,"children":738},{},[739,745],{"type":43,"tag":66,"props":740,"children":742},{"className":741},[],[743],{"type":49,"value":744},"Layout",{"type":49,"value":746}," (Grid, StackLayout, etc.)",{"type":43,"tag":705,"props":748,"children":749},{},[750],{"type":43,"tag":66,"props":751,"children":753},{"className":752},[],[754],{"type":49,"value":381},{"type":43,"tag":705,"props":756,"children":757},{},[758],{"type":49,"value":759},"Respects bars\u002Fnotch, flows under keyboard",{"type":43,"tag":678,"props":761,"children":762},{},[763,772,780],{"type":43,"tag":705,"props":764,"children":765},{},[766],{"type":43,"tag":66,"props":767,"children":769},{"className":768},[],[770],{"type":49,"value":771},"ScrollView",{"type":43,"tag":705,"props":773,"children":774},{},[775],{"type":43,"tag":66,"props":776,"children":778},{"className":777},[],[779],{"type":49,"value":691},{"type":43,"tag":705,"props":781,"children":782},{},[783,785,790,791,796],{"type":49,"value":784},"iOS maps to automatic content insets. Only ",{"type":43,"tag":66,"props":786,"children":788},{"className":787},[],[789],{"type":49,"value":381},{"type":49,"value":119},{"type":43,"tag":66,"props":792,"children":794},{"className":793},[],[795],{"type":49,"value":722},{"type":49,"value":797}," take effect.",{"type":43,"tag":678,"props":799,"children":800},{},[801,810,818],{"type":43,"tag":705,"props":802,"children":803},{},[804],{"type":43,"tag":66,"props":805,"children":807},{"className":806},[],[808],{"type":49,"value":809},"ContentView",{"type":43,"tag":705,"props":811,"children":812},{},[813],{"type":43,"tag":66,"props":814,"children":816},{"className":815},[],[817],{"type":49,"value":722},{"type":43,"tag":705,"props":819,"children":820},{},[821],{"type":49,"value":822},"Inherits parent behavior",{"type":43,"tag":678,"props":824,"children":825},{},[826,835,843],{"type":43,"tag":705,"props":827,"children":828},{},[829],{"type":43,"tag":66,"props":830,"children":832},{"className":831},[],[833],{"type":49,"value":834},"Border",{"type":43,"tag":705,"props":836,"children":837},{},[838],{"type":43,"tag":66,"props":839,"children":841},{"className":840},[],[842],{"type":49,"value":722},{"type":43,"tag":705,"props":844,"children":845},{},[846],{"type":49,"value":822},{"type":43,"tag":129,"props":848,"children":850},{"id":849},"breaking-changes-from-net-9",[851],{"type":49,"value":852},"Breaking Changes from .NET 9",{"type":43,"tag":581,"props":854,"children":856},{"id":855},"contentpage-default-changed-to-none",[857,859],{"type":49,"value":858},"ContentPage default changed to ",{"type":43,"tag":66,"props":860,"children":862},{"className":861},[],[863],{"type":49,"value":722},{"type":43,"tag":52,"props":865,"children":866},{},[867,869,874,876,881,883,888,890,895],{"type":49,"value":868},"In .NET 9, Android ",{"type":43,"tag":66,"props":870,"children":872},{"className":871},[],[873],{"type":49,"value":713},{"type":49,"value":875}," behaved like ",{"type":43,"tag":66,"props":877,"children":879},{"className":878},[],[880],{"type":49,"value":381},{"type":49,"value":882},". In .NET 10, the default is ",{"type":43,"tag":66,"props":884,"children":886},{"className":885},[],[887],{"type":49,"value":722},{"type":49,"value":889}," on ",{"type":43,"tag":58,"props":891,"children":892},{},[893],{"type":49,"value":894},"all platforms",{"type":49,"value":896},". If your Android content goes behind the status bar after upgrading:",{"type":43,"tag":273,"props":898,"children":900},{"className":594,"code":899,"language":596,"meta":278,"style":278},"\u003C!-- .NET 10 default — content extends under status bar -->\n\u003CContentPage>\n\n\u003C!-- Restore .NET 9 Android behavior -->\n\u003CContentPage SafeAreaEdges=\"Container\">\n",[901],{"type":43,"tag":66,"props":902,"children":903},{"__ignoreMap":278},[904,912,920,927,935],{"type":43,"tag":284,"props":905,"children":906},{"class":286,"line":287},[907],{"type":43,"tag":284,"props":908,"children":909},{},[910],{"type":49,"value":911},"\u003C!-- .NET 10 default — content extends under status bar -->\n",{"type":43,"tag":284,"props":913,"children":914},{"class":286,"line":296},[915],{"type":43,"tag":284,"props":916,"children":917},{},[918],{"type":49,"value":919},"\u003CContentPage>\n",{"type":43,"tag":284,"props":921,"children":922},{"class":286,"line":305},[923],{"type":43,"tag":284,"props":924,"children":925},{"emptyLinePlaceholder":464},[926],{"type":49,"value":467},{"type":43,"tag":284,"props":928,"children":929},{"class":286,"line":314},[930],{"type":43,"tag":284,"props":931,"children":932},{},[933],{"type":49,"value":934},"\u003C!-- Restore .NET 9 Android behavior -->\n",{"type":43,"tag":284,"props":936,"children":937},{"class":286,"line":323},[938],{"type":43,"tag":284,"props":939,"children":940},{},[941],{"type":49,"value":942},"\u003CContentPage SafeAreaEdges=\"Container\">\n",{"type":43,"tag":581,"props":944,"children":946},{"id":945},"windowsoftinputmodeadjustresize-superseded",[947],{"type":49,"value":948},"WindowSoftInputModeAdjust.Resize superseded",{"type":43,"tag":52,"props":950,"children":951},{},[952,957,959,965,967,972],{"type":43,"tag":66,"props":953,"children":955},{"className":954},[],[956],{"type":49,"value":179},{"type":49,"value":958}," still exists and still compiles (it is not removed and not obsolete), but it is Android-only. For cross-platform keyboard avoidance prefer ",{"type":43,"tag":66,"props":960,"children":962},{"className":961},[],[963],{"type":49,"value":964},"SafeAreaEdges=\"All\"",{"type":49,"value":966}," (or the ",{"type":43,"tag":66,"props":968,"children":970},{"className":969},[],[971],{"type":49,"value":374},{"type":49,"value":973}," region) on the ContentPage.",{"type":43,"tag":129,"props":975,"children":977},{"id":976},"usage-patterns",[978],{"type":49,"value":979},"Usage Patterns",{"type":43,"tag":581,"props":981,"children":983},{"id":982},"edge-to-edge-immersive-content",[984],{"type":49,"value":985},"Edge-to-edge immersive content",{"type":43,"tag":52,"props":987,"children":988},{},[989,991,996,997,1002,1004,1009],{"type":49,"value":990},"Set ",{"type":43,"tag":66,"props":992,"children":994},{"className":993},[],[995],{"type":49,"value":722},{"type":49,"value":889},{"type":43,"tag":58,"props":998,"children":999},{},[1000],{"type":49,"value":1001},"both",{"type":49,"value":1003}," page and layout — layouts default to ",{"type":43,"tag":66,"props":1005,"children":1007},{"className":1006},[],[1008],{"type":49,"value":381},{"type":49,"value":1010},":",{"type":43,"tag":273,"props":1012,"children":1014},{"className":594,"code":1013,"language":596,"meta":278,"style":278},"\u003CContentPage SafeAreaEdges=\"None\">\n    \u003CGrid SafeAreaEdges=\"None\">\n        \u003CImage Source=\"background.jpg\" Aspect=\"AspectFill\" \u002F>\n        \u003CVerticalStackLayout Padding=\"20\" VerticalOptions=\"End\">\n            \u003CLabel Text=\"Overlay text\" TextColor=\"White\" FontSize=\"24\" \u002F>\n        \u003C\u002FVerticalStackLayout>\n    \u003C\u002FGrid>\n\u003C\u002FContentPage>\n",[1015],{"type":43,"tag":66,"props":1016,"children":1017},{"__ignoreMap":278},[1018,1026,1034,1042,1050,1058,1066,1074],{"type":43,"tag":284,"props":1019,"children":1020},{"class":286,"line":287},[1021],{"type":43,"tag":284,"props":1022,"children":1023},{},[1024],{"type":49,"value":1025},"\u003CContentPage SafeAreaEdges=\"None\">\n",{"type":43,"tag":284,"props":1027,"children":1028},{"class":286,"line":296},[1029],{"type":43,"tag":284,"props":1030,"children":1031},{},[1032],{"type":49,"value":1033},"    \u003CGrid SafeAreaEdges=\"None\">\n",{"type":43,"tag":284,"props":1035,"children":1036},{"class":286,"line":305},[1037],{"type":43,"tag":284,"props":1038,"children":1039},{},[1040],{"type":49,"value":1041},"        \u003CImage Source=\"background.jpg\" Aspect=\"AspectFill\" \u002F>\n",{"type":43,"tag":284,"props":1043,"children":1044},{"class":286,"line":314},[1045],{"type":43,"tag":284,"props":1046,"children":1047},{},[1048],{"type":49,"value":1049},"        \u003CVerticalStackLayout Padding=\"20\" VerticalOptions=\"End\">\n",{"type":43,"tag":284,"props":1051,"children":1052},{"class":286,"line":323},[1053],{"type":43,"tag":284,"props":1054,"children":1055},{},[1056],{"type":49,"value":1057},"            \u003CLabel Text=\"Overlay text\" TextColor=\"White\" FontSize=\"24\" \u002F>\n",{"type":43,"tag":284,"props":1059,"children":1060},{"class":286,"line":332},[1061],{"type":43,"tag":284,"props":1062,"children":1063},{},[1064],{"type":49,"value":1065},"        \u003C\u002FVerticalStackLayout>\n",{"type":43,"tag":284,"props":1067,"children":1068},{"class":286,"line":341},[1069],{"type":43,"tag":284,"props":1070,"children":1071},{},[1072],{"type":49,"value":1073},"    \u003C\u002FGrid>\n",{"type":43,"tag":284,"props":1075,"children":1076},{"class":286,"line":350},[1077],{"type":43,"tag":284,"props":1078,"children":1079},{},[1080],{"type":49,"value":1081},"\u003C\u002FContentPage>\n",{"type":43,"tag":581,"props":1083,"children":1085},{"id":1084},"forms-and-critical-content",[1086],{"type":49,"value":1087},"Forms and critical content",{"type":43,"tag":273,"props":1089,"children":1091},{"className":594,"code":1090,"language":596,"meta":278,"style":278},"\u003CContentPage SafeAreaEdges=\"All\">\n    \u003CVerticalStackLayout Padding=\"20\">\n        \u003CLabel Text=\"Safe content\" FontSize=\"18\" \u002F>\n        \u003CEntry Placeholder=\"Enter text\" \u002F>\n        \u003CButton Text=\"Submit\" \u002F>\n    \u003C\u002FVerticalStackLayout>\n\u003C\u002FContentPage>\n",[1092],{"type":43,"tag":66,"props":1093,"children":1094},{"__ignoreMap":278},[1095,1103,1111,1119,1127,1135,1143],{"type":43,"tag":284,"props":1096,"children":1097},{"class":286,"line":287},[1098],{"type":43,"tag":284,"props":1099,"children":1100},{},[1101],{"type":49,"value":1102},"\u003CContentPage SafeAreaEdges=\"All\">\n",{"type":43,"tag":284,"props":1104,"children":1105},{"class":286,"line":296},[1106],{"type":43,"tag":284,"props":1107,"children":1108},{},[1109],{"type":49,"value":1110},"    \u003CVerticalStackLayout Padding=\"20\">\n",{"type":43,"tag":284,"props":1112,"children":1113},{"class":286,"line":305},[1114],{"type":43,"tag":284,"props":1115,"children":1116},{},[1117],{"type":49,"value":1118},"        \u003CLabel Text=\"Safe content\" FontSize=\"18\" \u002F>\n",{"type":43,"tag":284,"props":1120,"children":1121},{"class":286,"line":314},[1122],{"type":43,"tag":284,"props":1123,"children":1124},{},[1125],{"type":49,"value":1126},"        \u003CEntry Placeholder=\"Enter text\" \u002F>\n",{"type":43,"tag":284,"props":1128,"children":1129},{"class":286,"line":323},[1130],{"type":43,"tag":284,"props":1131,"children":1132},{},[1133],{"type":49,"value":1134},"        \u003CButton Text=\"Submit\" \u002F>\n",{"type":43,"tag":284,"props":1136,"children":1137},{"class":286,"line":332},[1138],{"type":43,"tag":284,"props":1139,"children":1140},{},[1141],{"type":49,"value":1142},"    \u003C\u002FVerticalStackLayout>\n",{"type":43,"tag":284,"props":1144,"children":1145},{"class":286,"line":341},[1146],{"type":43,"tag":284,"props":1147,"children":1148},{},[1149],{"type":49,"value":1081},{"type":43,"tag":581,"props":1151,"children":1153},{"id":1152},"keyboard-aware-chat-layout",[1154],{"type":49,"value":1155},"Keyboard-aware chat layout",{"type":43,"tag":273,"props":1157,"children":1159},{"className":594,"code":1158,"language":596,"meta":278,"style":278},"\u003CContentPage>\n    \u003CGrid RowDefinitions=\"*,Auto\"\n          SafeAreaEdges=\"Container, Container, Container, SoftInput\">\n        \u003CScrollView Grid.Row=\"0\">\n            \u003CVerticalStackLayout Padding=\"20\" Spacing=\"10\">\n                \u003CLabel Text=\"Messages\" FontSize=\"24\" \u002F>\n            \u003C\u002FVerticalStackLayout>\n        \u003C\u002FScrollView>\n        \u003CBorder Grid.Row=\"1\" BackgroundColor=\"LightGray\" Padding=\"20\">\n            \u003CGrid ColumnDefinitions=\"*,Auto\" Spacing=\"10\">\n                \u003CEntry Placeholder=\"Type a message...\" \u002F>\n                \u003CButton Grid.Column=\"1\" Text=\"Send\" \u002F>\n            \u003C\u002FGrid>\n        \u003C\u002FBorder>\n    \u003C\u002FGrid>\n\u003C\u002FContentPage>\n",[1160],{"type":43,"tag":66,"props":1161,"children":1162},{"__ignoreMap":278},[1163,1170,1178,1186,1194,1202,1210,1218,1226,1234,1242,1250,1258,1266,1274,1281],{"type":43,"tag":284,"props":1164,"children":1165},{"class":286,"line":287},[1166],{"type":43,"tag":284,"props":1167,"children":1168},{},[1169],{"type":49,"value":919},{"type":43,"tag":284,"props":1171,"children":1172},{"class":286,"line":296},[1173],{"type":43,"tag":284,"props":1174,"children":1175},{},[1176],{"type":49,"value":1177},"    \u003CGrid RowDefinitions=\"*,Auto\"\n",{"type":43,"tag":284,"props":1179,"children":1180},{"class":286,"line":305},[1181],{"type":43,"tag":284,"props":1182,"children":1183},{},[1184],{"type":49,"value":1185},"          SafeAreaEdges=\"Container, Container, Container, SoftInput\">\n",{"type":43,"tag":284,"props":1187,"children":1188},{"class":286,"line":314},[1189],{"type":43,"tag":284,"props":1190,"children":1191},{},[1192],{"type":49,"value":1193},"        \u003CScrollView Grid.Row=\"0\">\n",{"type":43,"tag":284,"props":1195,"children":1196},{"class":286,"line":323},[1197],{"type":43,"tag":284,"props":1198,"children":1199},{},[1200],{"type":49,"value":1201},"            \u003CVerticalStackLayout Padding=\"20\" Spacing=\"10\">\n",{"type":43,"tag":284,"props":1203,"children":1204},{"class":286,"line":332},[1205],{"type":43,"tag":284,"props":1206,"children":1207},{},[1208],{"type":49,"value":1209},"                \u003CLabel Text=\"Messages\" FontSize=\"24\" \u002F>\n",{"type":43,"tag":284,"props":1211,"children":1212},{"class":286,"line":341},[1213],{"type":43,"tag":284,"props":1214,"children":1215},{},[1216],{"type":49,"value":1217},"            \u003C\u002FVerticalStackLayout>\n",{"type":43,"tag":284,"props":1219,"children":1220},{"class":286,"line":350},[1221],{"type":43,"tag":284,"props":1222,"children":1223},{},[1224],{"type":49,"value":1225},"        \u003C\u002FScrollView>\n",{"type":43,"tag":284,"props":1227,"children":1228},{"class":286,"line":359},[1229],{"type":43,"tag":284,"props":1230,"children":1231},{},[1232],{"type":49,"value":1233},"        \u003CBorder Grid.Row=\"1\" BackgroundColor=\"LightGray\" Padding=\"20\">\n",{"type":43,"tag":284,"props":1235,"children":1236},{"class":286,"line":486},[1237],{"type":43,"tag":284,"props":1238,"children":1239},{},[1240],{"type":49,"value":1241},"            \u003CGrid ColumnDefinitions=\"*,Auto\" Spacing=\"10\">\n",{"type":43,"tag":284,"props":1243,"children":1244},{"class":286,"line":494},[1245],{"type":43,"tag":284,"props":1246,"children":1247},{},[1248],{"type":49,"value":1249},"                \u003CEntry Placeholder=\"Type a message...\" \u002F>\n",{"type":43,"tag":284,"props":1251,"children":1252},{"class":286,"line":503},[1253],{"type":43,"tag":284,"props":1254,"children":1255},{},[1256],{"type":49,"value":1257},"                \u003CButton Grid.Column=\"1\" Text=\"Send\" \u002F>\n",{"type":43,"tag":284,"props":1259,"children":1260},{"class":286,"line":512},[1261],{"type":43,"tag":284,"props":1262,"children":1263},{},[1264],{"type":49,"value":1265},"            \u003C\u002FGrid>\n",{"type":43,"tag":284,"props":1267,"children":1268},{"class":286,"line":520},[1269],{"type":43,"tag":284,"props":1270,"children":1271},{},[1272],{"type":49,"value":1273},"        \u003C\u002FBorder>\n",{"type":43,"tag":284,"props":1275,"children":1276},{"class":286,"line":529},[1277],{"type":43,"tag":284,"props":1278,"children":1279},{},[1280],{"type":49,"value":1073},{"type":43,"tag":284,"props":1282,"children":1283},{"class":286,"line":538},[1284],{"type":43,"tag":284,"props":1285,"children":1286},{},[1287],{"type":49,"value":1081},{"type":43,"tag":581,"props":1289,"children":1291},{"id":1290},"mixed-edge-to-edge-header-safe-body-keyboard-footer",[1292],{"type":49,"value":1293},"Mixed: edge-to-edge header + safe body + keyboard footer",{"type":43,"tag":273,"props":1295,"children":1297},{"className":594,"code":1296,"language":596,"meta":278,"style":278},"\u003CContentPage SafeAreaEdges=\"None\">\n    \u003CGrid RowDefinitions=\"Auto,*,Auto\">\n        \u003CGrid BackgroundColor=\"{StaticResource Primary}\">\n            \u003CLabel Text=\"App Header\" TextColor=\"White\" Margin=\"20,40,20,20\" \u002F>\n        \u003C\u002FGrid>\n        \u003CScrollView Grid.Row=\"1\" SafeAreaEdges=\"Container\">\n            \u003C!-- Use Container, not All — ScrollView only honors Container and None -->\n            \u003CVerticalStackLayout Padding=\"20\">\n                \u003CLabel Text=\"Main content\" \u002F>\n            \u003C\u002FVerticalStackLayout>\n        \u003C\u002FScrollView>\n        \u003CGrid Grid.Row=\"2\" SafeAreaEdges=\"SoftInput\"\n              BackgroundColor=\"LightGray\" Padding=\"20\">\n            \u003CEntry Placeholder=\"Type a message...\" \u002F>\n        \u003C\u002FGrid>\n    \u003C\u002FGrid>\n\u003C\u002FContentPage>\n",[1298],{"type":43,"tag":66,"props":1299,"children":1300},{"__ignoreMap":278},[1301,1308,1316,1324,1332,1340,1348,1356,1364,1372,1379,1386,1394,1402,1410,1417,1424],{"type":43,"tag":284,"props":1302,"children":1303},{"class":286,"line":287},[1304],{"type":43,"tag":284,"props":1305,"children":1306},{},[1307],{"type":49,"value":1025},{"type":43,"tag":284,"props":1309,"children":1310},{"class":286,"line":296},[1311],{"type":43,"tag":284,"props":1312,"children":1313},{},[1314],{"type":49,"value":1315},"    \u003CGrid RowDefinitions=\"Auto,*,Auto\">\n",{"type":43,"tag":284,"props":1317,"children":1318},{"class":286,"line":305},[1319],{"type":43,"tag":284,"props":1320,"children":1321},{},[1322],{"type":49,"value":1323},"        \u003CGrid BackgroundColor=\"{StaticResource Primary}\">\n",{"type":43,"tag":284,"props":1325,"children":1326},{"class":286,"line":314},[1327],{"type":43,"tag":284,"props":1328,"children":1329},{},[1330],{"type":49,"value":1331},"            \u003CLabel Text=\"App Header\" TextColor=\"White\" Margin=\"20,40,20,20\" \u002F>\n",{"type":43,"tag":284,"props":1333,"children":1334},{"class":286,"line":323},[1335],{"type":43,"tag":284,"props":1336,"children":1337},{},[1338],{"type":49,"value":1339},"        \u003C\u002FGrid>\n",{"type":43,"tag":284,"props":1341,"children":1342},{"class":286,"line":332},[1343],{"type":43,"tag":284,"props":1344,"children":1345},{},[1346],{"type":49,"value":1347},"        \u003CScrollView Grid.Row=\"1\" SafeAreaEdges=\"Container\">\n",{"type":43,"tag":284,"props":1349,"children":1350},{"class":286,"line":341},[1351],{"type":43,"tag":284,"props":1352,"children":1353},{},[1354],{"type":49,"value":1355},"            \u003C!-- Use Container, not All — ScrollView only honors Container and None -->\n",{"type":43,"tag":284,"props":1357,"children":1358},{"class":286,"line":350},[1359],{"type":43,"tag":284,"props":1360,"children":1361},{},[1362],{"type":49,"value":1363},"            \u003CVerticalStackLayout Padding=\"20\">\n",{"type":43,"tag":284,"props":1365,"children":1366},{"class":286,"line":359},[1367],{"type":43,"tag":284,"props":1368,"children":1369},{},[1370],{"type":49,"value":1371},"                \u003CLabel Text=\"Main content\" \u002F>\n",{"type":43,"tag":284,"props":1373,"children":1374},{"class":286,"line":486},[1375],{"type":43,"tag":284,"props":1376,"children":1377},{},[1378],{"type":49,"value":1217},{"type":43,"tag":284,"props":1380,"children":1381},{"class":286,"line":494},[1382],{"type":43,"tag":284,"props":1383,"children":1384},{},[1385],{"type":49,"value":1225},{"type":43,"tag":284,"props":1387,"children":1388},{"class":286,"line":503},[1389],{"type":43,"tag":284,"props":1390,"children":1391},{},[1392],{"type":49,"value":1393},"        \u003CGrid Grid.Row=\"2\" SafeAreaEdges=\"SoftInput\"\n",{"type":43,"tag":284,"props":1395,"children":1396},{"class":286,"line":512},[1397],{"type":43,"tag":284,"props":1398,"children":1399},{},[1400],{"type":49,"value":1401},"              BackgroundColor=\"LightGray\" Padding=\"20\">\n",{"type":43,"tag":284,"props":1403,"children":1404},{"class":286,"line":520},[1405],{"type":43,"tag":284,"props":1406,"children":1407},{},[1408],{"type":49,"value":1409},"            \u003CEntry Placeholder=\"Type a message...\" \u002F>\n",{"type":43,"tag":284,"props":1411,"children":1412},{"class":286,"line":529},[1413],{"type":43,"tag":284,"props":1414,"children":1415},{},[1416],{"type":49,"value":1339},{"type":43,"tag":284,"props":1418,"children":1419},{"class":286,"line":538},[1420],{"type":43,"tag":284,"props":1421,"children":1422},{},[1423],{"type":49,"value":1073},{"type":43,"tag":284,"props":1425,"children":1426},{"class":286,"line":547},[1427],{"type":43,"tag":284,"props":1428,"children":1429},{},[1430],{"type":49,"value":1081},{"type":43,"tag":581,"props":1432,"children":1434},{"id":1433},"programmatic-c",[1435],{"type":49,"value":1436},"Programmatic (C#)",{"type":43,"tag":273,"props":1438,"children":1440},{"className":275,"code":1439,"language":277,"meta":278,"style":278},"var page = new ContentPage\n{\n    SafeAreaEdges = SafeAreaEdges.All\n};\n\nvar grid = new Grid\n{\n    SafeAreaEdges = new SafeAreaEdges(\n        left: SafeAreaRegions.Container,\n        top: SafeAreaRegions.Container,\n        right: SafeAreaRegions.Container,\n        bottom: SafeAreaRegions.SoftInput)\n};\n",[1441],{"type":43,"tag":66,"props":1442,"children":1443},{"__ignoreMap":278},[1444,1452,1459,1467,1475,1482,1490,1497,1505,1513,1521,1529,1537],{"type":43,"tag":284,"props":1445,"children":1446},{"class":286,"line":287},[1447],{"type":43,"tag":284,"props":1448,"children":1449},{},[1450],{"type":49,"value":1451},"var page = new ContentPage\n",{"type":43,"tag":284,"props":1453,"children":1454},{"class":286,"line":296},[1455],{"type":43,"tag":284,"props":1456,"children":1457},{},[1458],{"type":49,"value":311},{"type":43,"tag":284,"props":1460,"children":1461},{"class":286,"line":305},[1462],{"type":43,"tag":284,"props":1463,"children":1464},{},[1465],{"type":49,"value":1466},"    SafeAreaEdges = SafeAreaEdges.All\n",{"type":43,"tag":284,"props":1468,"children":1469},{"class":286,"line":314},[1470],{"type":43,"tag":284,"props":1471,"children":1472},{},[1473],{"type":49,"value":1474},"};\n",{"type":43,"tag":284,"props":1476,"children":1477},{"class":286,"line":323},[1478],{"type":43,"tag":284,"props":1479,"children":1480},{"emptyLinePlaceholder":464},[1481],{"type":49,"value":467},{"type":43,"tag":284,"props":1483,"children":1484},{"class":286,"line":332},[1485],{"type":43,"tag":284,"props":1486,"children":1487},{},[1488],{"type":49,"value":1489},"var grid = new Grid\n",{"type":43,"tag":284,"props":1491,"children":1492},{"class":286,"line":341},[1493],{"type":43,"tag":284,"props":1494,"children":1495},{},[1496],{"type":49,"value":311},{"type":43,"tag":284,"props":1498,"children":1499},{"class":286,"line":350},[1500],{"type":43,"tag":284,"props":1501,"children":1502},{},[1503],{"type":49,"value":1504},"    SafeAreaEdges = new SafeAreaEdges(\n",{"type":43,"tag":284,"props":1506,"children":1507},{"class":286,"line":359},[1508],{"type":43,"tag":284,"props":1509,"children":1510},{},[1511],{"type":49,"value":1512},"        left: SafeAreaRegions.Container,\n",{"type":43,"tag":284,"props":1514,"children":1515},{"class":286,"line":486},[1516],{"type":43,"tag":284,"props":1517,"children":1518},{},[1519],{"type":49,"value":1520},"        top: SafeAreaRegions.Container,\n",{"type":43,"tag":284,"props":1522,"children":1523},{"class":286,"line":494},[1524],{"type":43,"tag":284,"props":1525,"children":1526},{},[1527],{"type":49,"value":1528},"        right: SafeAreaRegions.Container,\n",{"type":43,"tag":284,"props":1530,"children":1531},{"class":286,"line":503},[1532],{"type":43,"tag":284,"props":1533,"children":1534},{},[1535],{"type":49,"value":1536},"        bottom: SafeAreaRegions.SoftInput)\n",{"type":43,"tag":284,"props":1538,"children":1539},{"class":286,"line":512},[1540],{"type":43,"tag":284,"props":1541,"children":1542},{},[1543],{"type":49,"value":1474},{"type":43,"tag":129,"props":1545,"children":1547},{"id":1546},"decision-framework",[1548],{"type":49,"value":1549},"Decision Framework",{"type":43,"tag":670,"props":1551,"children":1552},{},[1553,1569],{"type":43,"tag":674,"props":1554,"children":1555},{},[1556],{"type":43,"tag":678,"props":1557,"children":1558},{},[1559,1564],{"type":43,"tag":682,"props":1560,"children":1561},{},[1562],{"type":49,"value":1563},"Scenario",{"type":43,"tag":682,"props":1565,"children":1566},{},[1567],{"type":49,"value":1568},"SafeAreaEdges value",{"type":43,"tag":698,"props":1570,"children":1571},{},[1572,1589,1613,1629,1648],{"type":43,"tag":678,"props":1573,"children":1574},{},[1575,1580],{"type":43,"tag":705,"props":1576,"children":1577},{},[1578],{"type":49,"value":1579},"Forms, critical inputs",{"type":43,"tag":705,"props":1581,"children":1582},{},[1583],{"type":43,"tag":66,"props":1584,"children":1586},{"className":1585},[],[1587],{"type":49,"value":1588},"All",{"type":43,"tag":678,"props":1590,"children":1591},{},[1592,1597],{"type":43,"tag":705,"props":1593,"children":1594},{},[1595],{"type":49,"value":1596},"Photo viewer, video player, game",{"type":43,"tag":705,"props":1598,"children":1599},{},[1600,1605,1607,1611],{"type":43,"tag":66,"props":1601,"children":1603},{"className":1602},[],[1604],{"type":49,"value":722},{"type":49,"value":1606}," (on page ",{"type":43,"tag":58,"props":1608,"children":1609},{},[1610],{"type":49,"value":396},{"type":49,"value":1612}," layout)",{"type":43,"tag":678,"props":1614,"children":1615},{},[1616,1621],{"type":43,"tag":705,"props":1617,"children":1618},{},[1619],{"type":49,"value":1620},"Scrollable content with fixed header\u002Ffooter",{"type":43,"tag":705,"props":1622,"children":1623},{},[1624],{"type":43,"tag":66,"props":1625,"children":1627},{"className":1626},[],[1628],{"type":49,"value":381},{"type":43,"tag":678,"props":1630,"children":1631},{},[1632,1637],{"type":43,"tag":705,"props":1633,"children":1634},{},[1635],{"type":49,"value":1636},"Chat\u002Fmessaging with bottom input bar",{"type":43,"tag":705,"props":1638,"children":1639},{},[1640,1642],{"type":49,"value":1641},"Per-edge: ",{"type":43,"tag":66,"props":1643,"children":1645},{"className":1644},[],[1646],{"type":49,"value":1647},"Container, Container, Container, SoftInput",{"type":43,"tag":678,"props":1649,"children":1650},{},[1651,1656],{"type":43,"tag":705,"props":1652,"children":1653},{},[1654],{"type":49,"value":1655},"Blazor Hybrid app",{"type":43,"tag":705,"props":1657,"children":1658},{},[1659,1664,1666,1672],{"type":43,"tag":66,"props":1660,"children":1662},{"className":1661},[],[1663],{"type":49,"value":722},{"type":49,"value":1665}," on page; CSS ",{"type":43,"tag":66,"props":1667,"children":1669},{"className":1668},[],[1670],{"type":49,"value":1671},"env()",{"type":49,"value":1673}," for insets",{"type":43,"tag":129,"props":1675,"children":1677},{"id":1676},"blazor-hybrid-integration",[1678],{"type":49,"value":1679},"Blazor Hybrid Integration",{"type":43,"tag":52,"props":1681,"children":1682},{},[1683],{"type":49,"value":1684},"For Blazor Hybrid apps, let CSS handle safe areas to avoid double-padding.",{"type":43,"tag":1686,"props":1687,"children":1688},"ol",{},[1689],{"type":43,"tag":140,"props":1690,"children":1691},{},[1692,1697],{"type":43,"tag":58,"props":1693,"children":1694},{},[1695],{"type":49,"value":1696},"Page stays edge-to-edge",{"type":49,"value":1698}," (default in .NET 10):",{"type":43,"tag":273,"props":1700,"children":1702},{"className":594,"code":1701,"language":596,"meta":278,"style":278},"\u003CContentPage SafeAreaEdges=\"None\">\n    \u003CBlazorWebView HostPage=\"wwwroot\u002Findex.html\">\n        \u003CBlazorWebView.RootComponents>\n            \u003CRootComponent Selector=\"#app\" ComponentType=\"{x:Type local:Routes}\" \u002F>\n        \u003C\u002FBlazorWebView.RootComponents>\n    \u003C\u002FBlazorWebView>\n\u003C\u002FContentPage>\n",[1703],{"type":43,"tag":66,"props":1704,"children":1705},{"__ignoreMap":278},[1706,1713,1721,1729,1737,1745,1753],{"type":43,"tag":284,"props":1707,"children":1708},{"class":286,"line":287},[1709],{"type":43,"tag":284,"props":1710,"children":1711},{},[1712],{"type":49,"value":1025},{"type":43,"tag":284,"props":1714,"children":1715},{"class":286,"line":296},[1716],{"type":43,"tag":284,"props":1717,"children":1718},{},[1719],{"type":49,"value":1720},"    \u003CBlazorWebView HostPage=\"wwwroot\u002Findex.html\">\n",{"type":43,"tag":284,"props":1722,"children":1723},{"class":286,"line":305},[1724],{"type":43,"tag":284,"props":1725,"children":1726},{},[1727],{"type":49,"value":1728},"        \u003CBlazorWebView.RootComponents>\n",{"type":43,"tag":284,"props":1730,"children":1731},{"class":286,"line":314},[1732],{"type":43,"tag":284,"props":1733,"children":1734},{},[1735],{"type":49,"value":1736},"            \u003CRootComponent Selector=\"#app\" ComponentType=\"{x:Type local:Routes}\" \u002F>\n",{"type":43,"tag":284,"props":1738,"children":1739},{"class":286,"line":323},[1740],{"type":43,"tag":284,"props":1741,"children":1742},{},[1743],{"type":49,"value":1744},"        \u003C\u002FBlazorWebView.RootComponents>\n",{"type":43,"tag":284,"props":1746,"children":1747},{"class":286,"line":332},[1748],{"type":43,"tag":284,"props":1749,"children":1750},{},[1751],{"type":49,"value":1752},"    \u003C\u002FBlazorWebView>\n",{"type":43,"tag":284,"props":1754,"children":1755},{"class":286,"line":341},[1756],{"type":43,"tag":284,"props":1757,"children":1758},{},[1759],{"type":49,"value":1081},{"type":43,"tag":1686,"props":1761,"children":1762},{"start":296},[1763],{"type":43,"tag":140,"props":1764,"children":1765},{},[1766,1777,1779,1785],{"type":43,"tag":58,"props":1767,"children":1768},{},[1769,1771],{"type":49,"value":1770},"Add ",{"type":43,"tag":66,"props":1772,"children":1774},{"className":1773},[],[1775],{"type":49,"value":1776},"viewport-fit=cover",{"type":49,"value":1778}," in ",{"type":43,"tag":66,"props":1780,"children":1782},{"className":1781},[],[1783],{"type":49,"value":1784},"index.html",{"type":49,"value":1010},{"type":43,"tag":273,"props":1787,"children":1791},{"className":1788,"code":1789,"language":1790,"meta":278,"style":278},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0,\n      maximum-scale=1.0, user-scalable=no, viewport-fit=cover\" \u002F>\n","html",[1792],{"type":43,"tag":66,"props":1793,"children":1794},{"__ignoreMap":278},[1795,1854],{"type":43,"tag":284,"props":1796,"children":1797},{"class":286,"line":287},[1798,1804,1810,1816,1821,1826,1832,1836,1841,1845,1849],{"type":43,"tag":284,"props":1799,"children":1801},{"style":1800},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[1802],{"type":49,"value":1803},"\u003C",{"type":43,"tag":284,"props":1805,"children":1807},{"style":1806},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[1808],{"type":49,"value":1809},"meta",{"type":43,"tag":284,"props":1811,"children":1813},{"style":1812},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[1814],{"type":49,"value":1815}," name",{"type":43,"tag":284,"props":1817,"children":1818},{"style":1800},[1819],{"type":49,"value":1820},"=",{"type":43,"tag":284,"props":1822,"children":1823},{"style":1800},[1824],{"type":49,"value":1825},"\"",{"type":43,"tag":284,"props":1827,"children":1829},{"style":1828},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[1830],{"type":49,"value":1831},"viewport",{"type":43,"tag":284,"props":1833,"children":1834},{"style":1800},[1835],{"type":49,"value":1825},{"type":43,"tag":284,"props":1837,"children":1838},{"style":1812},[1839],{"type":49,"value":1840}," content",{"type":43,"tag":284,"props":1842,"children":1843},{"style":1800},[1844],{"type":49,"value":1820},{"type":43,"tag":284,"props":1846,"children":1847},{"style":1800},[1848],{"type":49,"value":1825},{"type":43,"tag":284,"props":1850,"children":1851},{"style":1828},[1852],{"type":49,"value":1853},"width=device-width, initial-scale=1.0,\n",{"type":43,"tag":284,"props":1855,"children":1856},{"class":286,"line":296},[1857,1862,1866],{"type":43,"tag":284,"props":1858,"children":1859},{"style":1828},[1860],{"type":49,"value":1861},"      maximum-scale=1.0, user-scalable=no, viewport-fit=cover",{"type":43,"tag":284,"props":1863,"children":1864},{"style":1800},[1865],{"type":49,"value":1825},{"type":43,"tag":284,"props":1867,"children":1868},{"style":1800},[1869],{"type":49,"value":1870}," \u002F>\n",{"type":43,"tag":1686,"props":1872,"children":1873},{"start":305},[1874],{"type":43,"tag":140,"props":1875,"children":1876},{},[1877,1889],{"type":43,"tag":58,"props":1878,"children":1879},{},[1880,1882,1887],{"type":49,"value":1881},"Use CSS ",{"type":43,"tag":66,"props":1883,"children":1885},{"className":1884},[],[1886],{"type":49,"value":1671},{"type":49,"value":1888}," functions",{"type":49,"value":1010},{"type":43,"tag":273,"props":1891,"children":1895},{"className":1892,"code":1893,"language":1894,"meta":278,"style":278},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","body {\n    padding-top: env(safe-area-inset-top);\n    padding-bottom: env(safe-area-inset-bottom);\n    padding-left: env(safe-area-inset-left);\n    padding-right: env(safe-area-inset-right);\n}\n","css",[1896],{"type":43,"tag":66,"props":1897,"children":1898},{"__ignoreMap":278},[1899,1913,1937,1958,1979,2000],{"type":43,"tag":284,"props":1900,"children":1901},{"class":286,"line":287},[1902,1908],{"type":43,"tag":284,"props":1903,"children":1905},{"style":1904},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[1906],{"type":49,"value":1907},"body",{"type":43,"tag":284,"props":1909,"children":1910},{"style":1800},[1911],{"type":49,"value":1912}," {\n",{"type":43,"tag":284,"props":1914,"children":1915},{"class":286,"line":296},[1916,1922,1926,1932],{"type":43,"tag":284,"props":1917,"children":1919},{"style":1918},"--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6",[1920],{"type":49,"value":1921},"    padding-top",{"type":43,"tag":284,"props":1923,"children":1924},{"style":1800},[1925],{"type":49,"value":1010},{"type":43,"tag":284,"props":1927,"children":1929},{"style":1928},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[1930],{"type":49,"value":1931}," env(safe-area-inset-top)",{"type":43,"tag":284,"props":1933,"children":1934},{"style":1800},[1935],{"type":49,"value":1936},";\n",{"type":43,"tag":284,"props":1938,"children":1939},{"class":286,"line":305},[1940,1945,1949,1954],{"type":43,"tag":284,"props":1941,"children":1942},{"style":1918},[1943],{"type":49,"value":1944},"    padding-bottom",{"type":43,"tag":284,"props":1946,"children":1947},{"style":1800},[1948],{"type":49,"value":1010},{"type":43,"tag":284,"props":1950,"children":1951},{"style":1928},[1952],{"type":49,"value":1953}," env(safe-area-inset-bottom)",{"type":43,"tag":284,"props":1955,"children":1956},{"style":1800},[1957],{"type":49,"value":1936},{"type":43,"tag":284,"props":1959,"children":1960},{"class":286,"line":314},[1961,1966,1970,1975],{"type":43,"tag":284,"props":1962,"children":1963},{"style":1918},[1964],{"type":49,"value":1965},"    padding-left",{"type":43,"tag":284,"props":1967,"children":1968},{"style":1800},[1969],{"type":49,"value":1010},{"type":43,"tag":284,"props":1971,"children":1972},{"style":1928},[1973],{"type":49,"value":1974}," env(safe-area-inset-left)",{"type":43,"tag":284,"props":1976,"children":1977},{"style":1800},[1978],{"type":49,"value":1936},{"type":43,"tag":284,"props":1980,"children":1981},{"class":286,"line":323},[1982,1987,1991,1996],{"type":43,"tag":284,"props":1983,"children":1984},{"style":1918},[1985],{"type":49,"value":1986},"    padding-right",{"type":43,"tag":284,"props":1988,"children":1989},{"style":1800},[1990],{"type":49,"value":1010},{"type":43,"tag":284,"props":1992,"children":1993},{"style":1928},[1994],{"type":49,"value":1995}," env(safe-area-inset-right)",{"type":43,"tag":284,"props":1997,"children":1998},{"style":1800},[1999],{"type":49,"value":1936},{"type":43,"tag":284,"props":2001,"children":2002},{"class":286,"line":332},[2003],{"type":43,"tag":284,"props":2004,"children":2005},{"style":1800},[2006],{"type":49,"value":365},{"type":43,"tag":52,"props":2008,"children":2009},{},[2010,2012,2018,2019,2025,2026,2032,2033,2039],{"type":49,"value":2011},"Available CSS environment variables: ",{"type":43,"tag":66,"props":2013,"children":2015},{"className":2014},[],[2016],{"type":49,"value":2017},"env(safe-area-inset-top)",{"type":49,"value":166},{"type":43,"tag":66,"props":2020,"children":2022},{"className":2021},[],[2023],{"type":49,"value":2024},"env(safe-area-inset-bottom)",{"type":49,"value":166},{"type":43,"tag":66,"props":2027,"children":2029},{"className":2028},[],[2030],{"type":49,"value":2031},"env(safe-area-inset-left)",{"type":49,"value":166},{"type":43,"tag":66,"props":2034,"children":2036},{"className":2035},[],[2037],{"type":49,"value":2038},"env(safe-area-inset-right)",{"type":49,"value":579},{"type":43,"tag":129,"props":2041,"children":2043},{"id":2042},"migration-from-legacy-apis",[2044],{"type":49,"value":2045},"Migration from Legacy APIs",{"type":43,"tag":670,"props":2047,"children":2048},{},[2049,2065],{"type":43,"tag":674,"props":2050,"children":2051},{},[2052],{"type":43,"tag":678,"props":2053,"children":2054},{},[2055,2060],{"type":43,"tag":682,"props":2056,"children":2057},{},[2058],{"type":49,"value":2059},"Legacy (.NET 9 and earlier)",{"type":43,"tag":682,"props":2061,"children":2062},{},[2063],{"type":49,"value":2064},"New (.NET 10+)",{"type":43,"tag":698,"props":2066,"children":2067},{},[2068,2089,2110],{"type":43,"tag":678,"props":2069,"children":2070},{},[2071,2080],{"type":43,"tag":705,"props":2072,"children":2073},{},[2074],{"type":43,"tag":66,"props":2075,"children":2077},{"className":2076},[],[2078],{"type":49,"value":2079},"ios:Page.UseSafeArea=\"True\"",{"type":43,"tag":705,"props":2081,"children":2082},{},[2083],{"type":43,"tag":66,"props":2084,"children":2086},{"className":2085},[],[2087],{"type":49,"value":2088},"SafeAreaEdges=\"Container\"",{"type":43,"tag":678,"props":2090,"children":2091},{},[2092,2101],{"type":43,"tag":705,"props":2093,"children":2094},{},[2095],{"type":43,"tag":66,"props":2096,"children":2098},{"className":2097},[],[2099],{"type":49,"value":2100},"Layout.IgnoreSafeArea=\"True\"",{"type":43,"tag":705,"props":2102,"children":2103},{},[2104],{"type":43,"tag":66,"props":2105,"children":2107},{"className":2106},[],[2108],{"type":49,"value":2109},"SafeAreaEdges=\"None\"",{"type":43,"tag":678,"props":2111,"children":2112},{},[2113,2121],{"type":43,"tag":705,"props":2114,"children":2115},{},[2116],{"type":43,"tag":66,"props":2117,"children":2119},{"className":2118},[],[2120],{"type":49,"value":179},{"type":43,"tag":705,"props":2122,"children":2123},{},[2124,2129],{"type":43,"tag":66,"props":2125,"children":2127},{"className":2126},[],[2128],{"type":49,"value":964},{"type":49,"value":2130}," on ContentPage",{"type":43,"tag":52,"props":2132,"children":2133},{},[2134,2136,2141,2142,2147,2149,2155,2157,2163,2165,2170,2172,2177],{"type":49,"value":2135},"The legacy ",{"type":43,"tag":66,"props":2137,"children":2139},{"className":2138},[],[2140],{"type":49,"value":117},{"type":49,"value":119},{"type":43,"tag":66,"props":2143,"children":2145},{"className":2144},[],[2146],{"type":49,"value":125},{"type":49,"value":2148}," properties still compile but are marked obsolete. ",{"type":43,"tag":66,"props":2150,"children":2152},{"className":2151},[],[2153],{"type":49,"value":2154},"IgnoreSafeArea=\"True\"",{"type":49,"value":2156}," maps internally to ",{"type":43,"tag":66,"props":2158,"children":2160},{"className":2159},[],[2161],{"type":49,"value":2162},"SafeAreaRegions.None",{"type":49,"value":2164},". ",{"type":43,"tag":66,"props":2166,"children":2168},{"className":2167},[],[2169],{"type":49,"value":179},{"type":49,"value":2171}," is ",{"type":43,"tag":58,"props":2173,"children":2174},{},[2175],{"type":49,"value":2176},"not",{"type":49,"value":2178}," obsolete — it remains supported, but is Android-only.",{"type":43,"tag":273,"props":2180,"children":2182},{"className":594,"code":2181,"language":596,"meta":278,"style":278},"\u003C!-- .NET 9 (legacy, iOS-only) -->\n\u003CContentPage xmlns:ios=\"clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls\"\n             ios:Page.UseSafeArea=\"True\">\n\n\u003C!-- .NET 10+ (cross-platform) -->\n\u003CContentPage SafeAreaEdges=\"Container\">\n",[2183],{"type":43,"tag":66,"props":2184,"children":2185},{"__ignoreMap":278},[2186,2194,2202,2210,2217,2225],{"type":43,"tag":284,"props":2187,"children":2188},{"class":286,"line":287},[2189],{"type":43,"tag":284,"props":2190,"children":2191},{},[2192],{"type":49,"value":2193},"\u003C!-- .NET 9 (legacy, iOS-only) -->\n",{"type":43,"tag":284,"props":2195,"children":2196},{"class":286,"line":296},[2197],{"type":43,"tag":284,"props":2198,"children":2199},{},[2200],{"type":49,"value":2201},"\u003CContentPage xmlns:ios=\"clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls\"\n",{"type":43,"tag":284,"props":2203,"children":2204},{"class":286,"line":305},[2205],{"type":43,"tag":284,"props":2206,"children":2207},{},[2208],{"type":49,"value":2209},"             ios:Page.UseSafeArea=\"True\">\n",{"type":43,"tag":284,"props":2211,"children":2212},{"class":286,"line":314},[2213],{"type":43,"tag":284,"props":2214,"children":2215},{"emptyLinePlaceholder":464},[2216],{"type":49,"value":467},{"type":43,"tag":284,"props":2218,"children":2219},{"class":286,"line":323},[2220],{"type":43,"tag":284,"props":2221,"children":2222},{},[2223],{"type":49,"value":2224},"\u003C!-- .NET 10+ (cross-platform) -->\n",{"type":43,"tag":284,"props":2226,"children":2227},{"class":286,"line":332},[2228],{"type":43,"tag":284,"props":2229,"children":2230},{},[2231],{"type":49,"value":942},{"type":43,"tag":129,"props":2233,"children":2235},{"id":2234},"platform-specific-behavior",[2236],{"type":49,"value":2237},"Platform-Specific Behavior",{"type":43,"tag":581,"props":2239,"children":2241},{"id":2240},"ios-mac-catalyst",[2242],{"type":49,"value":2243},"iOS & Mac Catalyst",{"type":43,"tag":136,"props":2245,"children":2246},{},[2247,2252,2262,2267],{"type":43,"tag":140,"props":2248,"children":2249},{},[2250],{"type":49,"value":2251},"Safe area insets cover: status bar, navigation bar, tab bar, notch\u002FDynamic Island, home indicator",{"type":43,"tag":140,"props":2253,"children":2254},{},[2255,2260],{"type":43,"tag":66,"props":2256,"children":2258},{"className":2257},[],[2259],{"type":49,"value":374},{"type":49,"value":2261}," includes the keyboard when visible",{"type":43,"tag":140,"props":2263,"children":2264},{},[2265],{"type":49,"value":2266},"Insets update automatically on rotation and UI visibility changes",{"type":43,"tag":140,"props":2268,"children":2269},{},[2270,2275,2277,2282,2284],{"type":43,"tag":66,"props":2271,"children":2273},{"className":2272},[],[2274],{"type":49,"value":771},{"type":49,"value":2276}," with ",{"type":43,"tag":66,"props":2278,"children":2280},{"className":2279},[],[2281],{"type":49,"value":691},{"type":49,"value":2283}," maps to ",{"type":43,"tag":66,"props":2285,"children":2287},{"className":2286},[],[2288],{"type":49,"value":2289},"UIScrollViewContentInsetAdjustmentBehavior.Automatic",{"type":43,"tag":52,"props":2291,"children":2292},{},[2293],{"type":49,"value":2294},"Transparent navigation bar for content behind the nav bar:",{"type":43,"tag":273,"props":2296,"children":2298},{"className":594,"code":2297,"language":596,"meta":278,"style":278},"\u003CShell Shell.BackgroundColor=\"#80000000\" Shell.NavBarHasShadow=\"False\" \u002F>\n",[2299],{"type":43,"tag":66,"props":2300,"children":2301},{"__ignoreMap":278},[2302],{"type":43,"tag":284,"props":2303,"children":2304},{"class":286,"line":287},[2305],{"type":43,"tag":284,"props":2306,"children":2307},{},[2308],{"type":49,"value":2297},{"type":43,"tag":581,"props":2310,"children":2312},{"id":2311},"android",[2313],{"type":49,"value":2314},"Android",{"type":43,"tag":136,"props":2316,"children":2317},{},[2318,2323,2333,2353],{"type":43,"tag":140,"props":2319,"children":2320},{},[2321],{"type":49,"value":2322},"Safe area insets cover: system bars (status\u002Fnavigation) and display cutouts",{"type":43,"tag":140,"props":2324,"children":2325},{},[2326,2331],{"type":43,"tag":66,"props":2327,"children":2329},{"className":2328},[],[2330],{"type":49,"value":374},{"type":49,"value":2332}," includes the soft keyboard",{"type":43,"tag":140,"props":2334,"children":2335},{},[2336,2338,2344,2345,2351],{"type":49,"value":2337},"MAUI uses ",{"type":43,"tag":66,"props":2339,"children":2341},{"className":2340},[],[2342],{"type":49,"value":2343},"WindowInsetsCompat",{"type":49,"value":119},{"type":43,"tag":66,"props":2346,"children":2348},{"className":2347},[],[2349],{"type":49,"value":2350},"WindowInsetsAnimationCompat",{"type":49,"value":2352}," internally",{"type":43,"tag":140,"props":2354,"children":2355},{},[2356],{"type":49,"value":2357},"Behavior varies by Android version and OEM edge-to-edge settings",{"type":43,"tag":129,"props":2359,"children":2361},{"id":2360},"common-pitfalls",[2362],{"type":49,"value":2363},"Common Pitfalls",{"type":43,"tag":1686,"props":2365,"children":2366},{},[2367,2406,2437,2472,2502,2526,2564],{"type":43,"tag":140,"props":2368,"children":2369},{},[2370,2382,2384,2390,2392,2397,2399,2404],{"type":43,"tag":58,"props":2371,"children":2372},{},[2373,2375,2380],{"type":49,"value":2374},"Forgetting to set ",{"type":43,"tag":66,"props":2376,"children":2378},{"className":2377},[],[2379],{"type":49,"value":722},{"type":49,"value":2381}," on the layout too.",{"type":49,"value":2383}," ",{"type":43,"tag":66,"props":2385,"children":2387},{"className":2386},[],[2388],{"type":49,"value":2389},"ContentPage SafeAreaEdges=\"None\"",{"type":49,"value":2391}," makes the page edge-to-edge, but child layouts default to ",{"type":43,"tag":66,"props":2393,"children":2395},{"className":2394},[],[2396],{"type":49,"value":381},{"type":49,"value":2398}," and still pad inward. Set ",{"type":43,"tag":66,"props":2400,"children":2402},{"className":2401},[],[2403],{"type":49,"value":722},{"type":49,"value":2405}," on both page and layout for truly immersive content.",{"type":43,"tag":140,"props":2407,"children":2408},{},[2409,2421,2423,2428,2430,2435],{"type":43,"tag":58,"props":2410,"children":2411},{},[2412,2414,2419],{"type":49,"value":2413},"Using ",{"type":43,"tag":66,"props":2415,"children":2417},{"className":2416},[],[2418],{"type":49,"value":374},{"type":49,"value":2420}," directly on ScrollView.",{"type":49,"value":2422}," ScrollView manages its own content insets and ignores ",{"type":43,"tag":66,"props":2424,"children":2426},{"className":2425},[],[2427],{"type":49,"value":374},{"type":49,"value":2429},". Wrap the ScrollView in a Grid or StackLayout and apply ",{"type":43,"tag":66,"props":2431,"children":2433},{"className":2432},[],[2434],{"type":49,"value":374},{"type":49,"value":2436}," there.",{"type":43,"tag":140,"props":2438,"children":2439},{},[2440,2457,2458,2463,2465,2470],{"type":43,"tag":58,"props":2441,"children":2442},{},[2443,2445,2450,2451,2456],{"type":49,"value":2444},"Confusing ",{"type":43,"tag":66,"props":2446,"children":2448},{"className":2447},[],[2449],{"type":49,"value":691},{"type":49,"value":2276},{"type":43,"tag":66,"props":2452,"children":2454},{"className":2453},[],[2455],{"type":49,"value":722},{"type":49,"value":579},{"type":49,"value":2383},{"type":43,"tag":66,"props":2459,"children":2461},{"className":2460},[],[2462],{"type":49,"value":691},{"type":49,"value":2464}," means \"platform default for this control type\" — on ScrollView (iOS) this enables automatic content insets. ",{"type":43,"tag":66,"props":2466,"children":2468},{"className":2467},[],[2469],{"type":49,"value":722},{"type":49,"value":2471}," means \"no safe area padding at all.\"",{"type":43,"tag":140,"props":2473,"children":2474},{},[2475,2480,2482,2487,2489,2493,2495,2500],{"type":43,"tag":58,"props":2476,"children":2477},{},[2478],{"type":49,"value":2479},"Double-padding in Blazor Hybrid.",{"type":49,"value":2481}," Setting ",{"type":43,"tag":66,"props":2483,"children":2485},{"className":2484},[],[2486],{"type":49,"value":2088},{"type":49,"value":2488}," on the page ",{"type":43,"tag":58,"props":2490,"children":2491},{},[2492],{"type":49,"value":396},{"type":49,"value":2494}," using CSS ",{"type":43,"tag":66,"props":2496,"children":2498},{"className":2497},[],[2499],{"type":49,"value":190},{"type":49,"value":2501}," results in doubled insets. Pick one approach — CSS is recommended for Blazor.",{"type":43,"tag":140,"props":2503,"children":2504},{},[2505,2517,2519,2524],{"type":43,"tag":58,"props":2506,"children":2507},{},[2508,2510,2515],{"type":49,"value":2509},"Missing ",{"type":43,"tag":66,"props":2511,"children":2513},{"className":2512},[],[2514],{"type":49,"value":1776},{"type":49,"value":2516}," in Blazor.",{"type":49,"value":2518}," Without this meta tag, CSS ",{"type":43,"tag":66,"props":2520,"children":2522},{"className":2521},[],[2523],{"type":49,"value":190},{"type":49,"value":2525}," values are always zero on iOS.",{"type":43,"tag":140,"props":2527,"children":2528},{},[2529,2534,2536,2541,2543,2548,2550,2555,2557,2562],{"type":43,"tag":58,"props":2530,"children":2531},{},[2532],{"type":49,"value":2533},"Assuming .NET 9 behavior on Android.",{"type":49,"value":2535}," After upgrading to .NET 10, Android ",{"type":43,"tag":66,"props":2537,"children":2539},{"className":2538},[],[2540],{"type":49,"value":713},{"type":49,"value":2542}," defaults to ",{"type":43,"tag":66,"props":2544,"children":2546},{"className":2545},[],[2547],{"type":49,"value":722},{"type":49,"value":2549}," (was effectively ",{"type":43,"tag":66,"props":2551,"children":2553},{"className":2552},[],[2554],{"type":49,"value":381},{"type":49,"value":2556},"). Add ",{"type":43,"tag":66,"props":2558,"children":2560},{"className":2559},[],[2561],{"type":49,"value":2088},{"type":49,"value":2563}," to restore the previous behavior.",{"type":43,"tag":140,"props":2565,"children":2566},{},[2567,2579,2581,2586],{"type":43,"tag":58,"props":2568,"children":2569},{},[2570,2572,2577],{"type":49,"value":2571},"Using legacy ",{"type":43,"tag":66,"props":2573,"children":2575},{"className":2574},[],[2576],{"type":49,"value":117},{"type":49,"value":2578}," in new code.",{"type":49,"value":2580}," The old API is iOS-only and obsolete. Always use ",{"type":43,"tag":66,"props":2582,"children":2584},{"className":2583},[],[2585],{"type":49,"value":87},{"type":49,"value":2587}," for cross-platform safe area management.",{"type":43,"tag":129,"props":2589,"children":2591},{"id":2590},"checklist",[2592],{"type":49,"value":2593},"Checklist",{"type":43,"tag":136,"props":2595,"children":2598},{"className":2596},[2597],"contains-task-list",[2599,2618,2640,2654,2663,2692],{"type":43,"tag":140,"props":2600,"children":2603},{"className":2601},[2602],"task-list-item",[2604,2609,2611,2616],{"type":43,"tag":2605,"props":2606,"children":2608},"input",{"disabled":464,"type":2607},"checkbox",[],{"type":49,"value":2610}," Android upgrade: ",{"type":43,"tag":66,"props":2612,"children":2614},{"className":2613},[],[2615],{"type":49,"value":2088},{"type":49,"value":2617}," added if content goes under status bar",{"type":43,"tag":140,"props":2619,"children":2621},{"className":2620},[2602],[2622,2625,2627,2632,2634,2638],{"type":43,"tag":2605,"props":2623,"children":2624},{"disabled":464,"type":2607},[],{"type":49,"value":2626}," Edge-to-edge: ",{"type":43,"tag":66,"props":2628,"children":2630},{"className":2629},[],[2631],{"type":49,"value":722},{"type":49,"value":2633}," set on ",{"type":43,"tag":58,"props":2635,"children":2636},{},[2637],{"type":49,"value":1001},{"type":49,"value":2639}," page and layout",{"type":43,"tag":140,"props":2641,"children":2643},{"className":2642},[2602],[2644,2647,2649],{"type":43,"tag":2605,"props":2645,"children":2646},{"disabled":464,"type":2607},[],{"type":49,"value":2648}," ScrollView keyboard avoidance uses wrapper Grid, not ScrollView's own ",{"type":43,"tag":66,"props":2650,"children":2652},{"className":2651},[],[2653],{"type":49,"value":87},{"type":43,"tag":140,"props":2655,"children":2657},{"className":2656},[2602],[2658,2661],{"type":43,"tag":2605,"props":2659,"children":2660},{"disabled":464,"type":2607},[],{"type":49,"value":2662}," Blazor Hybrid: using either XAML or CSS safe areas, not both",{"type":43,"tag":140,"props":2664,"children":2666},{"className":2665},[2602],[2667,2670,2671,2676,2678,2683,2684,2690],{"type":43,"tag":2605,"props":2668,"children":2669},{"disabled":464,"type":2607},[],{"type":49,"value":2383},{"type":43,"tag":66,"props":2672,"children":2674},{"className":2673},[],[2675],{"type":49,"value":1776},{"type":49,"value":2677}," in Blazor's ",{"type":43,"tag":66,"props":2679,"children":2681},{"className":2680},[],[2682],{"type":49,"value":1784},{"type":49,"value":2383},{"type":43,"tag":66,"props":2685,"children":2687},{"className":2686},[],[2688],{"type":49,"value":2689},"\u003Cmeta viewport>",{"type":49,"value":2691}," tag",{"type":43,"tag":140,"props":2693,"children":2695},{"className":2694},[2602],[2696,2699,2701,2706,2708,2713,2715],{"type":43,"tag":2605,"props":2697,"children":2698},{"disabled":464,"type":2607},[],{"type":49,"value":2700}," Legacy ",{"type":43,"tag":66,"props":2702,"children":2704},{"className":2703},[],[2705],{"type":49,"value":71},{"type":49,"value":2707}," \u002F ",{"type":43,"tag":66,"props":2709,"children":2711},{"className":2710},[],[2712],{"type":49,"value":79},{"type":49,"value":2714}," migrated to ",{"type":43,"tag":66,"props":2716,"children":2718},{"className":2717},[],[2719],{"type":49,"value":87},{"type":43,"tag":2721,"props":2722,"children":2723},"style",{},[2724],{"type":49,"value":2725},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":2727,"total":2833},[2728,2747,2760,2778,2792,2809,2819],{"slug":2729,"name":2729,"fn":2730,"description":2731,"org":2732,"tags":2733,"stars":25,"repoUrl":26,"updatedAt":2746},"analyzing-dotnet-performance","analyze .NET code for performance anti-patterns","Scans .NET code for ~50 performance anti-patterns across async, memory, strings, collections, LINQ, regex, serialization, and I\u002FO with tiered severity classification. Use when analyzing .NET code for optimization opportunities, reviewing hot paths, or auditing allocation-heavy patterns.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2734,2737,2740,2743],{"name":2735,"slug":2736,"type":15},".NET","net",{"name":2738,"slug":2739,"type":15},"Code Analysis","code-analysis",{"name":2741,"slug":2742,"type":15},"Debugging","debugging",{"name":2744,"slug":2745,"type":15},"Performance","performance","2026-07-12T08:23:25.400375",{"slug":2748,"name":2748,"fn":2749,"description":2750,"org":2751,"tags":2752,"stars":25,"repoUrl":26,"updatedAt":2759},"android-tombstone-symbolication","symbolicate .NET runtime frames in Android tombstones","Symbolicate the .NET runtime frames in an Android tombstone file. Extracts BuildIds and PC offsets from the native backtrace, downloads debug symbols from the Microsoft symbol server, and runs llvm-symbolizer to produce function names with source file and line numbers. USE FOR triaging a .NET MAUI or Mono Android app crash from a tombstone, resolving native backtrace frames in libmonosgen-2.0.so or libcoreclr.so to .NET runtime source code, or investigating SIGABRT, SIGSEGV, or other native signals originating from the .NET runtime on Android. DO NOT USE FOR pure Java\u002FKotlin crashes, managed .NET exceptions that are already captured in logcat, or iOS crash logs. INVOKES Symbolicate-Tombstone.ps1 script, llvm-symbolizer, Microsoft symbol server.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2753,2754,2755,2756],{"name":2735,"slug":2736,"type":15},{"name":2314,"slug":2311,"type":15},{"name":2741,"slug":2742,"type":15},{"name":2757,"slug":2758,"type":15},"Microsoft","microsoft","2026-07-12T08:23:21.595572",{"slug":2761,"name":2761,"fn":2762,"description":2763,"org":2764,"tags":2765,"stars":25,"repoUrl":26,"updatedAt":2777},"apple-crash-symbolication","symbolicate .NET runtime frames in crash logs","Symbolicate .NET runtime frames in Apple platform .ips crash logs (iOS, tvOS, Mac Catalyst, macOS). Extracts UUIDs and addresses from the native backtrace, locates dSYM debug symbols, and runs atos to produce function names with source file and line numbers. Automatically downloads .dwarf symbols from the Microsoft symbol server using Mach-O UUIDs. USE FOR triaging a .NET MAUI or Mono app crash from an .ips file on any Apple platform, resolving native backtrace frames in libcoreclr or libmonosgen-2.0 to .NET runtime source code, retrieving .ips crash logs from a connected iOS device or iPhone, or investigating EXC_CRASH, EXC_BAD_ACCESS, SIGABRT, or SIGSEGV originating from the .NET runtime. DO NOT USE FOR pure Swift\u002FObjective-C crashes with no .NET components, or Android tombstone files. INVOKES Symbolicate-Crash.ps1 script, atos, dwarfdump, idevicecrashreport.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2766,2767,2768,2771,2774],{"name":2735,"slug":2736,"type":15},{"name":2741,"slug":2742,"type":15},{"name":2769,"slug":2770,"type":15},"iOS","ios",{"name":2772,"slug":2773,"type":15},"macOS","macos",{"name":2775,"slug":2776,"type":15},"Observability","observability","2026-07-12T08:23:20.369986",{"slug":2779,"name":2779,"fn":2780,"description":2781,"org":2782,"tags":2783,"stars":25,"repoUrl":26,"updatedAt":2791},"assertion-quality","evaluate assertion quality in test suites","Analyzes the variety and depth of assertions across test suites in any language. Use when the user asks to evaluate assertion quality, find shallow tests, identify assertion-free tests (no assertions or only trivial ones like Assert.IsNotNull \u002F toBeTruthy()), flag self-referential or tautological assertions, measure assertion diversity, or audit whether tests verify different facets of behavior. Polyglot: .NET, Python, TS\u002FJS, Java, Go, Ruby, Rust, Swift, Kotlin, PowerShell, C++. DO NOT USE FOR: writing new tests (use code-testing-agent \u002F writing-mstest-tests), mutation reasoning about whether tests would catch a bug (use test-gap-analysis), or a general severity-ranked anti-pattern audit (use test-anti-patterns), fixing or rewriting assertions, or writing, fixing, or modernizing MSTest tests, assertions, or attributes (use writing-mstest-tests).",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2784,2785,2788],{"name":2738,"slug":2739,"type":15},{"name":2786,"slug":2787,"type":15},"QA","qa",{"name":2789,"slug":2790,"type":15},"Testing","testing","2026-07-12T08:23:51.277743",{"slug":2793,"name":2793,"fn":2794,"description":2795,"org":2796,"tags":2797,"stars":25,"repoUrl":26,"updatedAt":2808},"author-component","create and review Blazor components","Create or review Blazor components (.razor files) with correct architecture. USE FOR: writing new Blazor components that do NOT involve JavaScript interop, implementing parameters and EventCallback, RenderFragment slots, component lifecycle (OnInitializedAsync, OnParametersSet), async patterns, IAsyncDisposable, CancellationToken, CSS isolation, code-behind. DO NOT USE FOR: creating new projects (use create-blazor-project), JavaScript interop or calling browser APIs from Blazor (use use-js-interop), forms and validation (use collect-user-input), prerendering issues (use support-prerendering), HTTP data fetching patterns (use fetch-and-send-data), coordinating state between unrelated components (use coordinate-components).\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2798,2799,2802,2804,2805],{"name":2735,"slug":2736,"type":15},{"name":2800,"slug":2801,"type":15},"Blazor","blazor",{"name":2803,"slug":277,"type":15},"C#",{"name":20,"slug":21,"type":15},{"name":2806,"slug":2807,"type":15},"Web Development","web-development","2026-07-15T06:03:29.216359",{"slug":2810,"name":2810,"fn":2811,"description":2812,"org":2813,"tags":2814,"stars":25,"repoUrl":26,"updatedAt":2818},"binlog-failure-analysis","analyze MSBuild binary logs","Analyze MSBuild binary logs to diagnose build failures. USE FOR: build errors that are unclear from console output, diagnosing cascading failures across multi-project builds, tracing MSBuild target execution order, and generally any MSBuild build issues. Requires an existing .binlog file. DO NOT USE FOR: generating binlogs (use binlog-generation), non-MSBuild build systems.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2815,2816,2817],{"name":2738,"slug":2739,"type":15},{"name":2741,"slug":2742,"type":15},{"name":2757,"slug":2758,"type":15},"2026-07-12T08:21:34.637923",{"slug":2820,"name":2820,"fn":2821,"description":2822,"org":2823,"tags":2824,"stars":25,"repoUrl":26,"updatedAt":2832},"binlog-generation","generate MSBuild binary logs for diagnostics","Generate MSBuild binary logs (binlogs) for build diagnostics and analysis. USE FOR: adding \u002Fbl:{} to any dotnet build, test, pack, publish, or restore command to capture a full build execution trace, prerequisite for binlog-failure-analysis and build-perf-diagnostics skills, enabling post-build investigation of errors or performance. Requires MSBuild 17.8+ \u002F .NET 8 SDK+ for {} placeholder; PowerShell needs -bl:{{}}. DO NOT USE FOR: non-MSBuild build systems (npm, Maven, CMake), analyzing an existing binlog (use binlog-failure-analysis instead).",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2825,2828,2829],{"name":2826,"slug":2827,"type":15},"Build","build",{"name":2741,"slug":2742,"type":15},{"name":2830,"slug":2831,"type":15},"Engineering","engineering","2026-07-19T05:38:19.340791",96,{"items":2835,"total":2940},[2836,2848,2855,2862,2870,2876,2884,2890,2896,2906,2919,2930],{"slug":2837,"name":2837,"fn":2838,"description":2839,"org":2840,"tags":2841,"stars":2845,"repoUrl":2846,"updatedAt":2847},"multithreaded-task-migration","migrate MSBuild tasks to multithreaded mode","Guide for migrating MSBuild tasks to multithreaded mode support, including compatibility red-team review. Use this when converting tasks to thread-safe versions, implementing IMultiThreadableTask, adding TaskEnvironment support, or auditing migrations for behavioral compatibility.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2842,2843,2844],{"name":2735,"slug":2736,"type":15},{"name":2830,"slug":2831,"type":15},{"name":2744,"slug":2745,"type":15},5535,"https:\u002F\u002Fgithub.com\u002Fdotnet\u002Fmsbuild","2026-07-22T05:37:33.965588",{"slug":2729,"name":2729,"fn":2730,"description":2731,"org":2849,"tags":2850,"stars":25,"repoUrl":26,"updatedAt":2746},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2851,2852,2853,2854],{"name":2735,"slug":2736,"type":15},{"name":2738,"slug":2739,"type":15},{"name":2741,"slug":2742,"type":15},{"name":2744,"slug":2745,"type":15},{"slug":2748,"name":2748,"fn":2749,"description":2750,"org":2856,"tags":2857,"stars":25,"repoUrl":26,"updatedAt":2759},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2858,2859,2860,2861],{"name":2735,"slug":2736,"type":15},{"name":2314,"slug":2311,"type":15},{"name":2741,"slug":2742,"type":15},{"name":2757,"slug":2758,"type":15},{"slug":2761,"name":2761,"fn":2762,"description":2763,"org":2863,"tags":2864,"stars":25,"repoUrl":26,"updatedAt":2777},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2865,2866,2867,2868,2869],{"name":2735,"slug":2736,"type":15},{"name":2741,"slug":2742,"type":15},{"name":2769,"slug":2770,"type":15},{"name":2772,"slug":2773,"type":15},{"name":2775,"slug":2776,"type":15},{"slug":2779,"name":2779,"fn":2780,"description":2781,"org":2871,"tags":2872,"stars":25,"repoUrl":26,"updatedAt":2791},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2873,2874,2875],{"name":2738,"slug":2739,"type":15},{"name":2786,"slug":2787,"type":15},{"name":2789,"slug":2790,"type":15},{"slug":2793,"name":2793,"fn":2794,"description":2795,"org":2877,"tags":2878,"stars":25,"repoUrl":26,"updatedAt":2808},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2879,2880,2881,2882,2883],{"name":2735,"slug":2736,"type":15},{"name":2800,"slug":2801,"type":15},{"name":2803,"slug":277,"type":15},{"name":20,"slug":21,"type":15},{"name":2806,"slug":2807,"type":15},{"slug":2810,"name":2810,"fn":2811,"description":2812,"org":2885,"tags":2886,"stars":25,"repoUrl":26,"updatedAt":2818},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2887,2888,2889],{"name":2738,"slug":2739,"type":15},{"name":2741,"slug":2742,"type":15},{"name":2757,"slug":2758,"type":15},{"slug":2820,"name":2820,"fn":2821,"description":2822,"org":2891,"tags":2892,"stars":25,"repoUrl":26,"updatedAt":2832},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2893,2894,2895],{"name":2826,"slug":2827,"type":15},{"name":2741,"slug":2742,"type":15},{"name":2830,"slug":2831,"type":15},{"slug":2897,"name":2897,"fn":2898,"description":2899,"org":2900,"tags":2901,"stars":25,"repoUrl":26,"updatedAt":2905},"build-parallelism","optimize MSBuild build parallelism","Diagnose and fix under-parallelized MSBuild builds. USE WHEN a multi-project solution build is slower than expected, doesn't speed up when you add cores, pegs a single core while others idle, or you want to know why `-m` isn't helping. Note: `\u002Fmaxcpucount` default is 1 (sequential) — always pass `-m` for parallel builds. Covers finding the critical path (longest serial ProjectReference chain), graph build (`\u002Fgraph`), BuildInParallel, and solution filters (`.slnf`). DO NOT USE FOR: single-project builds, incremental issues (use incremental-build), compilation slowness inside one project (use build-perf-diagnostics), non-MSBuild build systems.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2902,2903,2904],{"name":2735,"slug":2736,"type":15},{"name":2830,"slug":2831,"type":15},{"name":2744,"slug":2745,"type":15},"2026-07-19T05:38:18.364937",{"slug":2907,"name":2907,"fn":2908,"description":2909,"org":2910,"tags":2911,"stars":25,"repoUrl":26,"updatedAt":2918},"build-perf-baseline","establish and optimize build performance baselines","Establish build performance baselines and apply systematic optimization techniques. USE FOR: diagnosing slow builds, establishing before\u002Fafter measurements (cold, warm, no-op scenarios), applying optimization strategies like MSBuild Server, static graph builds, artifacts output, and dependency graph trimming. Start here before diving into build-perf-diagnostics, incremental-build, or build-parallelism. DO NOT USE FOR: non-MSBuild build systems, detailed bottleneck analysis (use build-perf-diagnostics after baselining).",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2912,2913,2916,2917],{"name":2830,"slug":2831,"type":15},{"name":2914,"slug":2915,"type":15},"Monitoring","monitoring",{"name":2744,"slug":2745,"type":15},{"name":2789,"slug":2790,"type":15},"2026-07-12T08:21:35.865649",{"slug":2920,"name":2920,"fn":2921,"description":2922,"org":2923,"tags":2924,"stars":25,"repoUrl":26,"updatedAt":2929},"build-perf-diagnostics","diagnose MSBuild build performance bottlenecks","Diagnose MSBuild build performance bottlenecks using binary log analysis. USE FOR: identifying why builds are slow by analyzing binlog performance summaries, detecting ResolveAssemblyReference (RAR) taking >5s, Roslyn analyzers consuming >30% of Csc time, single targets dominating >50% of build time, node utilization below 80%, excessive Copy tasks, NuGet restore running every build. Covers timeline analysis, Target\u002FTask Performance Summary interpretation, and 7 common bottleneck categories. Use after build-perf-baseline has established measurements. DO NOT USE FOR: establishing initial baselines (use build-perf-baseline first), fixing incremental build issues (use incremental-build), parallelism tuning (use build-parallelism), non-MSBuild build systems.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2925,2926,2927,2928],{"name":2735,"slug":2736,"type":15},{"name":2741,"slug":2742,"type":15},{"name":2830,"slug":2831,"type":15},{"name":2744,"slug":2745,"type":15},"2026-07-12T08:21:40.961722",{"slug":2931,"name":2931,"fn":2932,"description":2933,"org":2934,"tags":2935,"stars":25,"repoUrl":26,"updatedAt":2939},"check-bin-obj-clash","detect MSBuild output path conflicts","Detects MSBuild projects with conflicting OutputPath or IntermediateOutputPath. USE FOR: builds failing with 'Cannot create a file when that file already exists', 'The process cannot access the file because it is being used by another process', intermittent build failures that succeed on retry, or missing\u002Foverwritten outputs in multi-project or multi-targeting builds where bin\u002Fobj (or project.assets.json) collide. Common causes: shared OutputPath, missing AppendTargetFrameworkToOutputPath, extra global properties (e.g. PublishReadyToRun), or SetTargetFramework on a ProjectReference to a single-targeting project. DO NOT USE FOR: file access errors unrelated to MSBuild (OS-level locking), single-project single-TFM builds, non-MSBuild build systems.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2936,2937,2938],{"name":2741,"slug":2742,"type":15},{"name":2830,"slug":2831,"type":15},{"name":2786,"slug":2787,"type":15},"2026-07-19T05:38:14.336279",144]