>net Maui ShellContent IsVisible="True" Does not display Title

Question

The issue i have that at startup i have to make invisible item 'Profile'. and after successful login in AppShell.xmal.cs i watch property change and trying to make visible 'Profile'. and it works except that Title="Profile" is not visible. It is blank. When guess and click on it, it brings proper template.

AppShell.xmal file:

Shell
    x:Class="LoadTracking.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:views="clr-namespace:Test.Views"
    xmlns:local="clr-namespace:Test"
    Shell.FlyoutBehavior="Locked"
    FlyoutBackgroundColor="#AAF09A"
    Title="Test"
    FlyoutWidth="200" 
Shell
    x:Class="LoadTracking.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:views="clr-namespace:Test.Views"
    xmlns:local="clr-namespace:Test"
    Shell.FlyoutBehavior="Locked"
    FlyoutBackgroundColor="#AAF09A"
    Title="Test"
    FlyoutWidth="200" 

Shell
    x:Class="LoadTracking.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:views="clr-namespace:Test.Views"
    xmlns:local="clr-namespace:Test"
    Shell.FlyoutBehavior="Locked"
    FlyoutBackgroundColor="#AAF09A"
    Title="Test"
    FlyoutWidth="200" 

xml
<Shell.Resources >
    <Style Class="FlyoutItemLabelStyle" TargetType="Label" >
        <Setter Property="TextColor" Value="Black" />
        <Setter Property="FontSize" Value="Default" />
        <Setter Property="FontAttributes" Value="Bold" />
    </Style>
</Shell.Resources>
<ShellContent
    ContentTemplate="{DataTemplate local:MainPage}"
    Route="MainPage" FlyoutItemIsVisible="True"
    IsEnabled="False"  />

              IsEnabled="True"
              Title="Profile" 
              IsVisible="True"
              ContentTemplate="{DataTemplate views:Profile}" />**
              ```

C# code:

namespace Test
{
```powershell
public partial class AppShell : Shell
{
    // Property to control the Shell items' enabled state
    private bool isShellItemsEnabled;

    public bool IsShellItemsEnabled
    {
        get => isShellItemsEnabled;
        set
        {
            if (isShellItemsEnabled != value)
            {
                isShellItemsEnabled = value;
                OnPropertyChanged(nameof(IsShellItemsEnabled));
            }
        }
    }

    public AppShell()
    {
        InitializeComponent();

        // Set the default state of the Shell items
        IsShellItemsEnabled = false;

        Profile.IsVisible = IsShellItemsEnabled;

        // Subscribe to the PropertyChanged event
        PropertyChanged += OnPropertyChanged;
    }

    // Event handler for PropertyChanged event
    private void OnPropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        // Check if the IsShellItemsEnabled property changed
        if (e.PropertyName == nameof(IsShellItemsEnabled))
        {
            // Enable or disable Shell items based on the property value

           Profile.IsVisible = IsShellItemsEnabled;

            
        }
    }

    // Method to be called after successful login
    public void EnableShellItemsAfterLogin()
    {
        IsShellItemsEnabled = true;
    }

    private void btnLogin_Clicked(object sender, EventArgs e)
    {
       //simulation of login. I did not build full function. this is for testing only. 
         EnableShellItemsAfterLogin();

     
    }
}

}

Answer 1

Hello,

I can reproduce this issue in windows platform. Please report this issue at MAUI GitHub repo.

Here is a workaround. You can remove this <ShellContent x:Name="Profile" IsEnabled="True" Title="Profile" IsVisible="True" ContentTemplate="{DataTemplate views:Profile}" /> code in your AppShell.xaml,

Then you can add Button to <Shell.FlyoutHeader> or <Shell.FlyoutFooter>, I add button to the <Shell.FlyoutHeader> for testing. When I click the login button, Profile button will appear.

  <Shell.FlyoutHeader>
       <StackLayout>
           <Button Text="login" Clicked="btnLogin_Clicked"></Button>
          <Button Text="Profile" x:Name="Profile" TextColor="Black" Clicked="Profile_Clicked"  Background="Transparent" Margin="10,0"></Button>
       </StackLayout>
   </Shell.FlyoutHeader>

When you click the Profile button, Profile page will appear by await Shell.Current.GoToAsync("/Profile"); like following code.

 private async void btnLogin_Clicked(object sender, EventArgs e)
      {
          //simulation of login. I did not build full function. this is for testing only.
          // EnableShellItemsAfterLogin();
           Profile.IsVisible = true;   
      }


     private async void Profile_Clicked(object sender, EventArgs e)
      {
          await Shell.Current.GoToAsync("/Profile");
      }

Best Regards,

Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.