Maui navigation and TitleView is very confusing

Lloyd Sheen 1,376

I am trying to customize the TitleView in a Maui app.

1st - I am trying to get the page title but this is not happening. The property CurrentPage does not seem to get updated and this means that the Title prop of the CurrentPage is not accessable.

2nd - even with it not working I have a button on the TitleView that will allow me to kill the app at any time without going back/back/back etc. The button shows when the app loads but as soon as I go to another page it disappears and the TitleView seems to have no function. As soon as I nav back to the opening page the button comes back but at the present it seems like doing this is not happening.

Now it gets weirder. If I nav to another page (using code) not the Flyout items the Title is correct and the button is shown. Seems that using the Flyouts to navigate do not update the TitleView.

Leon Lu (Shanghai Wicresoft Co,.Ltd.) 68,571 Reputation points Microsoft Vendor

2023-02-13T08:43:07.2666667+00:00

Could you minimize the code and share steps that reproduce the problem?

Which platform is not working when running code?

Please share your MAUI version.

As Note: Avoid posting multiple questions in the same thread.

Lloyd Sheen 1,376

XAML for AppShell

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="NHLMauiApp.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:NHLMauiApp" 
    xmlns:pages="clr-namespace:NHLMauiApp.ContentPages"
    Shell.FlyoutBehavior="Flyout" 
    PropertyChanging="propChanging" PropertyChanged="Shell_PropertyChanged">

    <Shell.TitleView>
        <HorizontalStackLayout>
            <Label Text="**" Margin="0,0,5,0"></Label>
            <Label Text="{Binding titleString}" FontSize="16" VerticalTextAlignment="Center" TextColor="LightSalmon"  Margin="0,0,10,0"></Label>
            <Label Text="**" Margin="5,0,0,0"></Label>
            <Button Text="Close" Clicked="closeApp"></Button>
        </HorizontalStackLayout>
    </Shell.TitleView>
    
    <!--the first flyout item is the starting view for the app-->

    <FlyoutItem Title="Schedule" Icon="hockeyschedule.jpg">
        <Tab>
            <ShellContent ContentTemplate="{DataTemplate pages:SchedulePage}" Title="Schedule" />
        </Tab>
    </FlyoutItem>

    <FlyoutItem Title="Standings" Icon="hockeystandings.png">
        <Tab>
            <ShellContent ContentTemplate="{DataTemplate pages:StandingsPage}" Title="Standings" />
        </Tab>
    </FlyoutItem>

    <FlyoutItem Title="Teams" Icon="hockeyteam.png">
        <Tab>
            <ShellContent ContentTemplate="{DataTemplate pages:TeamsPage}" />
        </Tab>
    </FlyoutItem>

    <FlyoutItem Title="Awards" Icon="hockeyawards.jpg">
        <Tab>
            <ShellContent ContentTemplate="{DataTemplate pages:AwardsPage}" />
        </Tab>
    </FlyoutItem>

    <FlyoutItem Title="Player" IsVisible="{Binding showPlayerFlyout}">
        <Tab>
            <ShellContent ContentTemplate="{DataTemplate pages:PlayersPage}" />
        </Tab>
    </FlyoutItem>

    <FlyoutItem Title="Draft">
        <Tab>
            <ShellContent ContentTemplate="{DataTemplate pages:DraftPage}"/>
        </Tab>
    </FlyoutItem>

    <FlyoutItem Title="Player Search" >
        <Tab>
            <ShellContent ContentTemplate="{DataTemplate pages:PlayerSearchPage}"/>
        </Tab>
    </FlyoutItem>

    <MenuItem Text="Close App" Clicked="CloseApp"></MenuItem>
</Shell>

C# code for AppShell

using Newtonsoft.Json;
using NHLMauiApp.ContentPages;
using NHLMauiApp.Models;
using System.ComponentModel;
namespace NHLMauiApp ;


