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

Question

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?

Answer 1

#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.