How to customize the navigation title view of MAUI ContentPage

Question

In Xamarin, I frequently used <NavigationPage.TitleView> to customize the navigation title bar in my views. Now that I am working in MAUI, this tag seems to have no effect on a ShellItem view.

Here is AppShell.xaml:

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

    <ShellItem Route="MainPage">
        <ShellContent 
            Title="MainPage"
            ContentTemplate="{DataTemplate local:MainPage}"
            />
    </ShellItem> . . .

Here is MainPage.xaml:

<?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:localize="clr-namespace:FleetHDMobile.Resources.Strings"
             Shell.FlyoutBehavior="Flyout"
             x:Class="FleetHDMobile.Views.MainPage">
    <NavigationPage.TitleView>
        <Label
            Text="XXX"
            HeightRequest="44"
            WidthRequest="300" />
    </NavigationPage.TitleView>

    <ScrollView>

I have tried making MainPage a tab in the tabbar, but that didn't customize the title view either.

The <NavigationPage.TitleView> tag has no effect on the rendered view. I would like to put small logo icons in the title bar, but cannot figure out how to do so.

Does this answer your question? [How can I customize the Title in a .NET MAUI Flyout Shell app?](https://stackoverflow.com/questions/75692967/how-can-i-customize-the-title-in-a-net-maui-flyout-shell-app) — Julian, Mar 26 '23 at 07:40

score 1 · Answer 1 · answered Nov 08 '22 at 08:05

1

There are some known issues about this problem.

You can follow up them here:

https://github.com/dotnet/maui/issues/9269

https://github.com/dotnet/maui/issues/9687

Thanks for your support and feedback.

answered Nov 08 '22 at 08:05

Jessie Zhang -MSFT

9,830
1
7
19

score 1 · Accepted Answer · edited Mar 31 '23 at 00:12

1

You must use <Shell.TitleView> rather than <NavigationPage.TitleView> in a MAUI app that uses Shell.

edited Mar 31 '23 at 00:12

Jeremy Caney

7,102
69
48
77

answered Mar 27 '23 at 00:06

JEstes

26
1

score 0 · Answer 3 · answered Nov 07 '22 at 18:54

0

Did you try doing it through the ViewModel or the .cs of your View ?

Such as for MainPage.xaml.cs or MainPageViewModel.cs

public class MainPageViewModel
{
    public MainPageViewModel
    {
        Title = “”; // or this.Title = “”;
    }
}

answered Nov 07 '22 at 18:54

Jimmy

105
15

I'm not trying to change the title text, which is simple. I'm trying to add a logo image. – Chuck Krutsinger Nov 07 '22 at 19:41
Have you tried putting an image url ? Xamarin will turn the url string into the icon – Jimmy Nov 07 '22 at 19:46
Where would I put the image url? That is what I'm seeking help with. Thanks. – Chuck Krutsinger Nov 08 '22 at 02:06

How to customize the navigation title view of MAUI ContentPage

3 Answers3