Xamarin Forms: Menu disappears when changing page

Question

I have an application which has Two pages: Home and Settings.

The problem I am having is that when I navigate between these pages, my side menu disappears out of no where.

I have tried "anything", by that I mean I have tried everything I could, but the result is still the same.

]2

As you can see, the menu disappears.

The code:

<?xml version="1.0" encoding="UTF-8"?>  
<Shell xmlns="http://xamarin.com/schemas/2014/forms"   
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
       xmlns:local="clr-namespace:MyTestApplication.Views"  
       xmlns:viewModels="clr-namespace:MyTestApplication.ViewModels;assembly=MyTestApplication"  
       Title="MyTestApplication"  
       x:Class="MyTestApplication.AppShell">  



    <Shell.Resources>  
        <ResourceDictionary>  
            <Style x:Key="BaseStyle" TargetType="Element">  
                <Setter Property="Shell.BackgroundColor" Value="{StaticResource Primary}" />  
                <Setter Property="Shell.ForegroundColor" Value="White" />  
                <Setter Property="Shell.TitleColor" Value="White" />  
                <Setter Property="Shell.DisabledColor" Value="#B4FFFFFF" />  
                <Setter Property="Shell.UnselectedColor" Value="#95FFFFFF" />  
                <Setter Property="Shell.TabBarBackgroundColor" Value="{StaticResource Primary}" />  
                <Setter Property="Shell.TabBarForegroundColor" Value="White"/>  
                <Setter Property="Shell.TabBarUnselectedColor" Value="#95FFFFFF"/>  
                <Setter Property="Shell.TabBarTitleColor" Value="White"/>  
            </Style>  
            <Style TargetType="TabBar" BasedOn="{StaticResource BaseStyle}" />  
            <Style TargetType="FlyoutItem" BasedOn="{StaticResource BaseStyle}" />  
            <Style TargetType="local:SettingsPage" BasedOn="{StaticResource BaseStyle}" />  



            <Style Class="MenuItemLayoutStyle" TargetType="Layout" ApplyToDerivedTypes="True">  
                <Setter Property="VisualStateManager.VisualStateGroups">  
                    <VisualStateGroupList>  
                        <VisualStateGroup x:Name="CommonStates">  
                            <VisualState x:Name="Normal">  
                                <VisualState.Setters>  
                                    <Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="{StaticResource Primary}" />  
                                </VisualState.Setters>  
                            </VisualState>  
                        </VisualStateGroup>  
                    </VisualStateGroupList>  
                </Setter>  
            </Style>  
        </ResourceDictionary>  
    </Shell.Resources>  

  <Shell.FlyoutContentTemplate>  
        <DataTemplate>  
            <StackLayout>  
                <ListView x:Name="MenuItemsListView"  
                          SeparatorVisibility="None"  
                          HasUnevenRows="true"  
                          ItemsSource="{Binding FlyoutItems}" ItemTapped="Settings_Button">  
                    <ListView.Header>  
                        <Grid BackgroundColor="RosyBrown">  
                            <Grid.ColumnDefinitions>  
                                <ColumnDefinition Width="10"/>  
                                <ColumnDefinition Width="*"/>  
                                <ColumnDefinition Width="10"/>  
                            </Grid.ColumnDefinitions>  
                            <Grid.RowDefinitions>  
                                <RowDefinition Height="30"/>  
                                <RowDefinition Height="80"/>  
                                <RowDefinition Height="Auto"/>  
                                <RowDefinition Height="10"/>  
                            </Grid.RowDefinitions>  
                            <Label Grid.Row="2" Grid.Column="1"  
                                   TextColor="#d7d9b4"  
                                   Text="{Binding Title}"  
                                   FontSize="24"/>  
                        </Grid>  
                    </ListView.Header>  
                    <ListView.ItemTemplate>  
                        <DataTemplate>  
                            <ViewCell>  
                                <StackLayout Padding="15,10"  
                                             HorizontalOptions="FillAndExpand">  
                                    <Label VerticalOptions="FillAndExpand"   
                                           VerticalTextAlignment="Center"  
                                           Text="{Binding Type}"  
                                           TextColor="Black"  
                                           FontSize="20"/>  
                                </StackLayout>  
                            </ViewCell>  
                        </DataTemplate>  


                    </ListView.ItemTemplate>  
                </ListView>  

                <ListView x:Name="MenuItemsListView2"  
                          SeparatorVisibility="None"  
                          HasUnevenRows="true"  
                          ItemsSource="{Binding FlyoutItems2}" ItemTapped="Home_Button">  
                    <ListView.ItemTemplate>  
                        <DataTemplate>  
                            <ViewCell>  
                                <StackLayout Padding="15,10"  
                                             HorizontalOptions="FillAndExpand">  
                                    <Label VerticalOptions="FillAndExpand"  
                                           VerticalTextAlignment="Center"  
                                           Text="{Binding Type}"  
                                           TextColor="Black"  
                                           FontSize="20"/>  
                                </StackLayout>  
                            </ViewCell>  
                        </DataTemplate>  
                    </ListView.ItemTemplate>  
                </ListView>  

            </StackLayout>  
        </DataTemplate>  


    </Shell.FlyoutContentTemplate>  

        <FlyoutItem Title="Home" Icon="home.png">  
            <ShellContent Route="MainPage" ContentTemplate="{DataTemplate local:MainPage}"/>  
        </FlyoutItem>  
        <FlyoutItem Title="Settings" Icon="setting.png">  
            <ShellContent Route="SettingsPage" ContentTemplate="{DataTemplate local:SettingsPage}" />  
        </FlyoutItem>  

    <TabBar >  
        <ShellContent Route="LoginPage" ContentTemplate="{DataTemplate local:LoginPage}" />  
    </TabBar>  

</Shell>  

Any ideas are welcome!

Thanks!

Answer 1

Hello,​

Welcome to our Microsoft Q&A platform!

You cannot keep the Menu when changing page, but you can use menu and Back arrow 's way when changing page.

like following screenshot.

After click the Button

If you want to achieve this way, you should register your page in the shell background code. E.g, I register ItemsPage page.

   public AppShell()  
           {  
               InitializeComponent();  
               Routing.RegisterRoute(nameof(ItemDetailPage), typeof(ItemDetailPage));  
               Routing.RegisterRoute(nameof(NewItemPage), typeof(NewItemPage));  
               Routing.RegisterRoute(nameof(ItemsPage), typeof(ItemsPage));  
               
           }  

When I click the Button, I will navigate to the ItemsPage.

   await Shell.Current.GoToAsync("ItemsPage")  

For more details, you can check this article.

https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/navigation

Best Regards,

Leon Lu

---

If the response is helpful, please click "Accept Answer" and upvote it.

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.