public partial class AppShell : Shell , INotifyPropertyChanged
{
	public AppShell()
	{
		InitializeComponent();
		Routing.RegisterRoute(nameof(StandingsPage), typeof(StandingsPage));
		Routing.RegisterRoute(nameof(TeamsPage ),typeof(TeamsPage));
		Routing.RegisterRoute(nameof(AwardsPage), typeof(AwardsPage));
		Routing.RegisterRoute(nameof(PlayersPage ), typeof(PlayersPage));	
		Routing.RegisterRoute(nameof(GameInfoPage), typeof(GameInfoPage));

        string HistTeams = APIGeneralRoutines.GetHistTeams().Result;
        TeamsRootobject post;
        post = JsonConvert.DeserializeObject<TeamsRootobject>(HistTeams);

        ApplicationStatic.histTeams = post.teams.ToList();

        titleString = "Another Test";
        BindingContext = this;
        ApplicationStatic.theAppShell= this;
    }

    private void closeApp(object sender, EventArgs e)
    {
        Application.Current.Quit();
    }

    private string _titleString;

    public string titleString
    {
        get { return _titleString; }
        set
        {
            _titleString = value;
            RaiseChanged("titleString");
        }
    }

    private void CloseApp(object sender, EventArgs e)
    {
        Application.Current.Quit();
    }

    private bool _showPlayerFlyout=false;

    public bool showPlayerFlyout
    {
        get { return _showPlayerFlyout; }
        set
        {
            _showPlayerFlyout = value;
            RaiseChanged("showPlayerFlyout");
        }
    }


    public event PropertyChangedEventHandler PropertyChanged;

    public void RaiseChanged(string p1)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(p1));
    }

    private void propChanging(object sender, Microsoft.Maui.Controls.PropertyChangingEventArgs e)
    {
        Console.WriteLine("Prop changing " + e.PropertyName);
        bool wasGood = true;
        try
        {
            titleString = this.CurrentPage.Title;
        }
        catch (Exception ex)
        {
            wasGood=false;
        }

        if(wasGood)
        {
            Console.WriteLine("Prop changing " + e.PropertyName);
        }

    }

    private void Shell_PropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        Console.WriteLine("Prop changed " + e.PropertyName);
    }
}


What happens:

1. Start of app, the TitleView has the label with "Another test" and close app button (going to be just image when this is resolved)

2. Navigate to another page using flyout, the TitleView has no visible lable and the button is not shown

3. Navigate to another page using flyout, the TitleView has page title and the button is shown

4. Navigate to the page (as in step 2) and again the TitleView has not visible label and button is not shown.  The XAML for that page is :

<?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:views="clr-namespace:NHLMauiApp.Views"
             x:Class="NHLMauiApp.ContentPages.StandingsPage" Title="Standings">
    <Grid>
        <views:NHLLeagueView x:Name="theNHLLeagueView"></views:NHLLeagueView>
    </Grid>
</ContentPage>

The XAML for the page that is shown as in step 3 is:

<?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:views="clr-namespace:NHLMauiApp.Views"
             x:Class="NHLMauiApp.ContentPages.TeamsPage"
             Title="Teams Info">
    <Grid>
        <views:NHLTeamView x:Name="theTeamView"></views:NHLTeamView>
    </Grid>
</ContentPage>

When I just use the Flyouts it seems that every second navigate shows the TitleView, and sometimes the TitleView when shown has the wrong page Title and pages that show the TitleView do not always.

Next using code.  There are items when double clicked will navigate to another page using code.  An example of this is:

        var navigationParameter = new Dictionary<string, object>
        {
            {"theBindingContext",gamevm}
        };
        await Shell.Current.GoToAsync($"{nameof(GameInfoPage)}", navigationParameter);

Now when this navigation is used the TitleView is always shown and the Title of the page is always correct.  The problem occurs when you use the back button and when you do the TitleView is not shown.

The platform is Android.
The Maui version is:

Installed Workload Id      Manifest Version       Installation Source
---------------------------------------------------------------------
maui-windows               7.0.52/7.0.100         VS 17.4.33213.308
maui-maccatalyst           7.0.52/7.0.100         VS 17.4.33213.308
maccatalyst                16.1.1477/7.0.100      VS 17.4.33213.308
maui-ios                   7.0.52/7.0.100         VS 17.4.33213.308
ios                        16.1.1477/7.0.100      VS 17.4.33213.308
android                    33.0.4/7.0.100         VS 17.4.33213.308
maui-android               7.0.52/7.0.100         VS 17.4.33213.308

