Transparent flyout items

Question

I don't know why, but if I change my flyout to "Locked "in Desktop In cannot see anything

my pages are there, and I can navigate but I cannot see.

  FlyoutBehavior="{OnIdiom Desktop=Locked,
                           Phone=Flyout}"
  
  Shell.NavBarIsVisible="{OnIdiom Phone=true,
                                  Desktop=false}"
  Shell.TabBarIsVisible="False">
  <Shell.FlyoutFooterTemplate>
      <DataTemplate>
          <Button
              Margin="20"
              Command="{Binding SignOutCommand}"
              CornerRadius="8"
              Text="Log out" />
      </DataTemplate>
  </Shell.FlyoutFooterTemplate>

this is the helper I use for create the menu.

public static class FlyoutHelper {
    public static void CreateFlyoutHeader(DemyUser? updatedUser) {
        IAppService appService = new AppService();
        Shell.Current.FlyoutHeader = new FlyoutHeader(
            new FlyoutHeaderViewModel(
                              $"{updatedUser!.Firstname} {updatedUser.Lastname}"!,
                              updatedUser.DemyId!,
                              updatedUser.Email!,
                              updatedUser.CurrentRole!,
                              appService
            ));
    }
    public static void CreateFlyoutMenu(string role) {
        switch (role) {
            case nameof(Roles.Student):
                CreateStudentItems();
                break;
            case nameof(Roles.Teacher):
                CreateTeacherItems();
                break;
            case nameof(Roles.Coordinator):
                CreateCoordintorItems();
                break;
        }
    }
    private static void CreateStudentItems() {
        var studentItems = new FlyoutItem() {
            Title = "Welcome",
            Route = nameof(StudentDashboardPage),
            FlyoutDisplayOptions = FlyoutDisplayOptions.AsMultipleItems,
            Items = {
             new ShellContent {
                 Title = "Welcome",
                 ContentTemplate = new DataTemplate(typeof(WelcomePage)),
             },
             new ShellContent {
                 Title = "Join meeting",
                 ContentTemplate = new DataTemplate(typeof(JoinMeetingPage)),
             }
        }
        };
        if (!Shell.Current.Items.Contains(studentItems)) {
            Shell.Current.Items.Add(studentItems);
        }
    }
    private static void CreateTeacherItems() {
        var TeacherItems = new FlyoutItem() {
            Title = "Welcome",
            Route = nameof(TeacherDashboardPage),
            FlyoutDisplayOptions = FlyoutDisplayOptions.AsMultipleItems,
            Items = {
             new ShellContent {
                 Title = "Welcome",
                 ContentTemplate = new DataTemplate(typeof(WelcomePage)),
             },
             new ShellContent {
                 Title = "Join meeting",
                 ContentTemplate = new DataTemplate(typeof(JoinMeetingPage)),
             },
             new ShellContent {
                 Title = "My courses",
                 ContentTemplate = new DataTemplate(typeof(MyCoursesPage)),
             },
             new ShellContent {
                 Title = "New lecture",
                 ContentTemplate = new DataTemplate (typeof(NewLecturePage)),
             },
             new ShellContent {
                 Title = "New Test",
                 ContentTemplate = new DataTemplate(typeof(NewTestPage)),
             },
             new ShellContent {
                 Title = "Schedule lecture",
                 ContentTemplate = new DataTemplate (typeof(NewLecturePage)),
             },
             new ShellContent {
                 Title = "Schedule test",
                 ContentTemplate = new DataTemplate(typeof(ScheduleTestPage)),
             },
        }
        };
        if (!Shell.Current.Items.Contains(TeacherItems)) {
            Shell.Current.Items.Add(TeacherItems);
        }
    }
    private static void CreateCoordintorItems() {
        var CoordinatorItems = new FlyoutItem() {
            Title = "Welcome",
            Route = nameof(CoordinatorDashboardPage),
            FlyoutDisplayOptions = FlyoutDisplayOptions.AsMultipleItems,
            Items = {
            new ShellContent {
                Title = "Welcome",
                ContentTemplate = new DataTemplate(typeof(WelcomePage)),
            },
            new ShellContent {
                Title = "Manage courses",
                ContentTemplate = new DataTemplate(typeof(ManageCoursePage)),
            },
            new ShellContent {
                Title = "Register student",
                ContentTemplate = new DataTemplate(typeof(RegisterStudentPage)),
            }
        }
        };
        if (!Shell.Current.Items.Contains(CoordinatorItems)) {
            Shell.Current.Items.Add(CoordinatorItems);
        }
    }
    public static void GetDefaultMenuItems() {
        var defaultItems = new List<ShellContent> {
             new() { ContentTemplate = new DataTemplate(typeof(StartupPage)),
                Route = nameof(StartupPage), FlyoutItemIsVisible = false },
            new() { ContentTemplate = new DataTemplate(typeof(LoginPage)),
                Route = nameof(LoginPage), FlyoutItemIsVisible = false },
            new() { ContentTemplate = new DataTemplate(typeof(NoInternetPage)),
                Route = nameof(NoInternetPage), FlyoutItemIsVisible = false },
            new() { ContentTemplate = new DataTemplate(typeof(RoleSelectionPage)),
                Route = nameof(RoleSelectionPage), FlyoutItemIsVisible = false }
        };
        Shell.Current.Items.Clear();
        foreach (var item in defaultItems) {
            Shell.Current.Items.Add(item);
        }

The strange part is that is I change the behavior to flyout.

and open it, I can see my option.

I always have problems with singleton and transient and I do not know if it has something to do with it

            builder.Logging.AddDebug();
#endif
            builder.Services.AddSingleton<HttpClient>();
            builder.Services.AddSingleton(AudioManager.Current);
            builder.Services.AddSingleton<IAppService, AppService>();
            builder.Services.AddSingleton(typeof(IDataService<>), typeof(DataService<>));
            builder.Services.AddSingleton<IAuthenticationService, AuthenticationService>();
            builder.Services.AddSingleton<IHttpService, HttpService>();
            builder.Services.AddSingleton(Connectivity.Current);
            builder.Services.AddSingleton(SecureStorage.Default);
            builder.Services.AddSingleton(firebaseAuthClient);
            builder.Services.AddSingleton<AppShell, AppShellViewModel>();
            builder.Services.AddSingleton<RegisterStudentPage, RegisterStudentPageViewModel>();
            builder.Services.AddSingleton<NoInternetPage>();
            builder.Services.AddSingleton<LoginPage, LoginPageViewModel>();
            builder.Services.AddSingleton<NewLecturePage, NewLecturePageViewModel>();
            builder.Services.AddSingleton<NewTestPage, NewTestPageViewMode>();
            builder.Services.AddSingleton<ScheduleLecturePage, ScheduleLecturePageViewModel>();
            builder.Services.AddSingleton<ScheduleTestPage, ScheduleTestPageViewModel>();
            builder.S
ervices.AddSingleton<MyCoursesPage, MyCoursesPageViewModel>();
            builder.Services.AddSingleton<JoinMeetingPage, JoinMeetingPageViewModel>();
            builder.Services.AddSingleton<ManageCoursePage, ManageCoursePageViewModel>();
            builder.Services.AddSingleton<StartupPage, StartupPageViewModel>();
            builder.Services.AddTransient<RoleSelectionPage>();
            builder.Services.AddTransient<RoomPage, RoomPageViewModel>();
            builder.Services.AddTransient<RoleSelectionPageViewModel>();

look

<Style
    ApplyToDerivedTypes="True"
    TargetType="Shell">
    <Setter Property="Shell.BackgroundColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource OffBlack}}" />
    <Setter Property="Shell.ForegroundColor" Value="{OnPlatform WinUI={StaticResource Primary}, Default={StaticResource White}}" />
    <Setter Property="Shell.TitleColor" Value="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource SecondaryDarkText}}" />
    <Setter Property="Shell.DisabledColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray950}}" />
    <Setter Property="Shell.UnselectedColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray200}}" />
    <Setter Property="Shell.NavBarHasShadow" Value="False" />
    <Setter Property="Shell.TabBarBackgroundColor" Value="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource Black}}" />
    <Setter Property="Shell.TabBarForegroundColor" Value="{AppThemeBinding Light={StaticResource Magenta}, Dark={StaticResource White}}" />
    <Setter Property="Shell.TabBarTitleColor" Value="{AppThemeBinding Light={StaticResource Magenta}, Dark={StaticResource White}}" />
    <Setter Property="Shell.TabBarUnselectedColor" Value="{AppThemeBinding Light={StaticResource Gray900}, Dark={StaticResource Gray200}}" />
</Style>

My desktop in on light theme, so the title shoud be black

    public AppShell(AppShellViewModel appShellViewModel) {
        InitializeComponent();
        //SetupNavigationView();
        BindingContext = appShellViewModel;
    }
    protected override void OnAppearing() {
        FlyoutHelper.GetDefaultMenuItems();
        base.OnAppearing();
    }
}
//    private void SetupNavigationView() {
//#if WINDOWS
//        Loaded += delegate {
//            Microsoft.UI.Xaml.Controls.NavigationView navigationView = (Microsoft.UI.Xaml.Controls.NavigationView)flyout.Handler!.PlatformView!;
//            navigationView.PaneDisplayMode = Microsoft.UI.Xaml.Controls.NavigationViewPaneDisplayMode.Left;
//        };
//    }

If I manipulate the window like resizing or dragging, the text will return.

Answer 1

= new List<> {

  new() {Title = "111", = new (typeof()),//

     Route = (), = true },

 new() {Title = "111", = new (typeof()),

     Route = (), = true },

 new() {Title = "111", = new (typeof()),

     Route = (), = true },

 new() {Title = "111", = new (typeof()),

     Route = (), = true }

Answer 2

Thank you for pointing me in the right direction. I Fix it.

What I did is that in the appshell.xmal, I disable the flyout or desktop, and in the Startup, when I call the NavigationHelper, I did this.

  public static async Task NavigatoToDashboardRoleAsync(DemyUser demyUser) {
        var pageNage = $"{demyUser.CurrentRole}DashboardPage";
        FlyoutHelper.GetDefaultMenuItems();
        FlyoutHelper.CreateFlyoutHeader(demyUser);
        FlyoutHelper.CreateFlyoutMenu(demyUser?.CurrentRole!);
        if (DeviceInfo.Platform == DevicePlatform.MacCatalyst
            || DeviceInfo.Platform == DevicePlatform.WinUI) {
            Shell.Current.FlyoutIsPresented = true;
            Shell.Current.FlyoutBehavior = FlyoutBehavior.Locked;
        }
        await Shell.Current.GoToAsync($"//{pageNage}", true);
    } 

So, I think that I wasn't giving my flyout enough time to update.

My question is, if that is the case, why I was able to navigate to all my pages?