Different Top App Bar for pages

[OliverDevsCodex]

Hey guys,

first of all, I love this package! So thank you for that.

Now to my question:
I am fiddling around for a bit now on how to implement a "clean" approach on how to have a different appearance for the Top App Bar on different pages.

When using the .net Maui Shell I am able to override the TitelView within the PageView and make the appearance fit my needs. It also supports DataBinding.

How could I achieve something similar with SimpleShell?

Thank you!

[RadekVyM]

Hi @OliverDevsCodex,

I put together a simple sample (/src/Samples/Sample.SimpleShellTopBar) demonstrating my solution to your problem. There may be a better solution, but this is how I would do it.

The main idea is that you abstract the top app bar into another control and wrap your page content with it.

This is a simplified version of the control (I called it TopBarScaffold) from the sample:

<ContentView
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="Sample.SimpleShellTopBar.Views.Controls.TopBarScaffold"
    
    x:Name="scaffold">

    <ContentView.Content>
        <Grid
            RowDefinitions="auto, *"
            CompressedLayout.IsHeadless="True">
            <Grid
                x:Name="topBar">
                <!-- Top bar content -->
            </Grid>

            <ContentView
                x:Name="pageContent"
                Content="{Binding Source={x:Reference scaffold}, Path=PageContent}"
                Grid.Row="1"
                CompressedLayout.IsHeadless="True"/>
        </Grid>
    </ContentView.Content>
</ContentView>

Use of the control on a detail page:

<ContentPage
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:controls="clr-namespace:Sample.SimpleShellTopBar.Views.Controls"
    x:Class="Sample.SimpleShellTopBar.Views.Pages.FirstDetailPage"
    Title="First Detail Page"
    
    x:Name="thisPage">

    <controls:TopBarScaffold
        Title="{Binding Title, Source={x:Reference thisPage}}">

        <VerticalStackLayout>
            <Label 
                Text="Content" />
        </VerticalStackLayout>

    </controls:TopBarScaffold>
</ContentPage>

Use of the control for root pages in SimpleShell:

<simpleShell:SimpleShell.RootPageContainer>
    <Grid
        RowDefinitions="*, auto">
        <controls:TopBarScaffold
            IsBackButtonVisible="False"
            Title="{Binding CurrentShellContent.Title, Source={x:Reference thisShell}}">
            <simpleShell:SimpleNavigationHost/>
        </controls:TopBarScaffold>

        <HorizontalStackLayout
            x:Name="tabBar">
        </HorizontalStackLayout>
    </Grid>
</simpleShell:SimpleShell.RootPageContainer>

Please check the sample for the full source code.