2

I want to replace the default Shell header with my own custom layout like this:

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="MyNamespace.App.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:MyNamespace.App"
    xmlns:pages="clr-namespace:MyNamespace.App.Pages"
    BindingContext="{x:Static local:MainView.Instance}"
    Shell.FlyoutBehavior="{Binding ShellFlyoutType}"
    x:Name="shellMain">

    <Shell.TitleView>
        <Grid ColumnDefinitions="*,200">
            <Label BindingContext="{x:Reference shellMain}" Text="{Binding Path=CurrentPage.Title, Mode=OneWay}" FontSize="Large" TextColor="White" />
            <ActivityIndicator IsRunning="{Binding IsBusy}" Color="Orange" Grid.Column="1" HorizontalOptions="End" />
        </Grid>
    </Shell.TitleView>
    
    
    <ShellContent
        Title=" Login"
        ContentTemplate="{DataTemplate local:MainPage}"
        Route="login" FlyoutItemIsVisible="False" />

    
    <ShellContent Title="Dashboard" 
                      ContentTemplate="{DataTemplate pages:DashboardPage}"
                      Route="dashboard" />
</Shell>

I can't manage to bind the current page title. My AppShell.xaml Shell is declared like <Shell ... x:Name="shellMain">

Benni
  • 203
  • 2
  • 7
  • Show us the whole XAML. I have concerns how you use it. Let me ask directly, is this titleview in your page, or in your shell? – H.A.H. Jan 27 '23 at 13:08
  • It's in my shell. I use the AppShell.xaml from the default template. – Benni Jan 27 '23 at 13:41

2 Answers2

2

To be an alternative, you could set the titleview in OnNavigated method:

In AppShell.xaml, define a name for the label

<Shell.TitleView>
    <Grid ColumnDefinitions="*,200">
        <Label BindingContext="{x:Reference shellMain}" x:Name="mylabel" FontSize="Large" TextColor="White" />
        <ActivityIndicator IsRunning="{Binding IsBusy}" Color="Orange" Grid.Column="1" HorizontalOptions="End" />
    </Grid>
</Shell.TitleView>

In AppShell.xaml.cs, override OnNavigated method, get the currentitem

protected override void OnNavigated(ShellNavigatedEventArgs args)
{
    base.OnNavigated(args);

    var shellItem = Shell.Current?.CurrentItem;
    string title = shellItem?.Title;
    int iterationCount = 0;
    while (shellItem != null
        && title == null)
    {
        title = shellItem.Title;
        shellItem = shellItem.CurrentItem;

        if (iterationCount > 10)
            break;  // max nesting reached

        iterationCount++;
    }

    myLabel.Text = title;
}

Hope it works for you.

Benni
  • 203
  • 2
  • 7
Liqun Shen-MSFT
  • 3,490
  • 2
  • 3
  • 11
  • Thanks for the answer. Unfortunately this workaround did not solve the problem for me on android. Right now I can't test it on windows because of another annoying issue (https://github.com/dotnet/maui/issues/12080). – Benni Jan 30 '23 at 10:05
  • @Benni I put a picture in my answer. Did this what you want for android? This is just using code in my answer for pixel 5 api33. – Liqun Shen-MSFT Jan 30 '23 at 13:01
  • sorry for the misunderstanding. My goal was to bind to the current page title not the shell title itself like `` – Benni Jan 31 '23 at 08:04
  • Seems we could not bind it in such way, so i tried use another way to achieve. @Benni you could have a try. – Liqun Shen-MSFT Feb 01 '23 at 06:38
  • Thanks for the non MVVM workaround. However sometimes on android the title just disappears. But not all the time. I did adjust your code to work with different `.CurrentItem` levels after navigating to another page. At the moment I can't edit your question because the edit queue is full. I will try later. – Benni Feb 01 '23 at 10:13
  • I approve the edit. Did it work for you? – Liqun Shen-MSFT Feb 03 '23 at 00:40
  • It shows the title only sometimes. Unfortunately it is not a solution (workaround). – Benni Feb 13 '23 at 14:34
  • I also notice that. I think of one stupid but effective way is to write code in each page's OnAppearing method and set the titleview. – Liqun Shen-MSFT Feb 15 '23 at 06:48
0

I was trying the same to be able to modify the appearance of the TitleView. It works on iOS although there was another bug there. But on Android I had the same issue. On the forward navigation it updates the title but when you press the back button the title is not updating. I have opened an issue and added a repo as well.

https://github.com/dotnet/maui/issues/12416#issuecomment-1372627514

Is there another way to modify the appearance of the TitleView?

HarryKontop
  • 33
  • 2
  • 6