Xamarin Forms: Menu disappears when changing page

Lidprodsky 101 Reputation points
2021-05-17T09:14:04.01+00:00

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.

![This is the view before I navigate to SettingsPage]2

This is the view after I navigate to SettingsPage

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!

Xamarin
Xamarin
A Microsoft open-source app platform for building Android and iOS apps with .NET and C#.
5,254 questions
0 comments No comments
{count} votes

1 answer

Sort by: Most helpful
  1. Leon Lu (Shanghai Wicresoft Co,.Ltd.) 63,916 Reputation points Microsoft Vendor
    2021-05-18T02:34:39.997+00:00

    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.

    97351-image.png After click the Button 97361-image.png

    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.

    1 person found this answer helpful.
    0 comments No comments