Lloyd Sheen 1,376 Reputation points

2023-02-13T15:38:26.2+00:00

Changed the label that is supposed to show the page title and then cylcled thru the pages. The pattern was that every second navigation had the button etc and the others had no TitleView shown. Using the link (code) navigation does not seem to have a pattern and if the Binding is just to the Text="{Binding CurrentPage.Title}" it never shows. Also in the code for Shell it seems that the page title is changed on different property changes:

[DOTNET] ***** Prop changed titleString

[DOTNET] ******* Page Title changed for property changing CurrentState

[EGL_emulation] app_time_stats: avg=104.19ms min=9.33ms max=1332.84ms count=16

[DOTNET] ***** Prop changed titleString

[DOTNET] ******* Page Title changed for property changing CurrentState

[EGL_emulation] app_time_stats: avg=28.48ms min=1.65ms max=451.57ms count=37

[DOTNET] ***** Prop changed titleString

[DOTNET] ******* Page Title changed for property changing CurrentState

[EGL_emulation] app_time_stats: avg=41.08ms min=2.05ms max=702.73ms count=21

[DOTNET] ***** Prop changed titleString

[DOTNET] ******* Page Title changed for property changing FlyoutIsPresented

Leon Lu (Shanghai Wicresoft Co,.Ltd.) 68,571 Microsoft Vendor


public class BasePage : ContentPage

       

       StackLayout ll = new StackLayout();

       };

       Shell.SetTitleView(this, ll);

   public string titleString

   public void RaiseChanged(string p1)

}public class BasePage : ContentPage

       

       StackLayout ll = new StackLayout();

       };

       Shell.SetTitleView(this, ll);

   public string titleString

   public void RaiseChanged(string p1)

}

Leon Lu (Shanghai Wicresoft Co,.Ltd.) 68,571 Microsoft Vendor

Hi Lloyd Sheen, Thanks for your update, I can reproduce this issue. I use another way to achieve custom TitleView, I create a class that extend the ContentPage and I add the custom controls to the TitleView by background code like following code.

public class BasePage : ContentPage
{
    public BasePage() {
            }
    protected override void OnAppearing()    {
        base.OnAppearing();
        StackLayout ll = new StackLayout();
        ll.Orientation = StackOrientation.Horizontal;
        Label titleViewLabel = new Label
        {
            Text = titleString,
            FontAttributes = FontAttributes.Bold,
            FontSize = 25
        };
        Button button = new Button();
        button.Text = "COLSE";
        button.Clicked += QuitButton_Clicked;
        ll.Children.Add(titleViewLabel);
        ll.Children.Add(button);
        Shell.SetTitleView(this, ll);
    }
    private string _titleString;
    public string titleString
    {
        get { return _titleString; }
        set
        {
            _titleString = value;
            RaiseChanged("titleString");
        }
    }
    public event PropertyChangedEventHandler PropertyChanged;
    public void RaiseChanged(string p1)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(p1));
    }
    private void QuitButton_Clicked(object sender, EventArgs e)
    {
        Application.Current.Quit();
    }}

If you have a page that need add custom titleview. You need to change the page type for xaml and background code.

<local:BasePage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp2.NewPage2"
             xmlns:local="clr-namespace:MauiApp2"
             Title="NewPage2">
    <VerticalStackLayout>
        <Label
             Text="Welcome to .NET MAUI!"
            VerticalOptions="Center"
             HorizontalOptions="Center" />
    </VerticalStackLayout></local:BasePage>


public partial class NewPage2 : BasePage
{    
public NewPage2()    {
   
     InitializeComponent();
        //please add this line set the title
        titleString = this.Title;
    }
}

After that, this title and button could show normally when you switch flyout page.

Lloyd Sheen 1,376

Thanks I have never used C# to define the UI so this is helpful. Now to Maui / VS reality. As I said I had never used C# to define the UI so I put the following into each ContentPage:

