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