Blocks

A block is a whole screen built from the components: an app shell with a bottom nav, or a page with an edge menu. add writes one file you own to Components/Blocks/ (namespace <App>.Components.Blocks, next to Components/UI or Components/Native) and installs the components it uses. Each block is a plain view in C#: use it as a page's content and edit it like any other code.

The previews are the Avalonia blocks at a phone's size, running in your browser.

Using a block

shellui-native add bottom-nav-01

using MyApp.Components.Blocks;

var shell = new BottomNav01();
shell.Pages["home"] = new HomeView();      // one view per tab Value
shell.Pages["cards"] = new CardsView();
shell.ActionClicked += (_, _) => StartPayment();
Content = shell;

using MyApp.Components.Blocks;

var shell = new BottomNav01();
shell.Pages["home"] = new HomeView();      // one view per tab Value
shell.Pages["cards"] = new CardsView();
shell.ActionClicked += (_, _) => StartPayment();
Content = shell;

Until you put your views in Pages, each tab shows a placeholder page: a title over grey cards. Change the tabs, their icons and the variant in the file itself.

Bottom nav

bottom-nav-01

An app shell like a wallet app's: a tab bar with a raised Pay button in the middle and the user's avatar on the last tab, with a count badge on Alerts and a dot on the avatar. The active tab is in the primary colour. Uses bottom-nav and avatar.

shellui-native add bottom-nav-01

bottom-nav-02

An app shell with a Material 3 tab bar: a pill grows behind the active icon. Uses bottom-nav.

shellui-native add bottom-nav-02

bottom-nav-03

An app shell with a floating tab bar over the page that slides away while the page scrolls down; only the active tab shows its label. Uses bottom-nav.

shellui-native add bottom-nav-03

bottom-nav-04

An app shell with a compact capsule of icons; the active one widens into a pill with its label. The capsule slides away while the page scrolls down too. Uses bottom-nav.

shellui-native add bottom-nav-04

bottom-nav-05

An app shell whose active tab rises into a circle over the bar; the bar slides away while the page scrolls down. Uses bottom-nav.

shellui-native add bottom-nav-05

Edge menu

edge-menu-01

A page with a dock of tools on its right edge: a solid rail of five tiles (Settings, Notes, Calendar, Images, Camera) that dims the page while open. Put your view in Page, change the tiles to your tools and handle ToolPicked. Uses edge-menu.

shellui-native add edge-menu-01

var page = new EdgeMenu01 { Page = new NotesView() };
page.ToolPicked += (_, tool) => OpenTool(tool);   // "settings", "notes", "calendar", ...
Content = page;

var page = new EdgeMenu01 { Page = new NotesView() };
page.ToolPicked += (_, tool) => OpenTool(tool);   // "settings", "notes", "calendar", ...
Content = page;