CODEWITHSUNDEEP
c#mauiapp-shell
Chuck Krutsinger
Chuck Krutsinger

Reputation: 2930

How to customize the navigation title view of MAUI ContentPage

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.

Upvotes: 3

Views: 5179

Answers (2)

JEstes
JEstes

Reputation: 66

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

Upvotes: 5

Jimmy
Jimmy

Reputation: 135

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 = “”;
    }
}

Upvotes: 1

Related Questions