Shiny.Maui.Shell 1.0.0-beta-0020

Shiny MAUI

Work In Progress

Shell

Inspired entirely by Prism - there is nothing here that is an original idea. I wanted to build this myself and build it around Shell so I could understand the inner workings of Shell.

Features/Roadmap

• Registration
• ServiceScope per Page
• Shell XAML Integration(?)
• Navigation Service
  • Events…?
  • To Commands
  • NavigateTo(string uri, args)
  • NavigateTo<TViewModel>
    • With Strongly Typed Init
  • GoBack(args)
  • Pop To Root
  • Set Root
  • Modals/Tabs
• Auto ViewModel Push on to page
• No special AppShell class to implement
• Source Generation
  • Static Routes Class
  • Navigator extension methods for strongly typed navigation
  • Dependency injection source generated method
• ViewModel lifecycle
  • Strongly Typed Navigation Args (when navigating by viewmodel - Take a look at Shiny Mediator shell for this
  • OnAppearing/OnDisappearing
  • Navigation Confirmation
  • Disposable/Destroy
  • OnNavigatedFrom()
    • Direction pop, uri from where?

Setup

1. Install Nuget
2. In your MauiProgram.cs, add the following

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");
            });

#if DEBUG
        builder.Logging.SetMinimumLevel(LogLevel.Trace);
        builder.Logging.AddDebug();
#endif

        return builder.Build();
    }
}

3. Now you can inject Shiny.INavigator into your VIewModels and navigate away

Navigation

Shiny.INavigator

// navigate by route name with args
INavigator navigator; // injected into your viewmodel

// navigate to a registered route (in XAML or with our .Add in UseShinyShell)
await navigator.NavigateTo("MyPageOrRoute", ("MyArg", 99), ("Arg2", "Hello"));

// navigate by viewmodel with strongly typed args
await navigator.NavigateTo<MyViewModel(viewmodel => viewmodel.MyArg = 99);

// goback or pop model
await navigator.GoBack(("SendAnotherArg", "I'm back"));

ViewModel Lifecycle

ViewModel lifecycles work basically exactly like Prism Library - Implement the following interfaces to get the behaviour

• System.IDisposable
  • Fires when the page/viewmodel is being removed entirely. Destroy any hooks here to prevent leaks
• Shiny.IPageLifecycleAware
  • OnAppearing() - when the page becomes visible
  • OnDisppearing() - fires when the page becomes hidden or popped
• Shiny.INavigationConfirmation
  • Task<bool> CanNavigate() - decide if the user is allowed to leave or not
• Shiny.INavigationAware
  • void OnNavigatingFrom(IDictionary<string, object> parameters) - allows you to mutate the navigation args before leaving the page
• Microsoft.Maui.Controls.IQueryAttributable
  • void ApplyQueryAttributes(IDictionary<string, object> query) - Receives arguments navigating to or back

Source Generation

Our source generators help you achieve a lot of the above with less boilerplate and less code overall

THIS

// INPUT
[ShellMap<MyPage>("MyRoute")]
public class MyViewModel 
{
    [ShellProperty]
    public string Arg { get; set; }
}

GENERATES ALL OF THIS FOR YOU TO PLUGIN SEAMLESSLY WITH YOUR CODE

• Strong Typed Routes with arguments
• Easy Dependency Injection Registration of Routes

public static class NavigationBuilderExtensions
{
    public static global::Shiny.ShinyAppBuilder AddGeneratedMaps(this global::Shiny.ShinyAppBuilder builder)
    {
        builder.Add<Sample.MyPage, Sample.MyViewModel>(Routes.My);
        return builder;
    }
}


public static class NavigationExtensions
{
    public static global::System.Threading.Tasks.Task NavigateToModal(this global::Shiny.INavigator navigator, string arg1)
    {
        return navigator.NavigateTo<Sample.ModalViewModel>(x => { x.Arg = arg; });
    }
}

public static class Routes
{
    public const string My = "MyPage";
}