.Net MAUI Regions on screen

In the passed we produced WPF application for grinding machine control, and there used to be navigational regions (Prism WPF). We managed to use them to show Axis data on the side of the app regardles of what the main part of the app was.

As i am moving to .Net MAUI i figured the way to go is to use shell navigation with content pages. We used to have Topbar for Status, Rightbar for navigation and Leftbar for Axis.

I am willing to use default menu items for navigation, but i would like to still have that topbar and rightbar.

What is the way to go ? Should i have some kind of CustomContentPage with grid layout and just fill in the top,and left bars with content in the parent, and inherit to all my other view which uses these ?

Thanx for any tips.

I have watched both courses by brandon minnic, published small app to production 2 years ago, but i still dont see how to do this the "right" way.

Solution

For the topbar you can use the Shell.TitleView. And for the rightbar, you can use the ContentPresenter and ControlTemplate.

Declare the ControlTemplate in the \Resources\Styles\Styles.xaml:

<ControlTemplate x:Key="rightbar">
     <Grid ColumnDefinitions="9*,1*" RowDefinitions="*,*,*">
         <ContentPresenter Grid.RowSpan="3" Grid.Column="0"/>
         <Button Text="menu1" Grid.Row="0" Grid.Column="1"/>
         <Button Text="menu2" Grid.Row="1" Grid.Column="1"/>
         <Button Text="menu3" Grid.Row="2" Grid.Column="1"/>
     </Grid>
 </ControlTemplate>

Declare the Shell.TitleView in the AppShell.xaml:

    <Shell.TitleView>
        <Grid ColumnDefinitions="*,*,*,*">
            <Button Text="Menu1" Grid.Column="0"/>
            <Button Text="Menu2" Grid.Column="1"/>
            <Button Text="Menu3" Grid.Column="2"/>
            <Button Text="Menu4" Grid.Column="3"/>
        </Grid>
    </Shell.TitleView>
    <ShellContent
        Title="Home"
        ContentTemplate="{DataTemplate local:MainPage}"
        Route="MainPage" />

And use the ControlTemplate in the Page:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             ControlTemplate="{StaticResource rightbar}"
             x:Class="MauiApp4.MainPage">

        <!--custom your page content in the contentpresenter-->

</ContentPage>