Page chrome and toolbars

Configure navigation titles, bars, search, badges, and page-owned actions.

Navigation chrome belongs to the visible ContentView. Configure it in the page constructor so UIKit can apply it as the page enters the stack.

public LibraryView()
{
    Title = "Library";
    TitleStyle = TitleStyle.Large;
    BackgroundStyle = PageBackground.Grouped;
    StatusBar = StatusBarStyle.Default;
    BarTint = Colors.Indigo;
}

Prompt adds a smaller line above the title. TitleColor and LargeTitleColor override the two title states. BackButtonTitle and BackButtonStyle control how this page is represented by the next page's back button.

Set HidesNavigationBar for immersive content and HidesTabBar for a pushed destination that needs the full bottom edge. ScrollsUnderBars determines whether scrolling content extends beneath translucent bars. SafeAreaEdges still controls the page's content inset.

public LibraryView(LibraryViewModel viewModel) : base(viewModel)
{
    ToolbarItems.Add(new ToolbarItem
    {
            Icon = ImageSource.Symbol("plus"),
        IsPrimary = true,
        Command = viewModel.AddCommand
    });

    BottomToolbarItems.Add(new ToolbarItem
    {
        Text = "Refresh",
            Icon = ImageSource.Symbol("arrow.clockwise"),
        Command = viewModel.RefreshCommand
    });
}

A toolbar item can show text, a local ImageSource, tint, a command, or a menu of MenuAction entries. Menu icons use the same local image sources. Primary items receive the platform's emphasized treatment.

Bottom items use the navigation controller's classic toolbar. A visible tab bar occupies the same bottom edge, so the toolbar stays hidden while that tab bar is present. Set HidesTabBar on a pushed page when its bottom toolbar should replace the tab bar.

Setting SearchPlaceholder enables the native navigation search controller:

public SearchView()
{
    SearchPlaceholder = "Search books";
    SearchText = Bind(vm => vm.Query)
        .TwoWay((vm, val) => vm.Query = val);

    SearchScopes.Add("All");
    SearchScopes.Add("Downloaded");
    SearchScopeIndex = Bind(vm => vm.Scope)
        .TwoWay((vm, val) => vm.Scope = val);

    SearchCommand = viewModel.SubmitSearchCommand;
}

SearchChanged fires as text changes, while SearchCommand runs on submission with the current text as its parameter. SearchScopeChanged reports a new scope index and SearchCanceled runs when the search UI closes.

HidesSearchBarWhenScrolling controls collapsing, SearchObscuresBackground controls the dimmed overlay, and HidesSearchScopesWhenEmpty delays scope buttons until the user enters text.

SearchText and SearchScopeIndex use the same two-way binding rules described in MVVM and binding.