Shell | Getting Started

Make .NET MAUI Shell shinier with viewmodel lifecycle management, navigation, and source generation to remove boilerplate, reduce errors, and make your app testable.

Inspired by Prism Library by Dan Siegel and Brian Lagunas.

• 
• 

Frameworks

.NET MAUI

Features

• Navigation service — route-based and ViewModel-based navigation with INavigator
• XAML navigation — attached Navigate.* properties for Button, MenuItem, and ToolbarItem
• Tab badges — set and clear numeric tab badges by route or ViewModel
• Shell switching — swap the entire Shell at runtime with SwitchShell (instance or DI-resolved)
• Dialog service — alert, confirm, prompt, and action sheet dialogs with IDialogs
• Navigation events — Navigating and Navigated events with source/destination ViewModel instances
• ViewModel lifecycle — appearing/disappearing, navigation confirmation, navigation awareness, and disposal
• Auto BindingContext — ViewModels automatically attached to page binding contexts
• Source generation — eliminates route registration boilerplate, generates strongly-typed navigation extensions and DI registration
• ShinyShell base class — one base class change for deterministic BindingContext assignment on the initial page
• Testable — INavigator and IDialogs are injectable and mockable for unit testing

Setup

1. Install the NuGet package

   

   dotnet add package Shiny.Maui.Shell

2. Configure UseShinyShell in your MauiProgram.cs

   public static class MauiProgram
   {
       public static MauiApp CreateMauiApp()
       {
           var builder = MauiApp.CreateBuilder();
           builder
               .UseMauiApp<App>()
               .UseShinyShell(x => x
                   .Add<MainPage, MainViewModel>(registerRoute: false)
                   .Add<AnotherPage, AnotherViewModel>("another")
               )
               .ConfigureFonts(fonts =>
               {
                   fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                   fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
               });
   
           return builder.Build();
       }
   }

3. Update your AppShell to inherit from ShinyShell

   AppShell.xaml:

   <shiny:ShinyShell
       x:Class="MyApp.AppShell"
       xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:shiny="clr-namespace:Shiny;assembly=Shiny.Maui.Shell"
       xmlns:local="clr-namespace:MyApp"
       Title="MyApp">
   
       <ShellContent
           Title="Home"
           ContentTemplate="{DataTemplate local:MainPage}"
           Route="MainPage" />
   
   </shiny:ShinyShell>

   AppShell.xaml.cs:

   using Shiny;
   
   namespace MyApp;
   
   public partial class AppShell : ShinyShell
   {
       public AppShell()
       {
           InitializeComponent();
       }
   }

4. Inject INavigator into your ViewModels and navigate

   using Shiny;
   
   public class MainViewModel(INavigator navigator)
   {
       public async Task GoToDetails()
       {
           await navigator.NavigateTo("another");
       }
   }

Note

Your AppShell must inherit from ShinyShell — this ensures the initial page’s BindingContext is set deterministically via Shell’s own OnNavigated lifecycle.

Quick Example

// Navigate by route with arguments
await navigator.NavigateTo("details", ("Id", 42));

// Navigate by ViewModel with strongly typed setup
await navigator.NavigateTo<DetailViewModel>(vm => vm.Id = 42);

// Set a numeric badge on a tab
await navigator.SetTabBadge("Inbox", 3);

// Go back with arguments
await navigator.GoBack(("Result", "saved"));

// Switch to a different Shell at runtime
await navigator.SwitchShell<AdminShell>();

XAML Navigation

Navigate attached properties let you trigger route-based navigation directly from XAML without creating a ViewModel command first.

<ContentPage
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:shiny="clr-namespace:Shiny;assembly=Shiny.Maui.Shell">

    <Button Text="Open Detail"
            shiny:Navigate.Route="Detail"
            shiny:Navigate.ParameterKey="ItemId"
            shiny:Navigate.ParameterValue="{Binding SelectedId}" />

    <ToolbarItem Text="Home"
                 shiny:Navigate.Route="MainPage"
                 shiny:Navigate.RelativeNavigation="False" />
</ContentPage>

Navigate currently supports Button, MenuItem, and ToolbarItem.

Tab Badges

Use INavigator to update numeric tab badges for routes that already exist in the active Shell:

await navigator.SetTabBadge("Inbox", 3);
await navigator.SetTabBadge<InboxViewModel>(7);
await navigator.ClearTabBadge("Inbox");
await navigator.ClearTabBadge<InboxViewModel>();

Tab badges are supported on Android, iOS, Mac Catalyst, and Windows. Linux and macOS AppKit throw PlatformNotSupportedException.

AI Coding Assistant

Claude Code GitHub Copilot

Step 1 — Add the marketplace:

claude plugin marketplace add shinyorg/skills

Step 2 — Install the plugin:

claude plugin install shiny-maui@shiny

Step 1 — Add the marketplace:

copilot plugin marketplace add https://github.com/shinyorg/skills

Step 2 — Install the plugin:

copilot plugin install shiny-maui@shiny

View shiny-maui Plugin

Next Steps

• Navigation — Full INavigator API reference
• Dialogs — Alert, confirm, prompt, and action sheet dialogs
• ViewModel Lifecycle — Lifecycle interfaces and events
• Source Generation — Eliminate boilerplate with attributes