<?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:views="clr-namespace:NHLMauiApp.Views"
             x:Class="NHLMauiApp.ContentPages.SchedulePage"
             Title="NHL Monthly Schedule" Shell.BackgroundColor="LightGray">
    <Shell.TitleView>
        <Grid ColumnDefinitions="*,30">
            <Label Text="{Binding CurrentPage.Title}" FontSize="20" VerticalTextAlignment="Center" TextColor="Black" FontAttributes="Bold" Margin="10,0,0,0"></Label>
            <Image Grid.Column="1" Source="close.png" HeightRequest="24" WidthRequest="24">
                <Image.GestureRecognizers>
                    <TapGestureRecognizer NumberOfTapsRequired="1" Tapped="closeApp"></TapGestureRecognizer>
                </Image.GestureRecognizers>
            </Image>
        </Grid>
    </Shell.TitleView>
    
    <Grid>
        <views:ScheduleAndGamesView></views:ScheduleAndGamesView>
    </Grid>
</ContentPage>

And as an aside - why is this site so horrible?????

Now this worked for several of the content pages but not every one.  The ones that did not show the title have exeactly the same structure.  This would mean that the CurrentPage.Title would be a binding error.  So lets use VS to help find out what is wrong.  Ok there is a Xaml Binding Errors tab. So lets view this and execute again.  No errors show.  So lets create a small project with a definite binding error.  This tab again shows nothing.

So as I have been saying for the last while - VS NEEDS QA. This tab has never worked. QA for this should be real simple. Took me about 5 mins to create a new solution with a binding error (MAUI) and execute to show that the tab does not work. If MS cannot spend 5 mins finding errors I guess that MS does not want to spend the time to fix the problem. I have most likely spent at least the same amount of time trying to get VS to work correctly with Maui as I have actually doing the development.

Leon Lu (Shanghai Wicresoft Co,.Ltd.) 68,571 Reputation points Microsoft Vendor

2023-02-17T09:44:51.4866667+00:00

And as an aside - why is this site so horrible????

could you provide feedback with his steps?
Lloyd Sheen 1,376 Reputation points

2023-02-17T14:53:59.51+00:00

The link you sent brings me to a page that has a link to the binding errors tab. THIS HAS NEVER WORKIED WITH VS AND MAUI!!!!!!!!!!!!!!!!!!!!!!

