How do I get MAUI to show an image on all pages?-CodePudding

I am designing an App for my company and I need it to show the company's logo on every page of the application. How do I achieve this in MAUI?

What I've tried:

AppShell.xaml:

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="FusionPortalDemo.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:FusionPortalDemo"
    Shell.FlyoutBehavior="Disabled">

    <ShellContent Title="RootPage" 
                  ContentTemplate="{DataTemplate local:GlobalLogoPage}"
                  Route="GlobalLogoPage" />

    <ShellContent Title="Home"
        ContentTemplate="{DataTemplate local:HomePage}"
        Route="HomePage" />

</Shell>

GlobalLogoPage:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FusionPortalDemo.GlobalLogoPage"
             Title="GlobalLogoPage">
    <Image Source="psl_logo.jpeg"
            VerticalOptions="Center" 
            HorizontalOptions="Center" />
</ContentPage>

However, this only brings up one page with the entire logo. What I suspect is that the other page is being shown, but hidden because it has 0 height. How exactly do I move forward?

CodePudding user response：

#1 WORKAROUND:

You can create a common TitleView that includes the logo and then reuse it in your Content pages that you want to show.

1.Create a ContentView : Title.xaml to your Project.

<?xml version="1.0" encoding="utf-8" ?> 
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiAppCustomTitleView.Title">
    <ContentView.Content>
        <Image Source="dotnet_bot.png" HorizontalOptions="Center" VerticalOptions="Center"> </Image>
    </ContentView.Content>
</ContentView>

Consume the TitleView:Title.xaml in your MainPage like below:

<?xml version="1.0" encoding="utf-8" ?> 
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:TitleView="clr-namespace:MauiAppCustomTitleView"
             x:Class="MauiAppCustomTitleView.MainPage">

    <Shell.TitleView>
        <TitleView:Title></TitleView:Title>
    </Shell.TitleView>



</ContentPage>

#2 WORKAROUND:

Or you can use Control templates enabling you to design template controls or template pages for reuse in MAUI.