Shell Application

Version: v9.x

Here's an example of a simple shell-based application:

using FmgLib.MauiMarkup;

public partial class App : Application
{
    public App()
    {
        this.MainPage(
	        new Shell()
	        .ItemTemplate(() => new ShellItemTemplate())
            .Resources(new ResourceDictionary().MergedDictionaries(AppStyles.Default))
	        .Items(
				new FlyoutItem()
				.FlyoutDisplayOptions(FlyoutDisplayOptions.AsMultipleItems)
				.Items(
	                new Tab()
	                .Title("Main")
	                .Items(
	                    new ShellContent()
		                .Title("Hello Page")
		                .ContentTemplate(new HelloWorldPage()),
                        
	                    new ShellContent()
		                .Title("ExamplePage")
		                .ContentTemplate(new ExamplePage()),
	                ),

	                new ShellContent()
	                .Title("Grid")
	                .ContentTemplate(new GridPage()),
	                ...
	            )
			)
        );
    }
}

You can customize the appearance of the FlyoutItem by defining a custom content view and setting the ItemTemplate property on the Shell element.

Here's an example of defining the appearance of a FlyoutItem:

public class ShellItemTemplate : ContentView
{
    public ShellItemTemplate()
    {
        this
        .Content(
	        new Grid()
	        .ColumnDefinitions(e => e.Star(0.2).Star(0.8))
	        .Children(
	            new Image()
	                .Source(e => e.Path("FlyoutIcon"))
	                .Margin(5)
	                .HeightRequest(45),

	            new Label()
	                .GridColumn(1)
	                .Text(e => e.Path("Title"))
	                .FontSize(20)
	                .FontAttributes(FontAttributes.Italic)
	                .CenterVertically()
	        )
		);
    }
}