Proposal for Enhanced Customization of App Shell in .NET MAUI

[carloshenriquecarniatto]

Description

Introduction

The .NET MAUI Shell was designed to simplify app development by providing key features such as URI-based navigation, a unified visual hierarchy, and a consistent user experience. However, its current customization constraints often lead developers to implement separate pages with custom routing instead of fully leveraging Shell capabilities.

Current Challenges

Limited Layout and Structure Control

Developers face restrictions with menus, page lifecycle management, and memory usage, which complicate the creation of highly customized interfaces. Integration issues between Shell and components like TabbedPage, FlyoutPage, or NavigationPage further limit design flexibility.

Complex Edge-to-Edge Implementation

Enabling edge-to-edge content requires intricate workarounds and platform-specific native code, increasing development time and effort. Developers often struggle against Shell’s default behaviors when different pages demand varying edge-to-edge configurations.

Native Bindings Difficulties

Creating custom bindings for native APIs in iOS and Android within a .NET MAUI project can be time-consuming and challenging, as finding equivalent binding implementations is often complicated.

Proposed Solution: “Blank Canvas” Shell

Core Concept

Transform the App Shell into a blank canvas, maintaining its underlying navigation, routing, and state management infrastructure while granting developers full control over the presentation layer.

Key Features

• Flexible Base Structure
  Retain navigation, routing, and state management features of the current Shell while allowing complete customization of the UI layer.

• Granular Page-Level Customization
  Configure individual pages for features like edge-to-edge rendering without platform-specific workarounds, enabling native support for page-specific settings.

• Simplified Customization API
  Provide a unified interface for styling and behavior customization, reducing the need for native platform code and offering customizable templates and controls.

Benefits

For Developers

• Reduced Development Time
  Eliminate the need for alternate routing systems and minimize reliance on complex native code.
• Enhanced Design Flexibility
  Implement unique UI designs while preserving Shell’s structural benefits and supporting diverse page-specific UI patterns.

For the .NET MAUI Ecosystem

• Broader Shell Adoption
  Encourage more developers to choose Shell as the default navigation solution, reducing fragmentation and strengthening Shell’s position as a unified framework component.

Suggested Technical Implementation

Template Abstraction Layer

<Shell x:Class="App.CustomShell">
  <Shell.Template>
    <ControlTemplate x:Key="BlankShellTemplate">
      <!-- Minimal base structure -->
      <ContentPresenter />
    </ControlTemplate>
  </Shell.Template>
</Shell>

This approach defines a minimal visual template while preserving underlying Shell infrastructure.

Page-Level Configuration Attributes

[ShellPageConfiguration(
  EdgeToEdge = true,
  CustomNavBar = false,
  FullScreenMode = true
)]
public partial class CustomPage : ContentPage
{
  // Page-specific configuration
}

Developers can annotate pages to specify desired Shell behaviors without manual platform code.

Unified Customization API

Expose bindable properties and template support for all visual aspects of Shell, enabling seamless integration of platform-specific features and allowing multiple templates per page type.

Conclusion

By converting the App Shell into a blank canvas, .NET MAUI retains its architectural advantages while offering developers unparalleled flexibility. This enhancement can significantly reduce development time, foster innovative UI designs, and promote widespread adoption of Shell in the .NET MAUI ecosystem.

Public API Changes

Suggested Technical Implementation

Template Abstraction Layer

This approach defines a minimal visual template while preserving underlying Shell infrastructure.

Page-Level Configuration Attributes

[ShellPageConfiguration(
EdgeToEdge = true,
CustomNavBar = false,
FullScreenMode = true
)]
public partial class CustomPage : ContentPage
{
// Page-specific configuration
}

Intended Use-Case

Core Concept

Transform the App Shell into a blank canvas, maintaining its underlying navigation, routing, and state management infrastructure while granting developers full control over the presentation layer.

Key Features

Flexible Base Structure
Retain navigation, routing, and state management features of the current Shell while allowing complete customization of the UI layer.

Granular Page-Level Customization
Configure individual pages for features like edge-to-edge rendering without platform-specific workarounds, enabling native support for page-specific settings.

Simplified Customization API
Provide a unified interface for styling and behavior customization, reducing the need for native platform code and offering customizable templates and controls.

[jor1196]

This is an emergency level emergency in a state of emergency

[jaimeatsherpa]

I'm not using Shell basically because of the problems you described. So indeed, we need something much more flexible that we can customize and work with. It's impractical to make something that everyone will like or use, that's why I would appreciate something more abstract like what you described that gives me the opportunity of fully implementing what I need in that specific use case.
It's a trade of between something ready to be used with minimal code or something robust and flexible that can be used across most use cases.