Title in flyout doesn't show

Question

Hello @Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.)

Do you remember this post
https://learn.microsoft.com/en-us/answers/questions/1637791/transparent-flyout-items

Where you told me that y flyout items are transparent, because I have to wait for the items to be ready.

Well, I have a similar situation here

I have my flyout

    <Shell.FlyoutHeader>
        <Grid>
            <Image
                x:Name="ConfigMenu"
                Margin="10,0,0,15"
                HeightRequest="48"
                HorizontalOptions="Start"
                Source="windmill.png"
                WidthRequest="48">
                <Image.GestureRecognizers>
                    <TapGestureRecognizer Command="{Binding OpenMenuCommand}" />
                </Image.GestureRecognizers>
            </Image>
            <popup:SfPopup
                Padding="20"
                AbsoluteY="10"
                AutoSizeMode="Both"
                IsOpen="{Binding IsMenuPopUpOen}"
                RelativePosition="AlignBottomLeft"
                RelativeView="{x:Reference ConfigMenu}"
                ShowHeader="False"
                ShowOverlayAlways="False">
                <popup:SfPopup.PopupStyle>
                    <popup:PopupStyle CornerRadius="0" />
                </popup:SfPopup.PopupStyle>
                <popup:SfPopup.ContentTemplate>
                    <DataTemplate>
                        <Grid
                            BackgroundColor="#908686"
                            ColumnDefinitions="*,*"
                            HorizontalOptions="Fill">
                            <Label
                                Margin="10,0,0,0"
                                Text="{x:Static rex:AppResource.CompactMode}"
                                VerticalTextAlignment="Center" />
                            <controls:CustomSwitch
                                Grid.Column="1"
                                IsToggled="{Binding IsCompactMode}"
                                OnColor="Green">
                                <Switch.Behaviors>
                                    <toolkit:EventToCommandBehavior
                                        Command="{Binding ToogleSwitchCommand}"
                                        CommandParameter="{Binding IsCompactMode}"
                                        EventName="Toggled" />
                                </Switch.Behaviors>
                            </controls:CustomSwitch>
                        </Grid>
                    </DataTemplate>
                </popup:SfPopup.ContentTemplate>
            </popup:SfPopup>
        </Grid>
    </Shell.FlyoutHeader>
    <ShellContent
        ContentTemplate="{DataTemplate views:StartupPage}"
        Shell.FlyoutBehavior="Disabled"
        Shell.FlyoutItemIsVisible="False"
        Shell.NavBarIsVisible="False" />
    <!--  Flyout for Desktop  -->
    <FlyoutItem
        Title="{x:Static rex:AppResource.HomePage}"
        Icon="home.png"
        IsVisible="{OnIdiom Desktop=True,
                            Phone=False}">
        <ShellContent
            ContentTemplate="{DataTemplate views:HomePage}"
            Route="HomePage"
            Shell.NavBarIsVisible="False" />
    </FlyoutItem>
    <FlyoutItem
        Title="{x:Static rex:AppResource.Stations}"
        Icon="stations.png"
        IsVisible="{OnIdiom Desktop=True,
                            Phone=False}">
        <ShellContent
            ContentTemplate="{DataTemplate views:ChargingStationsMapPage}"
            Route="ChargingStationsMapPage" />
    </FlyoutItem>
    <!--  TabBar for Phone  -->
    <TabBar IsVisible="{OnIdiom Desktop=False, Phone=True}">
        <Tab
            Title="{x:Static rex:AppResource.HomePage}"
            Icon="home_mobile.png">
            <ShellContent
                ContentTemplate="{DataTemplate views:HomePage}"
                Route="HomePage"
                Shell.NavBarIsVisible="False" />
        </Tab>
        <Tab
            Title="{x:Static rex:AppResource.Stations}"
            Icon="station_mobile.png">
            <ShellContent
                ContentTemplate="{DataTemplate views:ChargingStationsMapPage}"
                Route="ChargingStationsMapPage" />
        </Tab>
    </TabBar>
</Shell>

pay attention only to the Windows version, since the flyout is available in Windows.

I wanted to create a mechanism to activate "Compact mode" or disactivate it, and the app will remember my choice

    public partial class AppShellViewModel : ObservableObject {

        public const string FLYOUT_KEY = "flyouy_key";
        public const string SWITCH_KEY = "switch_key";

        private AppShell? _shell;

        [ObservableProperty]
        bool isCompactMode;

        [ObservableProperty]
        bool isMenuPopUpOen;

        [RelayCommand]
        void Appearing(AppShell appShell) {
            _shell = appShell;
            LoadConfigurations();
        }

        [RelayCommand]
        void OpenMenu() {
            IsMenuPopUpOen = true;
        }

        [RelayCommand]
        void ToogleSwitch() {
            if (IsCompactMode) {
                _shell!.FlyoutWidth = 65;
            } else { _shell!.FlyoutWidth = 320; }

            IsMenuPopUpOen = false;

            SaveConfigurations();
        }

        private void SaveConfigurations() {
            Preferences.Set(FLYOUT_KEY, _shell!.FlyoutWidth);
            Preferences.Set(SWITCH_KEY, IsCompactMode);
        }

        private void LoadConfigurations() {
            _shell!.FlyoutWidth = Preferences.Get(FLYOUT_KEY, 320.0);
            IsCompactMode = Preferences.Get(SWITCH_KEY, false);
        }
    }
}

So, what I did is every time a tootle the switch, I will save the status of the flyout its preference's

And it works perfectly, but when I start the app again, the title for my pages disappears.

Example

https://reccloud.com/u/n2udogv