Add to this the fact that line by line debugging is (can't find a non-rude word). It will do a line by line for a couple of lines and then just go. At present VS is not a viable development tool. I have reinstalled , fixed and even have a new workstation and still no changes.

Is MS even interested in the fact that their product and documentation are so far apart??? I guess if they were then they would have to fix the problems.
Lloyd Sheen 1,376 Reputation points

2023-02-17T16:57:07.35+00:00

In keeping with my QA of VS/Maui I have now found the following. Like the sometimes binding works (seems like every second time) Maui navigation while it navigates all the other things around it fail.

I went to one of the pages that does not work and found that the Shell.Current.CurrentPage is null, one pages that work it is correct. WHY IS THAT!!!! and WHY IS MAUI SHOWN AS GA???? It should be try at your own risk.

I now know why when I was looking at examples of navigation and formatting no examples were about TitleView. IT DOES NOT WORK!!!!

Is there anyone at MS that cares or would care to tell me when it will be fixed?????

Leon Lu (Shanghai Wicresoft Co,.Ltd.) 68,571 Microsoft Vendor

Now this worked for several of the content pages but not every one. The ones that did not show the title have exeactly the same structure. This would mean that the CurrentPage.Title would be a binding error.

Please add x:Name for your ContentPage, then set bindingcontext for your label and set text property to the contentpage's title for your Label.

You can check the following code.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:views="clr-namespace:NHLMauiApp.Views"
             x:Class="NHLMauiApp.ContentPages.SchedulePage"
             Title="NHL Monthly Schedule" 
             Shell.BackgroundColor="LightGray"
             x:Name="MyPage"
>
   <Shell.TitleView>
        <Grid ColumnDefinitions="*,30">
            <Label   
               BindingContext="{x:Reference Name=MyPage}"
               Text="{Binding Path=Title}"
               FontSize="20" VerticalTextAlignment="Center" TextColor="Black" FontAttributes="Bold" Margin="10,0,0,0"></Label>
            <Image Grid.Column="1" Source="close.png" HeightRequest="24" WidthRequest="24">
                <Image.GestureRecognizers>
                    <TapGestureRecognizer NumberOfTapsRequired="1" Tapped="TapGestureRecognizer_Tapped">
                   </TapGestureRecognizer> 
               </Image.GestureRecognizers>
            </Image>
        </Grid>
    </Shell.TitleView>

So lets use VS to help find out what is wrong. Ok there is a Xaml Binding Errors tab. So lets view this and execute again. No errors show. So lets create a small project with a definite binding error. This tab again shows nothing.

For debugging the binding error, You can try to use this XAML data binding diagnostics - Visual Studio (Windows) tools in Visual Studio to detect and resolve data binding errors in XAML projects.

Leon Lu (Shanghai Wicresoft Co,.Ltd.) 68,571 Reputation points Microsoft Vendor

2023-02-21T06:33:02.5+00:00

For your scenario, it is hard to reproduce this issue and recommended to open a support ticket for this. Please contact our paid phone support at MS Support. You will get 1:1 support on that.
Lloyd Sheen 1,376 Reputation points

2023-02-21T13:43:48.47+00:00

I am not sure why I would have to go to a pay support when nothing shows in the XAML binding errors tab? It has not worked since WPF. I would think that MS (if it has any pride) would fix it. As I said it is beyond easy to replicate.
Leon Lu (Shanghai Wicresoft Co,.Ltd.) 68,571 Reputation points Microsoft Vendor

2023-02-23T09:57:22.92+00:00
Could you share detailed steps to reproduce it? If this issue is related to the VS, you can report this issue directly

Is that working by following code?

<Label BindingContext="{x:Reference Name=MyPage}" Text="{Binding Path=Title}" FontSize="20" VerticalTextAlignment="Center" TextColor="Black" FontAttributes="Bold" Margin="10,0,0,0"></Label>
Lloyd Sheen 1,376 Reputation points

2023-02-28T18:43:49.56+00:00

Oh one good thing. Now VS is showing the binding errors.
Leon Lu (Shanghai Wicresoft Co,.Ltd.) 68,571 Reputation points Microsoft Vendor

2023-03-01T05:54:05.9566667+00:00

Great, thanks for your update.
Cuong 1 Reputation point

2023-03-16T09:46:32.6966667+00:00

Hi @Leon Lu (Shanghai Wicresoft Co,.Ltd.) , I tried your way to custom TitleView, but on iOS it can't fill the whole height of Navigation bar, I'm using MAUI version 7.0.59.
Deleted

This comment has been deleted due to a violation of our Code of Conduct. The comment was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.
Deleted

This comment has been deleted due to a violation of our Code of Conduct. The comment was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.
Deleted

This comment has been deleted due to a violation of our Code of Conduct. The comment was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.
Deleted

This comment has been deleted due to a violation of our Code of Conduct. The comment was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.
Deleted

This comment has been deleted due to a violation of our Code of Conduct. The comment was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.
Deleted

This comment has been deleted due to a violation of our Code of Conduct. The comment was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.
Deleted

This comment has been deleted due to a violation of our Code of Conduct. The comment was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.
William Buchanan 26 Reputation points

2023-06-03T03:10:30.76+00:00

To answer this question: "Is there anyone at MS that cares or would care to tell me when it will be fixed?????" - the answer is 'no'. Maui is falling apart in front of their eyes and nobody cares. The entire community have been complaining about how shoddy it is even since the Xamarin days but they just ignore us all.

I might sound dramatic but I think this could cause the demise of .NET. Everyone is migrating over to the alternatives now, and everyone on the Maui team is at home watching Netflix all day not caring...
Deleted

This comment has been deleted due to a violation of our Code of Conduct. The comment was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.

23 answers

Deleted

This answer has been deleted due to a violation of our Code of Conduct. The answer was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.

Comments have been turned off. Learn more
Deleted

This answer has been deleted due to a violation of our Code of Conduct. The answer was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.

Comments have been turned off. Learn more
Deleted

This answer has been deleted due to a violation of our Code of Conduct. The answer was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.

Comments have been turned off. Learn more
Deleted

This answer has been deleted due to a violation of our Code of Conduct. The answer was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.

Comments have been turned off. Learn more
Deleted

This answer has been deleted due to a violation of our Code of Conduct. The answer was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.

Comments have been turned off. Learn more